luci-theme-bootstrap: various style corrections

 - Add proper top and bottom margin for tab descriptions
 - Allow flex wrapping for cbi-value rows
 - Ensure that nested table/grid sections always take the full width
 - Make table/grid section row action buttons are as narrow as possible

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 9 insertions, 11 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 c707479c48..85252160b1 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -515,11 +515,6 @@ fieldset legend {
 	padding-top: 20px;
 }
 
-form .cbi-tab-descr {
-	line-height: 18px;
-	margin-bottom: 18px;
-}
-
 label,
 input,
 button,
@@ -533,11 +528,13 @@ textarea {
 
 .cbi-value {
 	display: flex;
+	flex-wrap: wrap;
 	margin-bottom: 18px;
 }
 
 .cbi-value-field {
 	margin-left: 20px;
+	flex: 1;
 }
 
 .cbi-value label.cbi-value-title {
@@ -549,6 +546,10 @@ textarea {
 	color: var(--text-color-high);
 }
 
+.cbi-value > .cbi-tblsection {
+	width: 100%;
+}
+
 label > input[type="checkbox"],
 label > input[type="radio"] {
 	vertical-align: text-top;
@@ -1241,8 +1242,8 @@ a.menu:after {
 	font-weight: bold;
 }
 
-.cbi-tabcontainer > fieldset.cbi-section[id] > legend {
-	display: none;
+.cbi-tab-descr {
+	margin: -9px 0 18px 0;
 }
 
 .tabs .menu-dropdown, .tabs .dropdown-menu {
@@ -2021,6 +2022,7 @@ table table td,
 .td.cbi-section-actions {
 	text-align: right;
 	vertical-align: middle;
+	width: 15%;
 }
 
 .td.cbi-section-actions > * {
@@ -2354,10 +2356,6 @@ div.cbi-value var.cbi-tooltip-container,
 	line-height: 300%;
 }
 
-[data-page="admin-network-dhcp"] [data-name="ip"] {
-	width: 15%;
-}
-
 @keyframes flash {
 	0% { opacity: 1; }
 	50% { opacity: .5; }