treewide: set css tag flex-wrap to wrap buttons in modal view

In CSS, the flex-wrap property is used in a flex container to control
how flex items are laid out when there is not enough space in a single
line.

If a modal is displayed on small screens, the buttons are not wrapped. They
remain on one line. This breaks the layout and does not look good.

Signed-off-by: Florian Eckert <[email protected]>

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 41bea958772a6e0f0fc918d4e5c923177136e860..cad9b389b6964f30cf19757290ff08d52efc1a2d 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1422,6 +1422,7 @@ footer ul.breadcrumb {
 .modal > .button-row {
        display: flex;
        justify-content: space-between;
+       flex-wrap: wrap;
 }
 
 .modal > .button-row > button:not(:last-of-type) {

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 f6ddb74c4d813d9612ff5adf1c82997489d6134d..a034733da1933ba8beb4faed124b40092e70335b 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -1784,6 +1784,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 .modal .button-row {
        display: flex;
        justify-content: space-between;
+       flex-wrap: wrap;
 }
 
 .modal .button-row > button:not(:first-of-type) {

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 e39aaac4a2e0ebe4f79d1b7373f5e9b184d67d47..8ea871b498bc4eceb56295ac1562d192bcdec0ee 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -277,6 +277,7 @@ body.modal-overlay-active #modal_overlay {
 .modal .button-row {
        display: flex;
        justify-content: space-between;
+       flex-wrap: wrap;
 }
 
 .modal .button-row > :not(:last-child) {

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 5d3f09a97f0aa4a7f537afe87d77f748d8e48459..b447acc8ab37faf58ca76aab678e182ca7f372ad 100644 (file)
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -245,6 +245,7 @@ hr {
 .modal .button-row {
        display: flex;
        justify-content: space-between;
+       flex-wrap: wrap;
 }
 
 .modal .button-row > :not(:last-child) {