From 0955d6693126d20c8756b3522546aac6bce24a43 Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Mon, 23 Mar 2026 17:00:00 +0700
Subject: [PATCH] fix layout for small resolution

---
 .../components/tanstak-table/TanstakTable.tsx |  5 ++-
 src/app/styles/pages-styles.scss              | 33 +++++++++++++++----
 src/app/styles/reports.scss                   | 17 ++++++++--
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/app/components/tanstak-table/TanstakTable.tsx b/src/app/components/tanstak-table/TanstakTable.tsx
index 47c3c24..c97b318 100644
--- a/src/app/components/tanstak-table/TanstakTable.tsx
+++ b/src/app/components/tanstak-table/TanstakTable.tsx
@@ -748,6 +748,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							</DropDownList>
 						</div>
 					)}
+				</div>
+				<div className="table-filtres-wrapper text-filter-search">
 					<div className="table-filtres-item">
 						<div className="table-filtres-label">{t('search')}:</div>
 						<input
@@ -758,9 +760,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							placeholder={t('search')}
 						/>
 					</div>
-				</div>
-
-				<div className="table-filtres-wrapper">
 					<div className="table-filtres-item">
 						<div className="table-filtres-label">{t('items-per-page')}:</div>
 						<DropDownList
diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss
index f910c5c..965b196 100644
--- a/src/app/styles/pages-styles.scss
+++ b/src/app/styles/pages-styles.scss
@@ -596,6 +596,10 @@
 		padding-left: 0;
 		padding-right: 0;
 
+		@media (max-width: 1280px) {
+			flex-direction: column;
+		}
+
 		@media (max-width: 975px) {
 			flex-direction: column;
 			align-items: start;
@@ -603,12 +607,16 @@
 
 		.table-filtres-wrapper {
 			display: flex;
-			flex-direction: column;
+			flex-direction: row;
 			gap: 1rem;
-			width: 100%;
+			width: auto;
 
-			@media (min-width: 768px) {
-				flex-direction: row;
+			&.text-filter-search {
+				flex-grow: 1;
+				justify-content: space-between;
+			}
+
+			@media (max-width: 768px) {
 				width: auto;
 			}
 
@@ -2409,7 +2417,7 @@
 	grid-template-columns: repeat(4, 1fr);
 	gap: 20px;
 	margin-bottom: 30px;
-	max-width: calc(100vw - var(--side-bar-width) - 60px);
+	max-width: calc(100vw - var(--side-bar-width) - 30px);
 
 	@media (max-width: 1400px) {
 		grid-template-columns: repeat(2, 1fr);
@@ -2931,7 +2939,7 @@
 	margin-bottom: 24px;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
-	@media (max-width: 440px) {
+	@media (max-width: 900px) {
 		grid-template-columns: auto;
 		max-width: calc(100vw - var(--side-bar-width) - 30px);
 	}
@@ -4876,11 +4884,21 @@
 	margin-right: auto;
 	position: relative;
 	display: flex;
-	gap: 10px;
 	align-items: center;
 
+	@media (max-width: 850px) {
+		flex-direction: column;
+		align-items: start;
+	}
+
+	@media (max-width: 580px) {
+		display: none;
+	}
+
 	.local-file-check-result {
+		font-size: 14px;
 		cursor: pointer;
+		white-space: nowrap;
 	}
 
 
@@ -4900,6 +4918,7 @@
 		display: flex;
 		box-shadow: 0 10px 40px v.$shadow-1;
 		opacity: 0.8;
+		margin-right: 10px;
 
 		&:hover {
 			box-shadow: 0 5px 5px v.$shadow-1;
diff --git a/src/app/styles/reports.scss b/src/app/styles/reports.scss
index 08c52d3..2f88c3d 100644
--- a/src/app/styles/reports.scss
+++ b/src/app/styles/reports.scss
@@ -7,6 +7,7 @@
 	position: relative;
 	overflow: hidden;
 	margin-bottom: 30px;
+	max-width: calc(100vw - var(--side-bar-width) - 30px);
 
 	.enhanced-chart-title {
 		font-size: 22px;
@@ -70,11 +71,14 @@
 
 .analytics-grid {
 	display: flex;
-	flex-wrap: wrap;
 	gap: 30px;
 	margin-bottom: 40px;
 	justify-content: space-between;
 
+	@media (max-width: 970px) {
+		flex-direction: column;
+	}
+
 	.analytics-card {
 		background: white;
 		border-radius: 25px;
@@ -85,6 +89,10 @@
 		min-width: 350px;
 		max-width: calc(50% - 15px);
 		margin-bottom: 20px;
+
+		@media (max-width: 970px) {
+			max-width: calc(100vw - var(--side-bar-width) - 30px);
+		}
 	}
 
 	.analytics-header {
@@ -153,6 +161,7 @@
 	position: relative;
 	overflow: hidden;
 	box-shadow: 0 20px 40px rgba(30, 58, 138, 0.4);
+	max-width: calc(100vw - var(--side-bar-width) - 30px);
 
 	&::before {
 		content: '';
@@ -190,11 +199,14 @@
 
 	.summary-stats {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 		grid-template-columns: 1fr 2fr 1fr;
 		gap: 30px;
 		position: relative;
 		z-index: 2;
+
+		@media (max-width: 940px) {
+			grid-template-columns: 1fr;
+		}
 	}
 
 	.summary-stat {
@@ -209,6 +221,7 @@
 		&.center {
 			display: flex;
 			justify-content: space-around;
+			gap: 10px;
 		}
 
 		&:hover {