fix(usage): reduce heatmap card width

Author: ymkiux

web-ui/partials/index/panel-usage.html

@@ -173,7 +173,7 @@
                                 </div>
                             </section>
 
-                            <section class="usage-card usage-card-wide usage-card-heatmap">
+                            <section class="usage-card usage-card-heatmap">
                                 <div class="usage-card-head">
                                     <div>
                                         <div class="usage-card-title">{{ t('usage.heatmap.title') }}</div>

web-ui/styles/sessions-usage.css

@@ -380,6 +380,10 @@
     grid-column: 1 / -1;
 }
 
+.usage-card-heatmap {
+    grid-column: auto;
+}
+
 .usage-daily-legend {
     display: flex;
     flex-wrap: wrap;
@@ -656,6 +660,16 @@
     gap: 6px;
 }
 
+@media (max-width: 900px) {
+    .usage-chart-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .usage-card-heatmap {
+        grid-column: 1 / -1;
+    }
+}
+
 .usage-heat-dot {
     width: 12px;
     height: 12px;