luci-theme-bootstrap: fix cbi-value caption alignment

Since the removal of the clearfix styles, overlong captions will displace
subsequent input field rows.

Fix the issue by replace floating label + field margin with flexbox styles.

Fixes: #5535
Fixes: 8055acc9be ("luci-theme-bootstrap: overhaul styles")
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index abc130a0e4ab5275fa677194b52c282ca18a6a3d..c707479c48b3b619243b68326f6b6fb25c711e3b 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -502,11 +502,6 @@ pre {
 /* Forms.less
  * Base styles for various input types, form layouts, and states
  * ------------------------------------------------------------- */
-form,
-.cbi-value {
-       margin-bottom: 18px;
-}
-
 fieldset {
        margin-bottom: 9px;
        padding-top: 9px;
@@ -536,17 +531,20 @@ textarea {
        line-height: normal;
 }
 
-form .input,
+.cbi-value {
+       display: flex;
+       margin-bottom: 18px;
+}
+
 .cbi-value-field {
-       margin-left: 200px;
+       margin-left: 20px;
 }
 
 .cbi-value label.cbi-value-title {
        padding-top: 6px;
        font-size: 13px;
        line-height: 18px;
-       float: left;
-       width: 180px;
+       flex: 0 0 180px;
        text-align: right;
        color: var(--text-color-high);
 }

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
index 1c72835f093a519e1e6496992feed62fbdcecf0c..00dd089599757405d51ee30e2c079319e98d6294 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
@@ -161,6 +161,11 @@ header h3 a, header .brand {
                padding-bottom: .5em;
                border-bottom: 1px solid var(--border-color-high);
                margin-bottom: .5em;
+               display: block;
+       }
+
+       .cbi-value.hidden {
+               display: none;
        }
 
        .cbi-value .cbi-value:last-child {
@@ -170,7 +175,6 @@ header h3 a, header .brand {
        }
 
        .cbi-value label.cbi-value-title {
-               float: none;
                font-weight: bold;
        }