From 8694780abbe3f910643f30607f93c2c61aca0fe7 Mon Sep 17 00:00:00 2001
From: egg <egg@localhost>
Date: Mon, 23 Feb 2026 19:04:55 +0800
Subject: [PATCH] fix(resource): use auto-fit grid for summary cards to follow
 sidebar toggle

Summary grid used fixed 10-column layout with viewport-based media queries
that didn't account for sidebar width changes, causing overflow when sidebar
opened and blank space at certain breakpoints.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/resource-shared/styles.css | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/frontend/src/resource-shared/styles.css b/frontend/src/resource-shared/styles.css
index 436a550..a0ab108 100644
--- a/frontend/src/resource-shared/styles.css
+++ b/frontend/src/resource-shared/styles.css
@@ -136,7 +136,7 @@ body {
 
 .summary-grid {
   display: grid;
-  grid-template-columns: repeat(10, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 10px;
 }
 
@@ -529,12 +529,6 @@ body {
   margin-bottom: 12px;
 }
 
-@media (max-width: 1500px) {
-  .summary-grid {
-    grid-template-columns: repeat(5, minmax(120px, 1fr));
-  }
-}
-
 @media (max-width: 980px) {
   .resource-page {
     padding: 12px;
@@ -543,10 +537,6 @@ body {
   .header-gradient h1 {
     font-size: 20px;
   }
-
-  .summary-grid {
-    grid-template-columns: repeat(3, minmax(110px, 1fr));
-  }
 }
 
 /* ---- MultiSelect component ---- */
@@ -662,10 +652,6 @@ body {
 }
 
 @media (max-width: 640px) {
-  .summary-grid {
-    grid-template-columns: repeat(2, minmax(100px, 1fr));
-  }
-
   .matrix-table th:first-child,
   .matrix-table td:first-child {
     min-width: 220px;