From 26acee3a70642c3050f8c10d4d500f015e90a485 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Fri, 17 Oct 2025 16:59:45 +1100
Subject: [PATCH] fix(mobile): prevent Info tab from rendering over other tabs

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.
---
 style.css | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/style.css b/style.css
index 73a71e7..7b9baa2 100644
--- a/style.css
+++ b/style.css
@@ -3449,18 +3449,18 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         to { opacity: 1; transform: translateY(0); }
     }
 
-    /* Combined Info & Characters wrapper */
-    .rpg-mobile-combined-content {
-        display: flex;
+    /* Info tab contains Info Box and Characters with 50/50 split */
+    .rpg-mobile-tab-content[data-tab-content="info"].active {
         flex-direction: column;
         gap: 0;
         height: 100%;
         min-height: 0;
     }
 
-    /* Info Box takes fixed 50% of vertical space */
-    .rpg-mobile-combined-content > #rpg-info-box {
-        flex: 0 0 50%;
+    /* Info Box takes 50% of vertical space */
+    .rpg-mobile-tab-content[data-tab-content="info"] > #rpg-info-box,
+    .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-info-section {
+        flex: 1 1 50% !important;
         min-height: 0;
         overflow-y: auto;
         padding-bottom: 16px;
@@ -3469,16 +3469,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         gap: 0.5em;
     }
 
-    /* Characters section takes remaining 50% */
-    .rpg-mobile-combined-content > #rpg-thoughts {
-        flex: 1;
+    /* Characters section takes 50% of vertical space */
+    .rpg-mobile-tab-content[data-tab-content="info"] > #rpg-thoughts,
+    .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-thoughts-section {
+        flex: 1 1 50% !important;
         min-height: 0;
         overflow-y: auto;
         padding-bottom: 16px;
     }
 
     /* 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);
         margin-bottom: 16px;
     }
@@ -3495,6 +3496,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     /* Rows scale proportionally to fill Info Box */
     .rpg-dashboard-row-1 {
         flex: 1.2 !important;  /* Slightly more space for 4 widgets */
+        height: auto !important;  /* Remove desktop height constraint */
         display: flex !important;
         gap: 0.25em;
     }