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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user