From 046a121087029b3d74fc645915e946bbe76238b6 Mon Sep 17 00:00:00 2001
From: Florian Eckert <fe@dev.tdt.de>
Date: Thu, 6 Mar 2025 10:32:18 +0100
Subject: [PATCH] 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 <fe@dev.tdt.de>
---
 .../htdocs/luci-static/bootstrap/cascade.css                     | 1 +
 .../luci-theme-material/htdocs/luci-static/material/cascade.css  | 1 +
 .../htdocs/luci-static/openwrt2020/cascade.css                   | 1 +
 .../htdocs/luci-static/openwrt.org/cascade.css                   | 1 +
 4 files changed, 4 insertions(+)

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 41bea95877..cad9b389b6 100644
--- 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 f6ddb74c4d..a034733da1 100644
--- 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 e39aaac4a2..8ea871b498 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
@@ -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 5d3f09a97f..b447acc8ab 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
@@ -245,6 +245,7 @@ hr {
 .modal .button-row {
 	display: flex;
 	justify-content: space-between;
+	flex-wrap: wrap;
 }
 
 .modal .button-row > :not(:last-child) {