my-content-page and fix adaptive styles

src/app/styles/global-styles.scss

@@ -33,7 +33,8 @@
 }
 
 .main-containter-wrapper {
-	margin-left: var(--side-bar-width);;
+	margin-left: var(--side-bar-width);
+	;
 	flex: 1;
 	padding: 30px;
 	background: v.$bg-light;
@@ -141,13 +142,18 @@
 	cursor: pointer;
 	position: absolute;
 	top: 50%;
-	right: 10px;
+	right: 0px;
+	padding: 10px;
 	transform: translateY(-50%);
 
 	svg {
 		width: 16px;
 		color: #686060;
 		transition: color 0.2s ease;
+
+		&:hover {
+			color: v.$s-color;
+		}
 	}
 
 	&.show {
@@ -213,6 +219,11 @@
 		width: 20px;
 		height: 20px;
 	}
+
+	@media (max-width: 1200px) {
+		padding: 5px 15px;
+		font-size: 15px;
+	}
 }
 
 .sub-link {
@@ -262,11 +273,23 @@
 	font-size: 24px;
 	font-weight: 600;
 	text-transform: uppercase;
+	white-space: nowrap;
+
+	@media (max-width: 1200px) {
+		padding: 0 15px 20px;
+		font-size: 20px;
+	}
 
 	svg {
 		width: 32px;
 		height: 32px;
 		margin-right: 15px;
+
+		@media (max-width: 1200px) {
+			width: 28px;
+			height: 28px;
+			margin-right: 5px;
+		}
 	}
 }
 

src/app/styles/pages-styles.scss

@@ -625,9 +625,14 @@
 			.actions {
 				display: flex;
 				justify-content: center;
-				gap: 0.5rem;
+				gap: 5px;
 				flex-wrap: wrap;
 
+				&-group {
+					display: flex;
+					gap: 5px;
+				}
+
 				button {
 					padding: 4px 12px;
 					font-size: 14px;
@@ -646,16 +651,141 @@
 	}
 }
 
-/* @media (max-width: 1300px) {
-	.tanstak-table {
-		max-width: 800px;
-		margin: 0 auto;
+.file-stats-container {
+	padding: 1rem;
+
+	@media (min-width: 640px) {
+		padding: 1.5rem;
 	}
 }
 
-@media (max-width: 1200px) {
-	.tanstak-table {
-		max-width: 500px;
-		margin: 0 auto;
+.file-stats-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 1fr 1fr;
+	gap: 1rem;
+
+	@media (min-width: 640px) {
+		grid-template-columns: repeat(1, 1fr);
+		gap: 1.5rem;
 	}
-} */
+
+	@media (min-width: 1280px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.file-stat-card {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-radius: 1rem;
+	border: 1px solid v.$b-color-2;
+	background-color: v.$white;
+	padding: 1rem;
+
+	@media (min-width: 1280px) {
+		padding-right: 1.25rem;
+	}
+}
+
+.file-stat-content {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.file-stat-icon-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 52px;
+	height: 52px;
+	border-radius: 0.75rem;
+
+	&.image-icon {
+		color: v.$color-image;
+	}
+
+	&.video-icon {
+		color: v.$color-video;
+	}
+
+	&.audio-icon {
+		color: v.$color-audio;
+	}
+
+	&.document-icon {
+		color: v.$color-document;
+	}
+}
+
+// Icon SVG
+.file-stat-icon {
+	width: 24px;
+	height: 24px;
+}
+
+// Text Info
+.file-stat-info {
+	display: flex;
+	flex-direction: column;
+}
+
+.file-stat-title {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: v.$text-p;
+	margin-bottom: 0.25rem;
+	line-height: 1.25;
+}
+
+.file-stat-usage {
+	font-size: 0.875rem;
+	color: v.$text-s;
+	display: block;
+	line-height: 1.25;
+}
+
+// Details (Right Side)
+.file-stat-details {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.file-stat-count {
+	font-size: 0.875rem;
+	color: v.$text-s;
+	display: block;
+	margin-bottom: 0.25rem;
+	text-align: right;
+	line-height: 1.25;
+}
+
+.file-stat-size {
+	font-size: 0.875rem;
+	color: v.$text-s;
+	display: block;
+	text-align: right;
+	line-height: 1.25;
+}
+
+@media (max-width: 639px) {
+	.file-stat-card {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 1rem;
+	}
+
+	.file-stat-details {
+		align-items: flex-start;
+		width: 100%;
+		padding-left: 68px;
+	}
+
+	.file-stat-count,
+	.file-stat-size {
+		text-align: left;
+	}
+}

src/app/styles/variable.scss

@@ -16,6 +16,7 @@ $red: #dc2626;
 $color-image: #f08c00;
 $color-video: #2f9e44;
 $color-audio: #1971c2;
+$color-document: #a561e6;
 
 :root {
 	--side-bar-width: 280px;