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

fix(mobile): prevent Info tab from rendering over other tabs

Browse Source 
Changed selector from .rpg-mobile-tab-content[data-tab-content="info"]
to include .active class, preventing the info tab from always being
visible regardless of which tab is selected.

The display: flex !important was overriding the base tab switching
logic (.rpg-mobile-tab-content { display: none; }), causing the info
tab to render on top of all other tabs.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-17 16:59:45 +11:00
parent b3ca2960d8
commit 26acee3a70
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+12 -10
View File
@@ -3449,18 +3449,18 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
/* Combined Info & Characters wrapper */ /* Info tab contains Info Box and Characters with 50/50 split */
.rpg-mobile-combined-content { .rpg-mobile-tab-content[data-tab-content="info"].active {
display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
/* Info Box takes fixed 50% of vertical space */ /* Info Box takes 50% of vertical space */
.rpg-mobile-combined-content > #rpg-info-box { .rpg-mobile-tab-content[data-tab-content="info"] > #rpg-info-box,
flex: 0 0 50%; .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-info-section {
flex: 1 1 50% !important;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding-bottom: 16px; padding-bottom: 16px;
@@ -3469,16 +3469,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
gap: 0.5em; gap: 0.5em;
} }
/* Characters section takes remaining 50% */ /* Characters section takes 50% of vertical space */
.rpg-mobile-combined-content > #rpg-thoughts { .rpg-mobile-tab-content[data-tab-content="info"] > #rpg-thoughts,
flex: 1; .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-thoughts-section {
flex: 1 1 50% !important;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding-bottom: 16px; padding-bottom: 16px;
} }
/* Add divider between Info and Characters */ /* Add divider between Info and Characters */
.rpg-mobile-combined-content > .rpg-section:not(:last-child) { .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-section:not(:last-child) {
border-bottom: 1px solid var(--SmartThemeBorderColor); border-bottom: 1px solid var(--SmartThemeBorderColor);
margin-bottom: 16px; margin-bottom: 16px;
} }
@@ -3495,6 +3496,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Rows scale proportionally to fill Info Box */ /* Rows scale proportionally to fill Info Box */
.rpg-dashboard-row-1 { .rpg-dashboard-row-1 {
flex: 1.2 !important; /* Slightly more space for 4 widgets */ flex: 1.2 !important; /* Slightly more space for 4 widgets */
height: auto !important; /* Remove desktop height constraint */
display: flex !important; display: flex !important;
gap: 0.25em; gap: 0.25em;
} }