v0.36.3

src/admin/web/css/10-base.css

@@ -1067,43 +1067,10 @@ dialog .vh-form,
   align-items: start;
 }
 
-body[data-density=compact] {
-  --ui-gap: 2px;
-  --ui-card: 5px;
-  --ui-font: 10.75px;
-  --ui-control: 22px;
-  line-height: 1.32;
-}
-
-body[data-density=compact] main {
-  padding: 0 10px;
-}
-
-body[data-density=compact] .card-heading {
-  margin-bottom: 5px;
-}
-
-body[data-density=compact] .card-heading h2,
 html[data-dashboard-density=compact] #panel-overview .dashboard-overview-grid>.card .card-heading h2 {
   font-size: 14px;
 }
 
-body[data-density=compact] .outline,
-body[data-density=compact] .primary,
-body[data-density=compact] .quiet,
-body[data-density=compact] button,
-body[data-density=compact] input:not([type=checkbox]):not([type=radio]),
-body[data-density=compact] select,
-body[data-density=compact] textarea {
-  padding: 3px 7px;
-  font-size: 10px;
-}
-
-body[data-density=compact] .page-footer {
-  padding: 7px 0;
-  margin-top: 4px;
-}
-
 .network-interface-row-head {
   display: flex;
   justify-content: space-between;
@@ -1151,7 +1118,7 @@ body[data-density=compact] .page-footer {
   font: 10px var(--mono);
 }
 
-.network-interface-row svg {
+.network-interface-row svg:not(.ui-icon) {
   display: block;
   width: 100%;
   height: 60px;
@@ -1251,6 +1218,29 @@ body[data-density=compact] .page-footer {
   min-height: 24px;
   padding: 3px 7px;
   font: 9px var(--mono);
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+/* Small controls: a smaller icon must not change the button height when the
+   optional SVG icons are toggled or re-applied during a refresh (Safari jumped). */
+.network-interface-hide>.ui-icon,
+.network-interface-hidden .quiet>.ui-icon {
+  width: 11px;
+  height: 11px;
+  margin-inline-end: 4px;
+  vertical-align: 0;
+}
+
+html[data-interface-icons="true"] .network-interface-hide>svg.ui-icon,
+html[data-interface-icons="true"] .network-interface-hidden .quiet>svg.ui-icon {
+  width: 11px;
+  height: 11px;
+}
+
+.network-interface-charts {
+  overflow-anchor: none;
 }
 
 .network-interface-row+.network-interface-row,
@@ -1570,14 +1560,6 @@ html[data-table-density=ultra] :is(table th, table td) {
   min-width: 0;
 }
 
-.path-permissions-commands {
-  max-height: 180px;
-}
-
-.path-permissions-actions {
-  margin-top: 0;
-}
-
 .path-permissions-options>summary {
   cursor: pointer;
 }
@@ -1599,6 +1581,7 @@ html[data-table-density=ultra] :is(table th, table td) {
 }
 
 .path-permissions-commands {
+  max-height: 180px;
   margin-bottom: 0;
 }
 
@@ -1608,4 +1591,13 @@ html[data-table-density=ultra] :is(table th, table td) {
 
 .path-permissions-actions {
   margin-top: 10px;
-}
+}
+/* Safety net: whatever chart/card rule is added later, injected UI icons stay inline,
+   fixed-size and out of layout flow (they used to stretch inside chart cards on mobile Safari). */
+html[data-interface-icons="true"] :is(button, a, summary)>svg.ui-icon {
+  display: inline-block;
+  position: static;
+  flex: 0 0 auto;
+  max-width: none;
+  overflow: visible;
+}