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 {