change styles for tariffs table

src/app/styles/payment-container.scss

@@ -201,11 +201,18 @@
 		}
 
 		.subscription-grid {
-			display: grid;
+/* 			display: grid;
-			/* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
 			grid-template-columns: 1fr 1fr 1fr 1fr;
+			grid-template-columns: repeat(4, auto);
 			gap: 20px;
 			margin-bottom: 25px;
+			justify-content: center; */
+
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(230px, 278px));
+			gap: 18px;
+			margin-bottom: 25px;
+			justify-content: center;
 		}
 
 		.plan-card {

src/app/ui/header/userMenuButton.tsx

@@ -59,7 +59,7 @@ export default function UserMenuButton() {
 						<div className="user-subscription">
 							<span className="text-[14px]">{t('rate')}: </span>
 							<span className="subscription-badge">
-								{userData?.subscriptionType ? userData.subscriptionType : ''}
+								{userData?.tariffInfo?.tariffName ? userData?.tariffInfo?.tariffName : '---'}
 							</span>
 							<br />
 							<span className="user-subscription-expire">{t('expires')}: 00.00.00</span>

src/app/ui/payment/user-usage.tsx

@@ -3,10 +3,16 @@
 import { convertBytes } from '@/app/lib/convertBytes';
 import { getProcents } from '@/app/lib/getProcents';
 import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
+import { useEffect } from 'react';
 
 export default function UserUsage() {
 	const { data: userData, isLoading, isError, error } = useUserProfile();
 
+	useEffect(() => {
+		console.log('log from user-usage');
+		console.log(userData);
+	}, [userData])
+
 	return (
 		<div className="usage-stats">
 			<h3>
@@ -49,7 +55,7 @@ export default function UserUsage() {
 				</div>
 				<div className="stat-card">
 					<div className="stat-value">
-						{userData?.tariffInfo?.tariffName ? userData?.tariffInfo?.tariffName : 'ERROR'}
+						{userData?.tariffInfo?.tariffName ? userData?.tariffInfo?.tariffName : '---'}
 					</div>
 					<div className="stat-label">Текущий план</div>
 				</div>