From 76fa3036a25705c56c6dc9c1ae99dc63731c2c65 Mon Sep 17 00:00:00 2001 From: Paul Donald Date: Wed, 23 Apr 2025 21:21:29 +0200 Subject: [PATCH] luci-theme-*: wrap span tags, fixes badge text The nowrap can be a bit obnoxious when available layout space is limited. Wrap. Signed-off-by: Paul Donald --- .../htdocs/luci-static/bootstrap/cascade.css | 5 +++-- .../htdocs/luci-static/material/cascade.css | 4 +++- .../htdocs/luci-static/openwrt2020/cascade.css | 4 +++- .../htdocs/luci-static/openwrt.org/cascade.css | 4 +++- 4 files changed, 12 insertions(+), 5 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 57903c75c3..67c23fe43d 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -318,7 +318,9 @@ a:hover { float: left; } -.nowrap { +.nowrap:not(span) { +/* Sometimes you need to wrap: badges on narrow screens look weird + and nowrap defeats other width constraints, so exclude span */ white-space: nowrap; } @@ -2193,7 +2195,6 @@ th[data-sort-direction="desc"]::after { content: "\a0\25bc"; } .ifacebadge { display: inline-block; flex-direction: row; - white-space: nowrap; border: 1px solid var(--border-color-high); padding: 2px; background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium)); diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index bb9243f697..a7d39b6480 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -369,7 +369,9 @@ small { float: left; } -.nowrap:not(.td) { +.nowrap:not(.td span) { +/* Sometimes you need to wrap: badges on narrow screens look weird + and nowrap defeats other width constraints, so exclude span */ white-space: nowrap; } diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css index 5d93b25e8f..9fa3ce6b2b 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css @@ -552,7 +552,9 @@ tr.placeholder > td { vertical-align: middle !important; } -.nowrap { +.nowrap:not(span) { +/* Sometimes you need to wrap: badges on narrow screens look weird + and nowrap defeats other width constraints, so exclude span */ white-space: nowrap !important; } diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index 6381087a85..b0e64753c2 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -64,7 +64,9 @@ body { line-height: 3em; } -.nowrap { +.nowrap:not(span) { +/* Sometimes you need to wrap: badges on narrow screens look weird + and nowrap defeats other width constraints, so exclude span */ white-space: nowrap; } -- 2.30.2