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>

2 files changed, 12 insertions, 10 deletions

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 abc130a0e4..c707479c48 100644
--- 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 1c72835f09..00dd089599 100644
--- 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;
 	}