Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/widgets/inventoryWidget.js
+3 -3
View File
@@ -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>
src/systems/dashboard/widgets/questsWidget.js
+2 -2
View File
@@ -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">