fix layout for small resolution

src/app/styles/reports.scss

@@ -7,6 +7,7 @@
 	position: relative;
 	overflow: hidden;
 	margin-bottom: 30px;
+	max-width: calc(100vw - var(--side-bar-width) - 30px);
 
 	.enhanced-chart-title {
 		font-size: 22px;
@@ -70,11 +71,14 @@
 
 .analytics-grid {
 	display: flex;
-	flex-wrap: wrap;
 	gap: 30px;
 	margin-bottom: 40px;
 	justify-content: space-between;
 
+	@media (max-width: 970px) {
+		flex-direction: column;
+	}
+
 	.analytics-card {
 		background: white;
 		border-radius: 25px;
@@ -85,6 +89,10 @@
 		min-width: 350px;
 		max-width: calc(50% - 15px);
 		margin-bottom: 20px;
+
+		@media (max-width: 970px) {
+			max-width: calc(100vw - var(--side-bar-width) - 30px);
+		}
 	}
 
 	.analytics-header {
@@ -153,6 +161,7 @@
 	position: relative;
 	overflow: hidden;
 	box-shadow: 0 20px 40px rgba(30, 58, 138, 0.4);
+	max-width: calc(100vw - var(--side-bar-width) - 30px);
 
 	&::before {
 		content: '';
@@ -190,11 +199,14 @@
 
 	.summary-stats {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 		grid-template-columns: 1fr 2fr 1fr;
 		gap: 30px;
 		position: relative;
 		z-index: 2;
+
+		@media (max-width: 940px) {
+			grid-template-columns: 1fr;
+		}
 	}
 
 	.summary-stat {
@@ -209,6 +221,7 @@
 		&.center {
 			display: flex;
 			justify-content: space-around;
+			gap: 10px;
 		}
 
 		&:hover {