tanstak table corrected adaptive layout

src/app/[locale]/pages/dashboard/page.tsx

@@ -14,7 +14,7 @@ export default function Page() {
 	const t = useTranslations('Global');
 
 	return (
-		<div>
+		<>
 			<Suspense fallback={<>...</>}>
 				<PageTitle title="statistics">
 				</PageTitle>
@@ -24,6 +24,6 @@ export default function Page() {
 				</div>
 				<FilesTable fileType={'all'}/>
 			</Suspense>
-		</div>
+		</>
 	);
 }

src/app/components/tanstakTable.tsx

@@ -336,29 +336,29 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					)
 				},
 				cell: ({ row }) => (
-					<div className="flex space-x-2 justify-center">
+					<div className="actions">
 						<button
 							onClick={() => handleView(row.original)}
-							className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
+							className="bg-blue-500 hover:bg-blue-600"
 						>
 							<IconEye />
 						</button>
 						<button
 							onClick={() => handleDownload(row.original)}
 							disabled={isFileLoading}
-							className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
+							className="bg-green-500 hover:bg-green-600"
 						>
 							<IconFileOpen />
 						</button>
 						<button
 							onClick={() => handleProtect(row.original)}
-							className="px-3 py-1 bg-violet-500 text-white rounded hover:bg-violet-600 text-sm"
+							className="bg-violet-500 hover:bg-violet-600"
 						>
 							<IconShieldExclamation />
 						</button>
 						<button
 							onClick={() => handleOpenWindowForRemove(row.original)}
-							className="px-3 py-1 bg-red-700 text-white rounded hover:bg-red-800 text-sm"
+							className="bg-red-700 hover:bg-red-800"
 						>
 							<IconDelete />
 						</button>

src/app/styles/global-styles.scss

@@ -33,7 +33,7 @@
 }
 
 .main-containter-wrapper {
-	margin-left: 280px;
+	margin-left: var(--side-bar-width);;
 	flex: 1;
 	padding: 30px;
 	background: v.$bg-light;
@@ -45,6 +45,21 @@
 	margin: 0 auto;
 }
 
+.block-wrapper {
+	background: v.$white;
+	border-radius: 20px;
+	padding: 25px;
+	box-shadow: 0 4px 20px v.$shadow-1;
+	border: 1px solid v.$b-color-1;
+	margin-bottom: 30px;
+	width: 100%;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
+
+	&.auto {
+		width: auto;
+	}
+}
+
 .btn {
 	padding: 12px 24px;
 	border-radius: 10px;
@@ -165,7 +180,8 @@
 }
 
 .sidebar {
-	width: 280px;
+	/* width: v.$side-bar-width; */
+	width: var(--side-bar-width);
 	background: linear-gradient(180deg, v.$p-color 0%, v.$s-color 100%);
 	padding: 30px 0;
 	position: fixed;

src/app/styles/pages-styles.scss

@@ -281,15 +281,6 @@
 	}
 }
 
-.block-wrapper {
-	background: v.$white;
-	border-radius: 20px;
-	padding: 25px;
-	box-shadow: 0 4px 20px v.$shadow-1;
-	border: 1px solid v.$b-color-1;
-	margin-bottom: 30px;
-}
-
 .upload-section {
 	background: v.$white;
 	border-radius: 20px;
@@ -547,7 +538,6 @@
 	}
 
 	.tanstak-table-block {
-		width: 100%;
 		overflow-x: auto;
 		border-radius: 0.5rem;
 		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -557,6 +547,11 @@
 		width: 100%;
 		table-layout: fixed;
 
+
+		@media (max-width: 1200px) {
+			width: 1200px;
+		}
+
 		>*+* {
 			border-top: 1px solid v.$b-color-2;
 		}
@@ -565,9 +560,6 @@
 			border-bottom: 1px solid v.$b-color-2;
 		}
 
-		@media (min-width: 768px) {
-			table-layout: auto;
-		}
 
 		&-head {
 			background-color: v.$b-color-1;
@@ -629,11 +621,32 @@
 				padding-bottom: 1rem;
 				white-space: nowrap;
 			}
+
+			.actions {
+				display: flex;
+				justify-content: center;
+				gap: 0.5rem;
+				flex-wrap: wrap;
+
+				button {
+					padding: 4px 12px;
+					font-size: 14px;
+					line-height: 20px;
+					border-radius: 4px;
+					color: v.$white;
+
+					.icon {}
+
+					@media (max-width: 1200px) {
+						padding: 4px;
+					}
+				}
+			}
 		}
 	}
 }
 
-@media (max-width: 1300px) {
+/* @media (max-width: 1300px) {
 	.tanstak-table {
 		max-width: 800px;
 		margin: 0 auto;
@@ -645,4 +658,4 @@
 		max-width: 500px;
 		margin: 0 auto;
 	}
-}
+} */

src/app/styles/variable.scss

@@ -15,4 +15,12 @@ $red: #dc2626;
 
 $color-image: #f08c00;
 $color-video: #2f9e44;
-$color-audio: #1971c2;
+$color-audio: #1971c2;
+
+:root {
+	--side-bar-width: 280px;
+
+	@media (max-width: 1200px) {
+		--side-bar-width: 180px;
+	}
+}

src/app/ui/dashboard/stats-grid.tsx

@@ -4,7 +4,7 @@ export default function StatsGrid() {
 	const t = useTranslations("Global");
 
 	return (
-		<div className="block-wrapper stats-wrapper grow">
+		<div className="block-wrapper stats-wrapper grow auto">
 			<h3>
 				{t('your-content')}
 			</h3>