From 2a34b404118a4adf8e7aaf342d0f1256aa87e3ba Mon Sep 17 00:00:00 2001
From: NW <nw@softuniq.eu>
Date: Mon, 6 Jul 2026 19:00:25 +0100
Subject: [PATCH] fix(admin): button icon visibility and text wrapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add CSS for svg.sa-icon fill on all button variants
- white-space: nowrap + inline-flex + gap for icon buttons
- Quick Actions: d-grid → d-flex flex-wrap for horizontal layout
- btn-secondary → btn-dark for Settings button (icon visibility)
---
 src/admin/views/dashboard.ejs |  4 ++--
 src/admin/views/layout.ejs    | 36 +++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/admin/views/dashboard.ejs b/src/admin/views/dashboard.ejs
index 6e57cd0..cfbf204 100644
--- a/src/admin/views/dashboard.ejs
+++ b/src/admin/views/dashboard.ejs
@@ -163,11 +163,11 @@
             </div>
             <div class="panel-container show">
                 <div class="panel-content">
-                    <div class="d-grid gap-2">
+                    <div class="d-flex flex-wrap gap-2">
                         <a href="/products" class="btn btn-primary"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#plus"></use></svg> Add Product</a>
                         <a href="/users" class="btn btn-success"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#user-plus"></use></svg> Add User</a>
                         <a href="/catalog" class="btn btn-info text-white"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#list"></use></svg> View Catalog</a>
-                        <a href="/settings" class="btn btn-secondary"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#settings"></use></svg> Settings</a>
+                        <a href="/settings" class="btn btn-dark"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#settings"></use></svg> Settings</a>
                     </div>
                 </div>
             </div>
diff --git a/src/admin/views/layout.ejs b/src/admin/views/layout.ejs
index 15141c7..dbe1ff5 100644
--- a/src/admin/views/layout.ejs
+++ b/src/admin/views/layout.ejs
@@ -39,6 +39,42 @@
         .main-content td form + form {
             margin-left: 0.5rem;
         }
+        /* Button icon visibility */
+        .btn svg.sa-icon {
+            fill: currentColor;
+            flex-shrink: 0;
+        }
+        /* Ensure icons are visible on all button variants */
+        .btn-primary svg.sa-icon,
+        .btn-success svg.sa-icon,
+        .btn-info svg.sa-icon,
+        .btn-danger svg.sa-icon,
+        .btn-warning svg.sa-icon,
+        .btn-dark svg.sa-icon {
+            fill: #fff;
+        }
+        /* Icon on light buttons */
+        .btn-outline-primary svg.sa-icon,
+        .btn-outline-secondary svg.sa-icon,
+        .btn-outline-success svg.sa-icon,
+        .btn-outline-info svg.sa-icon,
+        .btn-outline-warning svg.sa-icon,
+        .btn-outline-danger svg.sa-icon,
+        .btn-secondary svg.sa-icon,
+        .btn-light svg.sa-icon {
+            fill: currentColor;
+        }
+        /* Prevent text wrapping in icon buttons */
+        .btn {
+            white-space: nowrap;
+        }
+        /* Better alignment for icon+text buttons */
+        a.btn, button.btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.4rem;
+        }
     </style>
 </head>