From 13b1acb151dbb450b00201e032686fc8f0a2017d Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 5 Nov 2025 10:16:21 +1100
Subject: [PATCH] fix: center icons in compact buttons with fixed dimensions
 and flexbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Properly centered icons by wrapping text in spans and forcing exact button
dimensions to override base min-width: fit-content style.

Root Cause:
- Base .rpg-inventory-add-btn has min-width: fit-content
- Even with span hidden, button width wasn't constrained
- Icon appeared off-center with extra space to the right

Solution:

1. HTML Structure (inventoryWidget.js, questsWidget.js):
   - Wrapped text in <span class="rpg-btn-label">
   - Pattern: <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Item</span>
   - Applied to: Add Item, Add Location, Add Asset, Add Quest buttons

2. CSS (style.css):
   - Hide labels: .rpg-inventory-compact .rpg-btn-label { display: none; }
   - Force square dimensions: width: 32px !important (overrides fit-content)
   - Center icon: display: inline-flex; justify-content: center; align-items: center
   - Remove padding: padding: 0 (icon uses full 32px space)

Result: Perfect 32×32px square buttons with centered icons in compact mode,
matching the pattern used for sub-tab buttons throughout the codebase.

Fixes: Icon skewed left in Add Item/Quest buttons at narrow widths
---
 .../dashboard/widgets/inventoryWidget.js      |  6 ++--
 src/systems/dashboard/widgets/questsWidget.js |  4 +--
 style.css                                     | 36 +++++++++++--------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/systems/dashboard/widgets/inventoryWidget.js b/src/systems/dashboard/widgets/inventoryWidget.js
index 8ad7cc8..d913994 100644
--- a/src/systems/dashboard/widgets/inventoryWidget.js
+++ b/src/systems/dashboard/widgets/inventoryWidget.js
@@ -199,7 +199,7 @@ export function registerInventoryWidget(registry, dependencies) {
                     <div class="rpg-inventory-header-actions">
                         ${renderViewToggle('onPerson', viewMode)}
                         <button class="rpg-inventory-add-btn" data-action="add-item" data-field="onPerson">
-                            <i class="fa-solid fa-plus"></i> Add Item
+                            <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Item</span>
                         </button>
                     </div>
                 </div>
@@ -302,7 +302,7 @@ export function registerInventoryWidget(registry, dependencies) {
                     <div class="rpg-inventory-header-actions">
                         ${renderViewToggle('stored', viewMode)}
                         <button class="rpg-inventory-add-btn" data-action="add-location">
-                            <i class="fa-solid fa-plus"></i> Add Location
+                            <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Location</span>
                         </button>
                     </div>
                 </div>
@@ -340,7 +340,7 @@ export function registerInventoryWidget(registry, dependencies) {
                     <div class="rpg-inventory-header-actions">
                         ${renderViewToggle('assets', viewMode)}
                         <button class="rpg-inventory-add-btn" data-action="add-item" data-field="assets">
-                            <i class="fa-solid fa-plus"></i> Add Asset
+                            <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Asset</span>
                         </button>
                     </div>
                 </div>
diff --git a/src/systems/dashboard/widgets/questsWidget.js b/src/systems/dashboard/widgets/questsWidget.js
index 28f7487..5bd8c1f 100644
--- a/src/systems/dashboard/widgets/questsWidget.js
+++ b/src/systems/dashboard/widgets/questsWidget.js
@@ -53,7 +53,7 @@ function renderMainQuestView(mainQuest) {
             <div class="rpg-quest-header">
                 <h3 class="rpg-quest-section-title">Main Quest</h3>
                 ${!hasQuest ? `<button class="rpg-add-quest-btn" data-action="add-quest" data-field="main" title="Add main quest">
-                    <i class="fa-solid fa-plus"></i> Add Quest
+                    <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Quest</span>
                 </button>` : ''}
             </div>
             <div class="rpg-quest-content">
@@ -130,7 +130,7 @@ function renderOptionalQuestsView(optionalQuests) {
             <div class="rpg-quest-header">
                 <h3 class="rpg-quest-section-title">Optional Quests</h3>
                 <button class="rpg-add-quest-btn" data-action="add-quest" data-field="optional" title="Add optional quest">
-                    <i class="fa-solid fa-plus"></i> Add Quest
+                    <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Quest</span>
                 </button>
             </div>
             <div class="rpg-quest-content">
diff --git a/style.css b/style.css
index 27c349f..147f2f9 100644
--- a/style.css
+++ b/style.css
@@ -7698,15 +7698,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     gap: 0.5rem; /* Reduced from 0.75rem */
 }
 
-.rpg-inventory-compact .rpg-inventory-add-btn {
-    font-size: 0; /* Hide text, show icon only */
-    padding: 0.4rem;
-    min-width: 32px;
-    min-height: 32px;
+.rpg-inventory-compact .rpg-btn-label {
+    display: none;
 }
 
-.rpg-inventory-compact .rpg-inventory-add-btn i {
-    font-size: 1rem; /* Restore icon size */
+.rpg-inventory-compact .rpg-inventory-add-btn {
+    padding: 0;
+    width: 32px !important; /* Override min-width: fit-content */
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .rpg-inventory-compact .rpg-view-toggle-btn {
@@ -7999,15 +8003,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     gap: 0.5rem; /* Reduced from default */
 }
 
-.rpg-quests-compact .rpg-add-quest-btn {
-    font-size: 0; /* Hide text, show icon only */
-    padding: 0.4rem;
-    min-width: 32px;
-    min-height: 32px;
+.rpg-quests-compact .rpg-btn-label {
+    display: none;
 }
 
-.rpg-quests-compact .rpg-add-quest-btn i {
-    font-size: 1rem; /* Restore icon size */
+.rpg-quests-compact .rpg-add-quest-btn {
+    padding: 0;
+    width: 32px !important; /* Override base button min-width */
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .rpg-quests-compact .rpg-quest-item {