diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss
index 1629730..914a09e 100644
--- a/src/app/styles/global-styles.scss
+++ b/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;
diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss
index 51d4805..e69f2ac 100644
--- a/src/app/styles/pages-styles.scss
+++ b/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;
}
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/app/styles/variable.scss b/src/app/styles/variable.scss
index 5d249a4..b5799a6 100644
--- a/src/app/styles/variable.scss
+++ b/src/app/styles/variable.scss
@@ -15,4 +15,12 @@ $red: #dc2626;
$color-image: #f08c00;
$color-video: #2f9e44;
-$color-audio: #1971c2;
\ No newline at end of file
+$color-audio: #1971c2;
+
+:root {
+ --side-bar-width: 280px;
+
+ @media (max-width: 1200px) {
+ --side-bar-width: 180px;
+ }
+}
\ No newline at end of file
diff --git a/src/app/ui/dashboard/stats-grid.tsx b/src/app/ui/dashboard/stats-grid.tsx
index 8cba27c..abc3e8c 100644
--- a/src/app/ui/dashboard/stats-grid.tsx
+++ b/src/app/ui/dashboard/stats-grid.tsx
@@ -4,7 +4,7 @@ export default function StatsGrid() {
const t = useTranslations("Global");
return (
-