edit layout for small resolution screens

src/app/styles/pages-styles.scss

@@ -235,6 +235,7 @@
 	grid-template-columns: repeat(5, 1fr);
 	border-bottom: 1px solid v.$b-color-1;
 	align-items: center;
+	overflow: auto;
 
 	.stats-item {
 		border: 1px solid v.$b-color-1;
@@ -930,6 +931,15 @@
 	grid-template-columns: repeat(5, 1fr);
 	gap: 16px;
 	margin-bottom: 24px;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
+
+	@media (max-width: 960px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media (max-width: 670px) {
+		grid-template-columns: auto;
+	}
 
 	.stat-card {
 		background: white;
@@ -996,6 +1006,7 @@
 	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 	margin-bottom: 30px;
 	text-align: center;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.referral-link-input {
 		display: flex;
@@ -1003,6 +1014,11 @@
 		max-width: 700px;
 		margin: 20px auto;
 
+		@media (max-width: 890px) {
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
 		#referral-link {
 			display: flex;
 			flex: 1;
@@ -1066,6 +1082,14 @@
 	gap: 20px;
 	margin-top: 20px;
 
+	@media (max-width: 960px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media (max-width: 540px) {
+		grid-template-columns: auto;
+	}
+
 	.level-card {
 		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
 		border: 2px solid #e2e8f0;
@@ -1193,6 +1217,15 @@
 			align-items: end;
 			margin-top: 15px;
 
+			@media (max-width: 880px) {
+				flex-direction: column;
+				align-items: center;
+
+				.form-group {
+					width: 100%;
+				}
+			}
+
 			.form-group {
 				flex: 1;
 				margin-bottom: 0;
@@ -2108,6 +2141,7 @@
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	gap: 1.5rem;
 	margin-bottom: 2rem;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	&-stat-card {
 		background: white;
@@ -2226,6 +2260,7 @@
 	padding: 32px;
 	margin-bottom: 24px;
 	box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.my-cases-header {
 		display: flex;
@@ -2268,6 +2303,10 @@
 		grid-template-columns: repeat(3, 1fr);
 		gap: 20px;
 
+		@media (max-width: 890px) {
+			grid-template-columns: auto;
+		}
+
 		.case-card {
 			background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
 			border: 2px solid #e2e8f0;
@@ -2378,6 +2417,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: 24px;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.check-all-left {
 		flex: 1;
@@ -2432,6 +2472,7 @@
 
 .violations-table-section {
 	margin-bottom: 24px;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.section-header {
 		display: flex;
@@ -2464,6 +2505,7 @@
 		overflow: hidden;
 		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 		border: 2px solid #e2e8f0;
+		overflow: auto;
 
 		.violations-table {
 			width: 100%;