🗽 Sync 2026-10-23 00:46:23

luci-theme-argon/less/components/dropdowns.less

@@ -88,6 +88,9 @@
   text-align: start;
 
   > li {
+    // IP/MAC choices contain text, a strong hostname and punctuation. Keep
+    // those fragments in one text flow instead of separate anonymous flex items.
+    display: block;
     min-width: 0;
     min-height: 2.5rem;
     padding: .5rem .75rem;
@@ -100,6 +103,7 @@
     cursor: pointer;
 
     > label {
+      display: block;
       flex: 1 1 auto;
       min-width: 0;
       margin-inline-start: .5rem;
@@ -108,6 +112,7 @@
     // Keep wrapped descriptions in one text column, with the icon on its first line.
     &:has(> img),
     > label:has(> img) {
+      display: flex;
       align-items: flex-start;
 
       > img {

luci-theme-argon/less/components/forms.less

@@ -174,6 +174,12 @@
   min-width: ~"min(100%, var(--form-control-min-width))";
 }
 
+// A DynamicList's percentage-sized add row needs a definite containing width.
+// Match ordinary fields before its combobox measures the placeholder or value.
+.cbi-value-field .cbi-dynlist {
+  width: var(--form-control-min-width);
+}
+
 // The map has a definite width, so size containment cannot collapse a flex item.
 @container (max-width: 40rem) {
   .cbi-value {

luci-theme-argon/less/components/lists.less

@@ -86,10 +86,11 @@
     align-items: center;
     width: 100%;
     min-width: 0;
-    max-width: min(18rem, 100%);
+    max-width: 100%;
     flex-wrap: nowrap;
 
-    input {
+    // Only the plain add field joins its button; menu custom inputs stand alone.
+    > input {
       flex: 1 1 15.5rem;
       display: block;
       padding: 0.5rem 0.75rem;
@@ -190,12 +191,12 @@
 .cbi-dynlist,
 .cbi-dropdown {
   position: relative;
-  display: inline-flex;
-  padding-right: 0.25rem;
   min-height: 2.1875rem;
 }
 
 .cbi-dropdown {
+  display: inline-flex;
+  padding-inline-end: .25rem;
   align-items: center;
 }
 

luci-theme-argon/less/components/tables.less

@@ -231,6 +231,7 @@ body:not([data-page="admin-dashboard"]) {
   margin-bottom: 0;
 }
 
+.cbi-section-table-row>.cbi-value-field .cbi-dynlist,
 .cbi-section-table-row>.cbi-value-field .cbi-dropdown,
 .cbi-section-table-row>.cbi-value-field .cbi-input-select,
 .cbi-section-table-row>.cbi-value-field .cbi-input-text,

luci-theme-argon/less/page-fix.less

@@ -35,6 +35,7 @@
 @import "pages/rule-editors.less";
 
 // Status and monitoring
+@import "pages/dashboard.less";
 @import "pages/processes.less";
 @import "pages/overview.less";
 @import "pages/realtime.less";

luci-theme-argon/less/pages/dashboard.less

@@ -0,0 +1,80 @@
+// out: false
+
+// luci-mod-dashboard supplies chart layout; the theme owns its card surfaces.
+// The module loads CSS after the theme, so keep these overrides view-scoped.
+#view > .Dashboard {
+    --dashboard-surface-alt: var(--surface-muted);
+    --dashboard-text: var(--text-strong);
+    --dashboard-text-muted: var(--muted-text);
+    --dashboard-border: var(--border-color);
+    --dashboard-primary: var(--primary);
+    --dashboard-success: var(--success);
+    --dashboard-warn: var(--warning);
+
+    .dashboard-kpi-row > .cbi-section {
+        min-width: ~"min(100%, 16rem)";
+        padding: var(--field-gap) var(--section-inset);
+        gap: var(--field-gap);
+    }
+
+    .dashboard-kpi-text {
+        overflow-wrap: anywhere;
+    }
+
+    .dashboard-charts > .cbi-section {
+        min-width: ~"min(100%, 18rem)";
+        padding-block-end: var(--field-gap);
+
+        // Keep the native full-width heading; inset its chart and legend.
+        > :not(h3:first-child) {
+            margin-inline: var(--section-inset);
+        }
+
+        > .cbi-section-descr {
+            padding: 0;
+            margin-block-end: var(--field-gap);
+            overflow-wrap: anywhere;
+        }
+
+        > em {
+            padding: 0;
+        }
+
+        > .dashboard-legend-inline {
+            margin-block-start: var(--field-gap);
+        }
+    }
+
+    // Keep numeric chart axes in their native direction within RTL pages.
+    .dashboard-bars {
+        direction: ltr;
+    }
+
+    .dashboard-net-grid {
+        grid-template-columns: repeat(auto-fill, minmax(~"min(100%, 16.25rem)", 1fr));
+    }
+
+    .dashboard-net-fields {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .ifacebox {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .ifacebox-body {
+        text-align: start;
+    }
+
+    // Each Internet column wraps its empty hint below the tab's root div.
+    [data-tab="internet"] > div > div > em {
+        display: block;
+        padding: var(--field-gap) var(--section-inset);
+    }
+
+    // The layout editor keeps its actions inside the card, unlike normal pages.
+    [data-tab="layout"] .cbi-page-actions {
+        padding: var(--field-gap) var(--section-inset);
+    }
+}