feat(usage): enhance ServiceHealthCard with scrollable health grid

src/components/usage/ServiceHealthCard.tsx

@@ -137,13 +137,11 @@ export function ServiceHealthCard({ usage, loading }: ServiceHealthCardProps) {
           </span>
         </div>
       </div>
-      <div
+      <div className={styles.healthGridScroller}>
-        className={styles.healthGrid}
+        <div
-        ref={gridRef}
+          className={styles.healthGrid}
-        style={{
+          ref={gridRef}
-          gridTemplateRows: `repeat(${healthData.rows}, 10px)`,
+        >
-        }}
-      >
         {healthData.blockDetails.map((detail, idx) => {
           const isIdle = detail.rate === -1;
           const blockStyle = isIdle ? undefined : { backgroundColor: rateToColor(detail.rate) };
@@ -166,6 +164,7 @@ export function ServiceHealthCard({ usage, loading }: ServiceHealthCardProps) {
           );
         })}
       </div>
+      </div>
       <div className={styles.healthLegend}>
         <span className={styles.healthLegendLabel}>{t('service_health.oldest')}</span>
         <div className={styles.healthLegendColors}>

src/pages/UsagePage.module.scss

@@ -975,10 +975,17 @@
   background: var(--failure-badge-bg);
 }
 
+.healthGridScroller {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
 .healthGrid {
   display: grid;
   gap: 3px;
   grid-auto-flow: column;
+  grid-template-rows: repeat(7, 10px);
   width: fit-content;
   margin: 0 auto;
 }
@@ -1140,9 +1147,20 @@
 }
 
 @include mobile {
+  .healthCard {
+    padding: 14px;
+    gap: 10px;
+  }
+
+  .healthGrid {
+    grid-template-rows: repeat(7, 6px);
+    gap: 2px;
+    margin: 0;
+  }
+
   .healthBlockWrapper {
-    width: 8px;
+    width: 6px;
-    height: 8px;
+    height: 6px;
   }
 
   .healthTooltip {