From 498c6134666c8f5c41a82652f68c37bcd0dec63b Mon Sep 17 00:00:00 2001
From: CyberMind-FR <gandalf@Gk2.net>
Date: Thu, 12 Feb 2026 06:29:00 +0100
Subject: [PATCH] fix(haproxy): Improve responsive design for mobile devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Emergency banner stacks vertically on mobile
- Quick actions use CSS grid (3-col → 2-col)
- Tables get horizontal scroll on narrow screens
- Health grid adapts to 3-col → 2-col on mobile
- Stats grid compact layout on small screens
- Reduced padding and font sizes for mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../resources/haproxy/dashboard.css           | 120 +++++++++++++++++-
 1 file changed, 118 insertions(+), 2 deletions(-)

diff --git a/package/secubox/luci-app-haproxy/htdocs/luci-static/resources/haproxy/dashboard.css b/package/secubox/luci-app-haproxy/htdocs/luci-static/resources/haproxy/dashboard.css
index ab0e9645..d46cdba1 100644
--- a/package/secubox/luci-app-haproxy/htdocs/luci-static/resources/haproxy/dashboard.css
+++ b/package/secubox/luci-app-haproxy/htdocs/luci-static/resources/haproxy/dashboard.css
@@ -1059,16 +1059,53 @@ code,
 	.hp-row {
 		flex-direction: column;
 	}
+
+	.hp-row > * {
+		flex: none !important;
+	}
+
+	.hp-emergency-banner {
+		flex-direction: column !important;
+		text-align: center;
+		gap: 16px !important;
+	}
+
+	.hp-emergency-banner > div:first-child {
+		flex-direction: column !important;
+	}
+
+	.hp-emergency-banner > div:last-child {
+		width: 100%;
+		justify-content: center !important;
+	}
 }
 
 @media (max-width: 768px) {
 	.hp-page-header {
 		flex-direction: column;
 		align-items: flex-start;
+		padding: 16px;
+	}
+
+	.hp-page-title {
+		font-size: 20px;
 	}
 
 	.hp-stats-grid {
 		grid-template-columns: repeat(2, 1fr);
+		gap: 12px;
+	}
+
+	.hp-stat-card {
+		padding: 16px;
+	}
+
+	.hp-stat-icon {
+		font-size: 24px;
+	}
+
+	.hp-stat-value {
+		font-size: 28px;
 	}
 
 	.hp-backends-grid {
@@ -1077,25 +1114,104 @@ code,
 
 	.hp-quick-actions {
 		justify-content: center;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 8px;
 	}
 
 	.hp-action-btn {
 		flex: 1;
 		min-width: auto;
+		padding: 12px 8px;
+	}
+
+	.hp-action-icon {
+		font-size: 22px;
+	}
+
+	.hp-action-label {
+		font-size: 11px;
+	}
+
+	.hp-table {
+		display: block;
+		overflow-x: auto;
+		white-space: nowrap;
+	}
+
+	.hp-health-grid {
+		grid-template-columns: repeat(3, 1fr);
+		gap: 8px;
+	}
+
+	.hp-health-item {
+		padding: 12px 8px;
+	}
+
+	.hp-health-icon {
+		font-size: 20px;
+	}
+
+	.hp-health-label {
+		font-size: 12px;
+	}
+
+	.hp-card-header {
+		padding: 12px 16px;
+	}
+
+	.hp-card-body {
+		padding: 16px;
 	}
 }
 
 @media (max-width: 480px) {
 	.hp-stats-grid {
-		grid-template-columns: 1fr;
+		grid-template-columns: 1fr 1fr;
+		gap: 8px;
+	}
+
+	.hp-stat-card {
+		padding: 12px;
 	}
 
 	.hp-stat-value {
-		font-size: 28px;
+		font-size: 24px;
+	}
+
+	.hp-stat-label {
+		font-size: 11px;
 	}
 
 	.hp-btn {
 		width: 100%;
 		justify-content: center;
 	}
+
+	.hp-quick-actions {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.hp-health-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.hp-connection-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.hp-header-badges {
+		width: 100%;
+	}
+
+	.hp-header-badge {
+		flex: 1;
+		justify-content: center;
+	}
+
+	.hp-emergency-banner > div:nth-child(2) {
+		display: grid !important;
+		grid-template-columns: repeat(3, 1fr) !important;
+		width: 100%;
+	}
 }