From e342f4d1002a600b0e9e3508532422720cd4caf3 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Thu, 16 Oct 2025 11:33:59 +1100
Subject: [PATCH] fix: improve mobile UX for relationship badge and thought
 panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed two mobile UI issues:

1. Relationship badge sizing on mobile:
   - Badge was stretching vertically due to .rpg-editable mobile styles
   - Override padding, min-height, and line-height for badge on mobile
   - Keep badge at compact 18px × 18px to prevent covering avatar

2. Thought panel initial state:
   - Panel was showing by default instead of the icon
   - Fixed initialization: hide panel, show icon
   - Users now click the 💭 icon to open the dialogue as intended

Changes ensure proper mobile experience with appropriately sized UI
elements and correct initial visibility states.
---
 index.js  |  5 +++--
 style.css | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 8958ff0..e9f8ea5 100644
--- a/index.js
+++ b/index.js
@@ -3647,8 +3647,9 @@ function createThoughtPanel($message, thoughtsArray) {
         right: 'auto' // Clear any right positioning
     });
 
-    // Initially hide the icon
-    $thoughtIcon.hide();
+    // Initially hide the panel and show the icon
+    $thoughtPanel.hide();
+    $thoughtIcon.show();
 
     // console.log('[RPG Companion] Thought panel created at:', { top, left });
 
diff --git a/style.css b/style.css
index f553756..3f0498a 100644
--- a/style.css
+++ b/style.css
@@ -3403,6 +3403,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         /* Use transform to shift icon above and to the right of avatar */
         transform: translate(50px, -45px) !important;
     }
+
+    /* ========================================
+       MOBILE CHARACTER RELATIONSHIP BADGE
+       ======================================== */
+
+    /* Keep relationship badge small on mobile to prevent it from covering avatar */
+    .rpg-relationship-badge {
+        width: 18px !important;
+        height: 18px !important;
+        font-size: 10px !important;
+        padding: 0 !important;
+        min-height: unset !important;
+        line-height: 18px !important;
+    }
 }
 
 /* Extra small screens - adjust FAB position */