Cap the dashboard at four cards, and shrink the hover map

The card track was 28rem, which fits four across a full-width page but only
three once the sidebar takes its 250px - and 1920 with the sidebar is the
common case here, so the board showed three. The track is 22rem now, with an
explicit four-column cap above 96rem: left to auto-fit alone a wide screen
reaches five, and a fifth column only makes the cards narrower until the rows
they hold start truncating again.

Measured at 1366, 1600, 1920 and 2560: three, four, four, four.

The floor-plan preview drops from 500x385 to 390x300. At the old size it
covered the row it was launched from, which is the row you are trying to read.

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
+  /* Four across on a wide screen. A card holds a hostname, a machine number
-     number and a state on one line; at five columns those lines truncate on
+     and a state on one line, so the track cannot go much below this without
-     the very rows that matter most. auto-fit rather than auto-fill so two
+     truncating the rows that matter most - but 28rem only fits three once the
-     cards fill the width instead of leaving three empty tracks. */
+     sidebar takes its share at 1920, which is the common case here. auto-fit
-  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+     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);

frontend/src/components/LocationMapTooltip.vue

@@ -216,8 +216,10 @@ watch(currentTheme, () => {
 
 .map-preview {
   position: relative;
-  width: 500px;
+  /* Smaller than it was: this is a glance-and-move-on preview, and at 500px it
-  height: 385px;
+     covered the row it was launched from. Aspect ratio kept. */
+  width: 390px;
+  height: 300px;
   overflow: hidden;
   background: var(--bg, #f5f5f5);
 }