edit layout for small resolution screens

src/app/styles/global-styles.scss

@@ -39,6 +39,7 @@
 	margin-bottom: 2rem;
 	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
 	color: v.$white;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	h1 {
 		font-size: 2rem;
@@ -60,6 +61,10 @@
 		align-items: center;
 		gap: 40px;
 
+		@media (max-width: 700px) {
+			flex-direction: column;
+		}
+
 		.header-main {
 			flex: 1;
 		}
@@ -243,7 +248,6 @@
 }
 
 .sidebar {
-	/* 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;
@@ -252,6 +256,41 @@
 	overflow-y: auto;
 	z-index: 100;
 	border-radius: 0 30px 30px 0;
+	transition: transform 0.3s ease-in-out;
+	transform: translateX(-100%);
+
+	@media (max-width: 767px) {
+		width: 400px;
+		display: block;
+
+		&.show {
+			transform: translateX(0);
+		}
+
+		&:not(.show) {
+			transform: translateX(-100%);
+		}
+	}
+
+	@media (max-width: 400px) {
+		width: 100%;
+	}
+
+	@media (min-width: 767px) {
+		width: var(--side-bar-width);
+		transform: translateX(0);
+	}
+}
+
+.sidebar-close-button {
+	padding: 0 15px 20px;
+	color: v.$white;
+	cursor: pointer;
+	display: none;
+
+	@media (max-width: 767px) {
+		display: block;
+	}
 }
 
 .nav-link {
@@ -427,6 +466,10 @@
 		&:focus {
 			outline: none;
 		}
+
+		@media (max-width: 490px) {
+			padding: 0.5rem 8px;
+		}
 	}
 
 	.switcher-list {

src/app/styles/header.scss

@@ -10,6 +10,10 @@
 	border-radius: 20px;
 	box-shadow: 0 4px 20px v.$shadow-1;
 
+	@media (max-width: 490px) {
+		padding: 20px 20px;
+	}
+
 	.header-action {
 		display: flex;
 		align-items: center;
@@ -60,6 +64,10 @@
 		font-size: 12px;
 		font-weight: 600;
 		min-width: 110px;
+
+		@media (max-width: 490px) {
+			padding: 8px;
+		}
 	}
 
 	.tokens-count {
@@ -289,4 +297,15 @@
 			}
 		}
 	}
+
+	.header-burger-menu {
+		display: none;
+		margin-right: auto;
+		cursor: pointer;
+		color: v.$p-color;
+
+		@media (max-width: 767px) {
+			display: block;
+		}
+	}
 }

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%;

src/app/styles/variable.scss

@@ -24,4 +24,8 @@ $color-document: #a561e6;
 	@media (max-width: 1200px) {
 		--side-bar-width: 180px;
 	}
+
+	@media (max-width: 767px) {
+		--side-bar-width: 0px;
+	}
 }