Fix: make large widgets fill the desktop rows they span

ui/css/dashboard.css

@@ -138,6 +138,7 @@
        literally in the source and a scan for one will not find it. */
     .c1 { grid-column:span 1 }
     .c2 { grid-column:span 2 }
+    .r2, .r3 { align-self:stretch }
     .r2 { grid-row:span 2 }
     .r3 { grid-row:span 3 }
 

ui/index.html

@@ -26,7 +26,7 @@
   <script src="/js/admin-theme.js?v=66565254"></script>
   <title>Stackyard</title>
   <link rel="stylesheet" href="/css/tokens.css?v=0f4ba0b8">
-  <link rel="stylesheet" href="/css/dashboard.css?v=621ab33d">
+  <link rel="stylesheet" href="/css/dashboard.css?v=c72419f3">
   <link rel="stylesheet" href="/css/config-recovery.css?v=faa8f109">
 </head>
 <body>
@@ -56,5 +56,5 @@
     </div>
   </div>
 </dialog>
-<script type="module" src="/js/dashboard.js?v=a81e3dbf"></script>
+<script type="module" src="/js/dashboard.js?v=cde5d1ae"></script>
 </body></html>

ui/js/dashboard.js

@@ -8,7 +8,7 @@ import {
   cardPreset,
   fixedAppearance,
   uniqueTitle,
-} from '/js/widget-types.js?v=9264dee5';
+} from '/js/widget-types.js?v=b0e8f76d';
 import {
   el,
   ICON_R,
@@ -46,7 +46,7 @@ import {
   buildMobile,
   resetMobileChrome,
   mkFolderGlyph,
-} from '/js/ui.js?v=3c85d5d7';
+} from '/js/ui.js?v=d648c39b';
 import { badgeMinimum, badgeSignature, computeBadgeVisual, readBadgeUpdate } from '/js/badge-logic.js?v=9e6d9d4b';
 import { formatNumber } from '/js/format-number.js?v=349a741d';
 import { closeBadgePopover, wireBadgePopover } from '/js/badge-popover.js?v=1e0ab5d1';
@@ -343,7 +343,10 @@ function mkWidget(item) {
   if (preset) card.dataset.card = preset;
   if (fixedAppearance(item, widgetReg)) card.dataset.appearance = 'dark';
   const design = WIDGET_DESIGN[sz] || WIDGET_DESIGN.medium;
-  card.style.height = WH.d[sz] + 'px';
+  if (wRows.d[sz] >= 2) {
+    card.style.minHeight = WH.d[sz] + 'px';
+    card.style.height = '100%';
+  } else card.style.height = WH.d[sz] + 'px';
   card.style.borderRadius = WIDGET_R + 'px';
   mountScaledWidget(card, {
     src: widgetSrc(item, widgetReg, { lang: currentLang() }),

ui/js/ui.js

@@ -1,5 +1,5 @@
 import { iconChain } from '/js/icons.js?v=9c7b5111';
-import { widgetSrc, cardPreset, fixedAppearance, uniqueTitle, WIDGET_DESIGN } from '/js/widget-types.js?v=9264dee5';
+import { widgetSrc, cardPreset, fixedAppearance, uniqueTitle, WIDGET_DESIGN } from '/js/widget-types.js?v=b0e8f76d';
 import {
   mk,
   clr,

ui/js/widget-types.js

@@ -1,7 +1,7 @@
 // @ts-check
 
 /* Layout geometry, keyed by widget family size, never by widget. */
-export const WIDGET_HEIGHTS = { small: 150, medium: 150, large: 304, xlarge: 456 };
+export const WIDGET_HEIGHTS = { small: 150, medium: 150, large: 330, xlarge: 510 };
 /* The fixed design canvas per family, in px. Widgets render at these dimensions
    and are scaled to fit the card. */
 export const WIDGET_DESIGN = { small: [170, 170], medium: [360, 170], large: [360, 360], xlarge: [360, 540] };

ui/test/widget-types.test.mjs

@@ -164,3 +164,11 @@ test('cardPreset ignores an unknown name and an unknown widget', () => {
   assert.equal(cardPreset({ widgetType: 'nope' }, CARD_REG), '');
   assert.equal(cardPreset({}, CARD_REG), '');
 });
+
+test('a widget over several desktop rows is as tall as those rows and the gaps between them', () => {
+  const ROW_GAP = 30;
+  for (const sz of Object.keys(WIDGET_HEIGHTS)) {
+    const rows = WIDGET_ROWS.desktop[sz] || 1;
+    assert.equal(WIDGET_HEIGHTS[sz], rows * WIDGET_HEIGHTS.small + (rows - 1) * ROW_GAP, sz);
+  }
+});