luci-theme-bootstrap: allow tabmenus to wrap (#2333)

Allow the tab menu line to wrap around on narrow screens to fix the issue
reported in PR #2333.

Also add the .nowrap utility class to the Bootstrap theme while we're
touching it.

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

1 files changed, 7 insertions, 2 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 394361ecde..98f6022ca0 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -174,6 +174,10 @@ a:hover {
 	float: left;
 }
 
+.nowrap {
+	white-space: nowrap;
+}
+
 /* Typography.less
  * Headings, body text, lists, code, and more for a versatile and durable typography system
  * ---------------------------------------------------------------------------------------- */
@@ -1020,8 +1024,9 @@ header .dropdown-menu a.hover,
 	padding: 0 2px;
 	list-style: none;
 	display: flex;
-	background: linear-gradient(#ddd 0%, #ddd 100%) repeat-x;
-	background-size: 1px 1px;
+	flex-wrap: wrap;
+	background: linear-gradient(#fff 28px, #ddd 28px);
+	background-size: 1px 29px;
 	background-position: left bottom;
 }