edit small screen layout

src/app/actions/auth.ts

@@ -222,6 +222,7 @@ export async function registration(
 				message_body: { token: string },
 				message_code: string
 			};
+			console.log(parsed);
 			if (parsed.message_desc === 'Operation successful') {
 				await createSession(parsed.message_body.token, email as string);
 			} else {

src/app/styles/global-styles.scss

@@ -41,6 +41,10 @@
 	color: v.$white;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	h1 {
 		font-size: 2rem;
 		font-weight: 700;
@@ -73,6 +77,10 @@
 			display: flex;
 			gap: 28px;
 			align-items: center;
+
+			@media (max-width: 440px) {
+				flex-direction: column;
+			}
 		}
 
 		.header-stat-item {
@@ -101,6 +109,10 @@
 	padding: 30px;
 	background: v.$bg-light;
 	min-height: 100vh;
+
+	@media (max-width: 440px) {
+		padding: 15px;
+	}
 }
 
 .main-containter {
@@ -121,6 +133,10 @@
 	&.auto {
 		width: auto;
 	}
+
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
 }
 
 .btn {

src/app/styles/header.scss

@@ -14,11 +14,19 @@
 		padding: 20px 20px;
 	}
 
+	@media (max-width: 440px) {
+		padding: 10px 10px;
+	}
+
 	.header-action {
 		display: flex;
 		align-items: center;
 		gap: 15px;
 
+		@media (max-width: 440px) {
+			gap: 10px;
+		}
+
 		.icon-btn {
 			width: 40px;
 			height: 40px;
@@ -36,6 +44,11 @@
 				background: v.$bg-hover;
 				transform: translateY(-2px);
 			}
+
+			@media (max-width: 440px) {
+				width: 30px;
+				height: 30px;
+			}
 		}
 	}
 
@@ -68,12 +81,20 @@
 		@media (max-width: 490px) {
 			padding: 8px;
 		}
+
+		@media (max-width: 440px) {
+			padding: 8px;
+		}
 	}
 
 	.tokens-count {
 		font-weight: 700;
 		font-size: 14px;
 		letter-spacing: 0.5px;
+
+		@media (max-width: 440px) {
+			font-size: 12px;
+		}
 	}
 
 	.tokens-label {
@@ -192,6 +213,11 @@
 			cursor: pointer;
 			transition: all 0.3s;
 			text-transform: uppercase;
+
+			@media (max-width: 440px) {
+				width: 30px;
+				height: 30px;
+			}
 		}
 
 		.user-dropdown {

src/app/styles/pages-styles.scss

@@ -941,6 +941,10 @@
 		grid-template-columns: auto;
 	}
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	.stat-card {
 		background: white;
 		padding: 18px;
@@ -1008,6 +1012,10 @@
 	text-align: center;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	.referral-link-input {
 		display: flex;
 		gap: 15px;
@@ -1032,6 +1040,10 @@
 			align-items: center;
 			justify-content: center;
 			white-space: nowrap;
+
+			@media (max-width: 490px) {
+				font-size: 10px;
+			}
 		}
 
 		.copy-btn {
@@ -1276,6 +1288,16 @@
 		margin-bottom: 30px;
 		border: none;
 
+
+		@media (max-width: 440px) {
+			padding: 0;
+			box-shadow: none;
+		}
+
+		.settings-form-wrapper {
+			width: 100%;
+		}
+
 		.form-group {
 			margin-bottom: 20px;
 
@@ -1284,6 +1306,10 @@
 				margin-bottom: 8px;
 				font-weight: 600;
 				color: v.$text-s;
+
+				@media (max-width: 440px) {
+					font-size: 12px;
+				}
 			}
 
 			input,
@@ -1294,6 +1320,11 @@
 				border-radius: 10px;
 				font-size: 14px;
 				transition: border-color 0.3s;
+
+				@media (max-width: 440px) {
+					font-size: 12px;
+					padding: 10px;
+				}
 			}
 		}
 
@@ -1302,6 +1333,10 @@
 			align-items: center;
 			gap: 10px;
 			margin-bottom: 15px;
+
+			@media (max-width: 440px) {
+				font-size: 14px;
+			}
 		}
 
 		.btn-primary {
@@ -1322,6 +1357,7 @@
 	grid-template-columns: repeat(5, 1fr);
 	gap: 20px;
 	margin-bottom: 40px;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.stat-card.matches {
 		--card-color-1: #3b82f6;
@@ -1420,6 +1456,11 @@
 	@media (max-width: 860px) {
 		grid-template-columns: repeat(2, 1fr);
 	}
+
+	@media (max-width: 440px) {
+		grid-template-columns: auto;
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
 }
 
 .dashboard-main-grid {
@@ -1453,6 +1494,14 @@
 			max-width: calc(100vw - var(--side-bar-width) - 60px);
 		}
 	}
+
+	@media (max-width: 440px) {
+
+		.left-column,
+		.right-column {
+			max-width: calc(100vw - var(--side-bar-width) - 30px);
+		}
+	}
 }
 
 .content-section {
@@ -1591,6 +1640,8 @@
 	grid-template-columns: repeat(4, 1fr);
 	gap: 20px;
 	margin-bottom: 40px;
+	width: 100%;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.type-card.images {
 		--card-color-1: #ff6b8a;
@@ -1705,6 +1756,11 @@
 	@media (max-width: 1360px) {
 		grid-template-columns: repeat(2, 1fr);
 	}
+
+	@media (max-width: 440px) {
+		grid-template-columns: auto;
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
 }
 
 .dashboard-limits-section {
@@ -1891,6 +1947,12 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
+
+	@media (max-width: 440px) {
+		flex-direction: column;
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
 
 	.last-check-title {
 		font-size: 14px;
@@ -2143,6 +2205,10 @@
 	margin-bottom: 2rem;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	&-stat-card {
 		background: white;
 		padding: 1.5rem;
@@ -2262,6 +2328,10 @@
 	box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	.my-cases-header {
 		display: flex;
 		align-items: center;
@@ -2419,6 +2489,11 @@
 	gap: 24px;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+		flex-direction: column;
+	}
+
 	.check-all-left {
 		flex: 1;
 		position: relative;
@@ -2474,6 +2549,10 @@
 	margin-bottom: 24px;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	.section-header {
 		display: flex;
 		align-items: center;

src/app/styles/settings.scss

@@ -7,7 +7,6 @@
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 	border: 1px solid #e2e8f0;
 	transition: all 0.3s ease;
-	overflow: hidden;
 }
 
 .form-section {

src/app/ui/referral-page/setting-referral-program.tsx

@@ -8,7 +8,7 @@ export default function SettingReferralProgram() {
 			</div>
 
 			<form className="settings-form">
-				<div>
+				<div className="settings-form-wrapper">
 					<h4>💳 Настройки выплат</h4>
 
 					<div className="form-group">
@@ -32,7 +32,7 @@ export default function SettingReferralProgram() {
 					</div>
 				</div>
 
-				<div>
+				<div className="settings-form-wrapper">
 					<h4>🔔 Уведомления</h4>
 
 					<div className="checkbox-group">