0.35.4

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

@@ -15,6 +15,18 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
   margin-bottom: var(--ui-gap);
 }
 
+/* Summary tiles outside the Overview dashboard (Cache, Traffic, Transform) fill
+   every row instead of leaving empty grid columns after the last tile. */
+.stats-grid.cache-stats {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.stats-grid.cache-stats>.stat {
+  flex: 1 1 190px;
+  min-width: 0;
+}
+
 .stat {
   border: 1px solid var(--line);
   background: var(--panel);
@@ -549,6 +561,25 @@ body[data-density=compact] .pool-card .table-scroll {
   margin: 0;
 }
 
+/* Keep the block title clear of the corner button whatever padding the grid applies. */
+#panel-overview .stat-with-action>span:first-child {
+  display: block;
+  padding-right: 104px;
+}
+
+#panel-overview .stat-with-action .stat-corner-action {
+  max-width: 96px;
+  padding: 3px 7px;
+  font-size: 11px;
+  line-height: 1.25;
+  white-space: normal;
+  text-align: center;
+}
+
+#panel-overview .dashboard-overview-grid.is-unlocked .stat-with-action .stat-corner-action {
+  top: 44px;
+}
+
 .stat-chart strong {
   margin-bottom: 3px;
 }
@@ -1154,44 +1185,83 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
   position: relative;
   outline: 1px dashed var(--accent);
   outline-offset: -2px;
-  padding-top: 101px;
+  padding-top: 40px !important;
 }
 
-#panel-overview .dashboard-overview-grid.is-unlocked>.is-overview-dragging {
-  opacity: .45;
+#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget]:hover,
+#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget]:focus-within {
+  outline-style: solid;
 }
 
-#panel-overview .dashboard-overview-grid.is-unlocked>.is-overview-drop-before {
-  box-shadow: inset 4px 0 var(--accent);
+/* While sorting, the grid keeps strict DOM order: the placeholder is exactly where the block lands. */
+#panel-overview .dashboard-overview-grid.is-overview-sorting {
+  grid-auto-flow: row !important;
+  user-select: none;
+  cursor: grabbing;
 }
 
-#panel-overview .dashboard-overview-grid.is-unlocked>.is-overview-drop-after {
-  box-shadow: inset -4px 0 var(--accent);
+#panel-overview .dashboard-overview-grid>.overview-drop-placeholder {
+  grid-column: auto/span 2;
+  box-sizing: border-box;
+  border: 2px dashed var(--accent);
+  border-radius: var(--rp-radius-surface, 9px);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="3"] { grid-column: auto/span 3; }
+#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="4"] { grid-column: auto/span 4; }
+#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="6"] { grid-column: auto/span 6; }
+#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="12"] { grid-column: 1/-1; }
+
+#panel-overview .dashboard-overview-grid>.is-overview-lifted,
+#panel-overview .dashboard-overview-grid>.is-overview-lifted * {
+  pointer-events: none !important;
+}
+
+#panel-overview .dashboard-overview-grid>.is-overview-lifted {
+  box-shadow: 0 18px 40px rgb(0 0 0 / .28), 0 0 0 2px var(--accent);
+  opacity: .94;
+  transition: none;
+  will-change: transform;
+  overflow: hidden;
 }
 
 .overview-inline-toolbar {
   position: absolute;
-  top: 3px;
-  left: 4px;
-  right: 4px;
+  top: 5px;
+  left: 5px;
+  right: 5px;
   z-index: 4;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow: hidden;
   gap: 3px;
   pointer-events: auto;
 }
 
 #panel-overview .overview-inline-toolbar button {
-  min-width: 28px;
-  min-height: 27px;
-  padding: 2px 7px;
+  min-width: 26px;
+  min-height: 26px;
+  padding: 2px 6px;
   font-size: 12px;
+  flex: 0 0 auto;
+}
+
+/* Narrow blocks keep only the essentials; arrow keys on the grip still move them. */
+#panel-overview .dashboard-overview-grid>[data-dashboard-span="2"] .overview-inline-toolbar :is(.overview-widget-type, .overview-inline-up, .overview-inline-down),
+#panel-overview .dashboard-overview-grid>[data-dashboard-span="3"] .overview-inline-toolbar :is(.overview-inline-up, .overview-inline-down) {
+  display: none;
+}
+
+#panel-overview .dashboard-overview-grid>[data-dashboard-span="2"] .overview-inline-toolbar .overview-inline-hide {
+  margin-left: auto;
 }
 
 #panel-overview .overview-inline-toolbar .overview-inline-grip {
   cursor: grab;
   user-select: none;
+  touch-action: none;
 }
 
 #panel-overview .overview-inline-toolbar .overview-inline-grip:active {
@@ -1690,26 +1760,13 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
   flex-wrap: wrap;
   max-width: 100%;
   margin: 0 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .page-intro .overview-samples-toolbar .function-live-chart-samples select {
   min-width: 100px;
 }
 
-.page-intro .overview-samples-toolbar button {
-  width: auto;
-  flex: none;
-  min-height: 28px;
-  padding: 5px 10px;
-  white-space: nowrap;
-}
-
-.page-intro .overview-samples-toolbar .fine {
-  font-size: 10px;
-  color: var(--muted);
-  white-space: nowrap;
-}
-
 #panel-overview .stat-donut .overview-donut-info {
   display: flex;
   flex-direction: column;
@@ -1821,8 +1878,10 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
   margin: 4px 10px 8px;
 }
 
+/* Custom layouts follow the saved order exactly (no implicit back-filling of gaps);
+   "Fill gaps" in the layout editor compacts explicitly. */
 #panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom] {
-  grid-auto-flow: row dense;
+  grid-auto-flow: row;
 }
 
 #panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"] {