fix: center icons in compact buttons with fixed dimensions and flexbox

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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-05 10:16:21 +11:00
parent 55f4e0aee6
commit 13b1acb151
3 changed files with 27 additions and 19 deletions
+22 -14
View File
@@ -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 {