add more adaptive styles

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.19.0",
+	"version": "0.20.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

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

@@ -33,7 +33,7 @@ export default function Page() {
 				</div>
 			</div>
 			<DashboardFilesInfo />
-			<div className="grid grid-cols-2 mb-[30px] gap-[20px]">
+			<div className="dashboard-main-grid">
 				<DahboardLimitsSection />
 				<DahboardGeographySection />
 			</div>

src/app/styles/pages-styles.scss

@@ -1292,6 +1292,14 @@
 		opacity: 0.2;
 		filter: blur(1px);
 	}
+
+	@media (max-width: 1360px) {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	@media (max-width: 860px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
 }
 
 .dashboard-main-grid {
@@ -1299,16 +1307,31 @@
 	grid-template-columns: 1fr 1fr;
 	gap: 30px;
 	margin-bottom: 40px;
+	width: 100%;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.left-column {
 		display: flex;
 		flex-direction: column;
 		gap: 30px;
+		width: 100%;
+		max-width: calc(100vw - var(--side-bar-width) - 40vw - 60px);
 	}
 
 	.right-column {
+		width: 100%;
 		display: flex;
 		flex-direction: column;
+		max-width: calc(100vw - var(--side-bar-width) - 40vw - 60px);
+	}
+
+	@media (max-width: 1360px) {
+		grid-template-columns: 1fr;
+
+		.left-column,
+		.right-column {
+			max-width: calc(100vw - var(--side-bar-width) - 60px);
+		}
 	}
 }
 
@@ -1558,6 +1581,10 @@
 			font-size: 14px;
 		}
 	}
+
+	@media (max-width: 1360px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
 }
 
 .dashboard-limits-section {
@@ -1805,11 +1832,16 @@
 .violations-carousel {
 	display: flex;
 	flex-direction: column;
+	width: 100%;
+
+	.swiper-horizontal {
+		width: 100%;
+	}
 
 	.violation-slide {
 		.violation-image-container {
 			width: 100%;
-			height: 200px;
+
 			border-radius: 16px;
 			overflow: hidden;
 			margin-bottom: 16px;
@@ -1822,8 +1854,8 @@
 		}
 
 		.violation-image {
-			width: 300px;
+			width: 100%;
-			height: 100%;
+			max-width: 200px;
 			object-fit: contain;
 			background: white;
 		}
@@ -1862,7 +1894,7 @@
 			display: flex;
 			flex-direction: column;
 			gap: 12px;
-			min-height: 0;
+			width: 100%;
 
 			.violation-title-row {
 				display: flex;
@@ -1889,6 +1921,7 @@
 				text-transform: uppercase;
 				background: #dbeafe;
 				color: #1e40af;
+				/* display: none; */
 			}
 		}
 
@@ -1896,47 +1929,46 @@
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			gap: 10px;
-		}
 
-		.violation-info-item {
+			.violation-info-item {
-			padding: 10px 12px;
+				padding: 10px 12px;
-			background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+				background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-			border-radius: 10px;
+				border-radius: 10px;
-			display: flex;
+				display: flex;
-			flex-direction: column;
+				flex-direction: column;
-			gap: 4px;
+				gap: 4px;
-		}
 
-		.violation-info-value {
+				.violation-info-value {
-			font-size: 13px;
+					font-size: 13px;
-			font-weight: 700;
+					font-weight: 700;
-			color: #1e293b;
+					color: #1e293b;
-			display: flex;
+					display: flex;
-			align-items: center;
+					align-items: center;
-			gap: 6px;
+					gap: 6px;
-		}
+				}
 
-		.violation-info-label {
+				.violation-info-label {
-			font-size: 10px;
+					font-size: 10px;
-			font-weight: 600;
+					font-weight: 600;
-			color: #64748b;
+					color: #64748b;
-			text-transform: uppercase;
+					text-transform: uppercase;
-			letter-spacing: 0.5px;
+					letter-spacing: 0.5px;
-			display: flex;
+					display: flex;
-			align-items: center;
+					align-items: center;
-			gap: 4px;
+					gap: 4px;
+				}
+			}
 		}
 
 		.violation-actions-row {
 			display: flex;
 			gap: 10px;
 			margin-top: auto;
-			flex-shrink: 0;
 		}
 
 		.btn-visit-site {
 			flex: 1;
-			padding: 12px 20px;
+			padding: 12px 5px;
 			background: white;
 			color: #3b82f6;
 			border: 2px solid #3b82f6;
@@ -1958,7 +1990,7 @@
 
 		.violation-action {
 			flex: 1;
-			padding: 12px 20px;
+			padding: 12px 5px;
 			background: linear-gradient(135deg, #ef4444, #dc2626);
 			color: white;
 			border: none;
@@ -2009,9 +2041,6 @@
 	&-stat-number {
 		font-size: 2rem;
 		font-weight: 700;
-		/* background: linear-gradient(135deg, #667eea, #764ba2);
-		background-clip: text;
-		-webkit-text-fill-color: transparent; */
 		color: v.$p-color;
 		margin-bottom: 0.5rem;
 	}