Tech Tools section with a code generator, toner report that names the part, toner forecasting, warranty proof of cover, application uploads

frontend/src/components/DashboardCards.vue

@@ -120,16 +120,27 @@ defineExpose({ load })
 <style scoped>
 .dc-grid {
   display: grid;
-  /* Four across on a wide screen, not five. A card holds a hostname, a machine
-     number and a state on one line; at five columns those lines truncate on
-     the very rows that matter most. auto-fit rather than auto-fill so two
-     cards fill the width instead of leaving three empty tracks. */
-  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+  /* Four across on a wide screen. A card holds a hostname, a machine number
+     and a state on one line, so the track cannot go much below this without
+     truncating the rows that matter most - but 28rem only fits three once the
+     sidebar takes its share at 1920, which is the common case here. auto-fit
+     rather than auto-fill so two cards fill the width instead of leaving
+     empty tracks. */
+  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
   max-width: 120rem;
   gap: 1rem;
   margin-bottom: 1.75rem;
   align-items: start;
 }
+
+/* Four is the ceiling, not a consequence of the track width. Left to auto-fit
+   alone this reaches five on an ultrawide, and a fifth column buys nothing -
+   the cards get narrower and the rows they hold start truncating again. */
+@media (min-width: 96rem) {
+  .dc-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .dc-card {
   background: var(--bg-card);
   border: 1px solid var(--border);