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>

2 files changed, 7 insertions, 3 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;
 }
 
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 2e1ffb035b..062d274b75 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
@@ -11,7 +11,6 @@ header h3 a, header .brand {
 		background: linear-gradient(#fff 20%, #ddd 100%);
 		background-size: 1px 34px;
 		margin-bottom: 10px;
-		flex-wrap: wrap;
 	}
 
 	.tabs > li, .cbi-tabmenu > li {