v0.36.9

src/admin/web/app/overview-rows.js

@@ -134,7 +134,8 @@ window.rustProxyOverviewRows = (() => {
         const columns = geometry.starts.length;
         const cardsModel = items.map(node => {
             const flow = place(node, geometry);
-            return { node, stat: isStat(node), w: Math.min(columns, spanOf(flow)), design: spanOf(flow), h: rowsOf(node), r: 0, c: 0 };
+            const w = Math.min(columns, spanOf(flow));
+            return { node, stat: isStat(node), w, base: w, design: spanOf(flow), h: rowsOf(node), r: 0, c: 0 };
         });
         let occupancy = [];
         const free = (r, c, w, h) => {
@@ -151,16 +152,32 @@ window.rustProxyOverviewRows = (() => {
                 for (let x = c; x < c + w; x++) row[x] = value;
             }
         };
+        const stripFree = (x, r, h) => {
+            for (let y = r; y < r + h; y++) if (occupancy[y]?.[x]) return false;
+            return true;
+        };
         const pack = () => {
             occupancy = [];
-            for (const card of cardsModel) {
+            cardsModel.forEach((card, index) => {
+                card.w = card.base;
                 let placed = false;
                 for (let r = 0; !placed; r++) {
                     for (let c = 0; c + card.w <= columns; c++) {
                         if (free(r, c, card.w, card.h)) { card.r = r; card.c = c; mark(r, c, card.w, card.h); placed = true; break; }
                     }
                 }
-            }
+                // A free strip beside the new card (over its whole height) that is
+                // narrower than every card still to be placed could never be filled:
+                // the card takes it now instead of leaving a hole.
+                let narrowest = Infinity;
+                for (let next = index + 1; next < cardsModel.length; next++) narrowest = Math.min(narrowest, cardsModel[next].base);
+                let right = 0;
+                while (card.c + card.w + right < columns && stripFree(card.c + card.w + right, card.r, card.h)) right++;
+                if (right > 0 && right < narrowest) { mark(card.r, card.c + card.w, right, card.h); card.w += right; }
+                let left = 0;
+                while (card.c - left - 1 >= 0 && stripFree(card.c - left - 1, card.r, card.h)) left++;
+                if (left > 0 && left < narrowest) { card.c -= left; card.w += left; mark(card.r, card.c, left, card.h); }
+            });
         };
         // Stat tiles starting on the same row share the tallest height; re-pack until
         // stable (raising a row can move later cards).
@@ -239,7 +256,10 @@ window.rustProxyOverviewRows = (() => {
                 if (other !== card && other.c < card.c + card.w && other.c + other.w > card.c && other.r >= end) next = Math.min(next, other.r);
             }
             const extra = next - end;
-            if (extra > 0 && extra <= Math.max(ROW_DIVISIONS * 2, card.h)) { mark(end, card.c, card.w, extra); card.h += extra; }
+            // At the end of the grid a chart or panel always reaches the last row (its
+            // chart grows) instead of leaving an empty area; stat tiles stay limited.
+            const limit = next === bottom && !card.stat ? Infinity : Math.max(ROW_DIVISIONS * 2, card.h);
+            if (extra > 0 && extra <= limit) { mark(end, card.c, card.w, extra); card.h += extra; }
         }
         for (const card of cardsModel) {
             card.node.style.setProperty("--overview-col", String(card.c + 1));

src/admin/web/css/30-overview.css

@@ -2279,12 +2279,34 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
   grid-row: var(--overview-row, auto)/span var(--overview-rows, 1);
 }
 
-/* Until the account's layout is applied the grid stays invisible, so the page
-   never shows the factory arrangement first and then jumps (no browser storage). */
+/* Until the account's layout is applied the cards stay invisible, so the page
+   never shows the factory arrangement first and then jumps (no browser storage).
+   Meanwhile the panel's startup screen is shown in their place (see below). */
 #panel-overview .dashboard-overview-grid.is-layout-pending {
+  position: relative;
+  min-height: 280px;
   visibility: hidden;
 }
 
+/* The panel's startup screen (logo, spinner, "Loading RustProxy…") is shown in
+   place of the cards while the layout is pending: a zero-height block right
+   before the grid whose content overlays the still invisible grid, so the cards'
+   order and first-child styles are unaffected. */
+#panel-overview .overview-layout-loading {
+  height: 0;
+  margin-inline: auto;
+  overflow: visible;
+  text-align: center;
+}
+
+#panel-overview .overview-layout-loading>.app-startup-brand {
+  margin-top: 56px;
+}
+
+#panel-overview .overview-layout-loading:has(+ .dashboard-overview-grid:not(.is-layout-pending)) {
+  display: none;
+}
+
 #panel-overview .dashboard-overview-grid.is-measuring-rows>[data-dashboard-widget] {
   align-self: start !important;
 }

src/admin/web/index.html

@@ -169,6 +169,11 @@
                                 id="overview-inline-hidden-count"></span></summary>
                         <div class="overview-inline-hidden-list" id="overview-inline-hidden-list"></div>
                     </details>
+                    <div class="app-startup-card overview-layout-loading" role="status" aria-live="polite">
+                        <div class="app-startup-brand" aria-hidden="true">r<span>/</span>p</div>
+                        <div class="app-startup-spinner" aria-hidden="true"></div>
+                        <p class="app-startup-message" data-i18n="startupLoading">Loading RustProxy…</p>
+                    </div>
                     <div class="stats-grid dashboard-overview-grid is-layout-pending" id="dashboard-overview-grid">
                         <!-- RP_METRICS_MAIN --><!-- RP_CHARTS_MAIN --><!-- RP_METRICS_WEB --><!-- RP_CHARTS_WEB -->
                         <article class="card" data-dashboard-widget="cache_diagnostics">