feat(dashboard): add quest widget + fix 4-tab header layout
Quest Widget Integration: - Created questsWidget.js with Main/Optional quest sub-tabs - Added dedicated Quests tab (4th tab after Inventory) - Registered quest widget in dashboardIntegration.js - Widget features: inline editing, add/remove quests, contenteditable - Fixed tab switching to use inline re-rendering (not full widget render) Header Layout Fixes (4+ Tabs): - Changed header flex-wrap from wrap to nowrap (prevents button wrapping) - Added icon-only mode for 4+ tabs (disables hover expansion) - Tab count detection in renderTabs() adds rpg-tabs-icon-only class - Prevents layout breaking when tabs expand on hover Technical Details: - Quest widget follows inventory widget pattern (sub-tabs, per-instance state) - Split event handlers: attachQuestHandlers (tabs) + attachQuestContentHandlers (buttons) - Tab switching updates innerHTML inline and re-attaches content handlers - Default size: 2w × 5h, category: 'scene' Benefits: - Quest tracking fully integrated with Dashboard v2 drag/drop - No header wrapping issues with 4 tabs - Cleaner icon-only UX when space is constrained - Horizontal scrolling handles overflow gracefully
This commit is contained in:
@@ -1062,7 +1062,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap; /* Prevent wrapping when tabs expand - rely on horizontal scroll */
|
||||
overflow: visible; /* Prevent clipping of dropdown menu */
|
||||
}
|
||||
|
||||
@@ -1170,6 +1170,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
/* Icon-only mode when 4+ tabs - prevents layout issues from hover expansion */
|
||||
.rpg-dashboard-tabs.rpg-tabs-icon-only .rpg-dashboard-tab:hover .rpg-tab-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Tab Navigation Arrows */
|
||||
.rpg-tab-nav-arrow {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user