diff --git a/README.md b/README.md index dc7d13a..9f0c749 100644 --- a/README.md +++ b/README.md @@ -7,13 +7,9 @@ An immersive RPG extension for browsers that tracks character stats, scene infor ## 🆕 What's New -### v3.1.0 +### v3.1.1 -- Added toastr notification when the model returns an incorrect tracker format that cannot be parsed. -- Added guidance in settings about which models work best with the extension (I'm tired of people asking me why this doesn't work with their Q4 MythoMax 13B). -- Fixed auto-update after messages to work with External API generation mode. -- Fixed mobile UI. -- Fixed a minor bug with the thought bubble icon appearing in the wrong place on mobiles. +- Mobile UI fixes. ### v3.0.1 diff --git a/index.js b/index.js index 01b2ec9..7cd0a81 100644 --- a/index.js +++ b/index.js @@ -874,9 +874,11 @@ async function initUI() { // Setup mobile toggle button setupMobileToggle(); - // Setup desktop tabs (only on desktop viewport) + // Setup tabs based on viewport if (window.innerWidth > 1000) { setupDesktopTabs(); + } else { + setupMobileTabs(); } // Setup collapse/expand toggle button diff --git a/settings.html b/settings.html index c2c7993..ae85ae7 100644 --- a/settings.html +++ b/settings.html @@ -48,7 +48,7 @@
- v3.1.0 + v3.1.1
diff --git a/style.css b/style.css index 5513d28..3e8f703 100644 --- a/style.css +++ b/style.css @@ -1616,43 +1616,22 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-location-text { + font-size: clamp(0.625rem, 0.6vw, 0.75rem); font-weight: bold; color: var(--rpg-text); text-align: center; line-height: 1.2; - padding: 0.25em 0.5em; + padding: 0; margin: 0; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; flex: 1 1 auto; min-height: 0; - max-height: 4em; - width: 100%; - display: block; - overflow-y: auto; - overflow-x: hidden; - /* Dynamic text scaling based on content length */ - font-size: clamp(0.45rem, calc(0.75rem - 0.005rem * var(--char-count, 0)), 0.75rem); -} - -/* Custom scrollbar for location text */ -.rpg-location-text::-webkit-scrollbar { - width: 4px; -} - -.rpg-location-text::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.2); - border-radius: 2px; -} - -.rpg-location-text::-webkit-scrollbar-thumb { - background: var(--rpg-border); - border-radius: 2px; -} - -.rpg-location-text::-webkit-scrollbar-thumb:hover { - background: var(--rpg-highlight); + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } /* Row 3: Recent Events */ @@ -5143,13 +5122,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld { left: auto !important; /* Mobile panel sizing */ - width: 85vw !important; width: 85dvw !important; max-width: 400px !important; - height: calc(100vh - var(--topBarBlockSize)) !important; height: calc(100dvh - var(--topBarBlockSize)) !important; - max-height: calc(100vh - var(--topBarBlockSize)) !important; - max-height: calc(100dvh - var(--topBarBlockSize)) !important; /* Hidden by default - completely removed from layout */ display: none !important; @@ -5168,18 +5143,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Allow collapse button to show outside panel */ .rpg-game-container { overflow: visible !important; - height: 100% !important; - max-height: 100% !important; - box-sizing: border-box !important; - padding: 0.75em !important; } /* But keep content scrollable */ #rpg-panel-content { overflow-y: auto !important; overflow-x: hidden !important; - max-height: 100% !important; - height: 100% !important; } /* Show panel when opened with slide-in animation */ @@ -5348,12 +5317,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld { display: flex; flex-direction: column; height: 100%; - max-height: 100%; min-height: 0; margin: -12px -12px 16px -12px; overflow-x: auto; overflow-y: hidden; - box-sizing: border-box; } /* Tab container at top of panel */ @@ -5534,11 +5501,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-location-text { - /* Dynamic text scaling based on content length - mobile override */ - font-size: clamp(0.45rem, calc(0.875rem - 0.005rem * var(--char-count, 0)), 0.875rem) !important; - max-height: 4.5em !important; - overflow-y: auto !important; - overflow-x: hidden !important; + font-size: min(2.8vw, 0.875rem) !important; } .rpg-map-marker {