Fix display settings persistence and add responsive layout for plot buttons

- Fixed updateSectionVisibility() to use explicit .show()/.hide() instead of .toggle() to ensure proper element visibility on page reload
- Added responsive CSS for plot buttons to adjust to small screens and mobile devices
- Wrapped button text in spans to enable icon-only mode on very small screens (≤400px)
- Reduced button margins and added flexbox layout with wrapping for better mobile UX

src/systems/features/plotProgression.js

@@ -33,10 +33,9 @@ export function setupPlotButtons(handlePlotClick, handleEncounterClick) {
                 border-radius: 4px;
                 font-size: 13px;
                 cursor: pointer;
-                margin: 0 4px;
+                margin: 0 2px;
-                display: inline-block;
             " tabindex="0" role="button">
-                <i class="fa-solid fa-dice"></i> Randomized Plot
+                <i class="fa-solid fa-dice"></i> <span class="rpg-btn-text">Randomized Plot</span>
             </button>
             <button id="rpg-plot-natural" class="menu_button interactable" style="
                 background-color: #4a90e2;
@@ -46,10 +45,9 @@ export function setupPlotButtons(handlePlotClick, handleEncounterClick) {
                 border-radius: 4px;
                 font-size: 13px;
                 cursor: pointer;
-                margin: 0 4px;
+                margin: 0 2px;
-                display: inline-block;
             " tabindex="0" role="button">
-                <i class="fa-solid fa-forward"></i> Natural Plot
+                <i class="fa-solid fa-forward"></i> <span class="rpg-btn-text">Natural Plot</span>
             </button>
             <button id="rpg-encounter-button" class="menu_button interactable" style="
                 background-color: #cc3333;
@@ -59,10 +57,9 @@ export function setupPlotButtons(handlePlotClick, handleEncounterClick) {
                 border-radius: 4px;
                 font-size: 13px;
                 cursor: pointer;
-                margin: 0 4px;
+                margin: 0 2px;
-                display: inline-block;
             " tabindex="0" role="button" title="Enter combat encounter">
-                <i class="fa-solid fa-fire"></i> Enter Encounter
+                <i class="fa-solid fa-fire"></i> <span class="rpg-btn-text">Enter Encounter</span>
             </button>
         </span>
     `;

src/systems/ui/layout.js

@@ -232,35 +232,76 @@ export function updatePanelVisibility() {
  */
 export function updateSectionVisibility() {
     // Show/hide sections based on settings
-    $userStatsContainer.toggle(extensionSettings.showUserStats);
+    // Use explicit .show()/.hide() instead of .toggle() to ensure proper state on reload
-    $infoBoxContainer.toggle(extensionSettings.showInfoBox);
+    if (extensionSettings.showUserStats) {
-    $thoughtsContainer.toggle(extensionSettings.showCharacterThoughts);
+        $userStatsContainer.show();
-    if ($inventoryContainer) {
+    } else {
-        $inventoryContainer.toggle(extensionSettings.showInventory);
+        $userStatsContainer.hide();
     }
+
+    if (extensionSettings.showInfoBox) {
+        $infoBoxContainer.show();
+    } else {
+        $infoBoxContainer.hide();
+    }
+
+    if (extensionSettings.showCharacterThoughts) {
+        $thoughtsContainer.show();
+    } else {
+        $thoughtsContainer.hide();
+    }
+
+    if ($inventoryContainer) {
+        if (extensionSettings.showInventory) {
+            $inventoryContainer.show();
+        } else {
+            $inventoryContainer.hide();
+        }
+    }
+
     if ($questsContainer) {
-        $questsContainer.toggle(extensionSettings.showQuests);
+        if (extensionSettings.showQuests) {
+            $questsContainer.show();
+        } else {
+            $questsContainer.hide();
+        }
     }
 
     // Show/hide dividers intelligently
     // Divider after User Stats: shown if User Stats is visible AND at least one section after it is visible
     const showDividerAfterStats = extensionSettings.showUserStats &&
         (extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts || extensionSettings.showInventory || extensionSettings.showQuests);
-    $('#rpg-divider-stats').toggle(showDividerAfterStats);
+    if (showDividerAfterStats) {
+        $('#rpg-divider-stats').show();
+    } else {
+        $('#rpg-divider-stats').hide();
+    }
 
     // Divider after Info Box: shown if Info Box is visible AND at least one section after it is visible
     const showDividerAfterInfo = extensionSettings.showInfoBox &&
         (extensionSettings.showCharacterThoughts || extensionSettings.showInventory || extensionSettings.showQuests);
-    $('#rpg-divider-info').toggle(showDividerAfterInfo);
+    if (showDividerAfterInfo) {
+        $('#rpg-divider-info').show();
+    } else {
+        $('#rpg-divider-info').hide();
+    }
 
     // Divider after Thoughts: shown if Thoughts is visible AND at least one section after it is visible
     const showDividerAfterThoughts = extensionSettings.showCharacterThoughts &&
         (extensionSettings.showInventory || extensionSettings.showQuests);
-    $('#rpg-divider-thoughts').toggle(showDividerAfterThoughts);
+    if (showDividerAfterThoughts) {
+        $('#rpg-divider-thoughts').show();
+    } else {
+        $('#rpg-divider-thoughts').hide();
+    }
 
     // Divider after Inventory: shown if Inventory is visible AND Quests is visible
     const showDividerAfterInventory = extensionSettings.showInventory && extensionSettings.showQuests;
-    $('#rpg-divider-inventory').toggle(showDividerAfterInventory);
+    if (showDividerAfterInventory) {
+        $('#rpg-divider-inventory').show();
+    } else {
+        $('#rpg-divider-inventory').hide();
+    }
 }
 
 /**

style.css

@@ -8164,3 +8164,107 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 .rpg-encounter-status:hover {
     transform: scale(1.2);
 }
+
+/* ============================================
+   PLOT BUTTONS - RESPONSIVE LAYOUT
+   ============================================ */
+
+/* Base styles for plot buttons container */
+#rpg-plot-buttons {
+    display: flex !important;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 4px;
+    align-items: center;
+}
+
+/* Base button styles - ensure consistent sizing */
+#rpg-plot-random,
+#rpg-plot-natural,
+#rpg-encounter-button {
+    flex: 0 1 auto;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+/* Tablet and smaller screens - adjust button sizing */
+@media (max-width: 768px) {
+    #rpg-plot-buttons {
+        gap: 3px;
+    }
+
+    #rpg-plot-random,
+    #rpg-plot-natural,
+    #rpg-encounter-button {
+        padding: 6px 10px !important;
+        font-size: 12px !important;
+    }
+}
+
+/* Small mobile screens - more compact buttons */
+@media (max-width: 600px) {
+    #rpg-plot-buttons {
+        gap: 2px;
+    }
+
+    #rpg-plot-random,
+    #rpg-plot-natural,
+    #rpg-encounter-button {
+        padding: 5px 8px !important;
+        font-size: 11px !important;
+    }
+}
+
+/* Very small screens - stack buttons vertically or use icons only */
+@media (max-width: 480px) {
+    #rpg-plot-buttons {
+        gap: 4px;
+    }
+
+    /* Option 1: Stack vertically (uncomment if preferred)
+    #rpg-plot-buttons {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    #rpg-plot-random,
+    #rpg-plot-natural,
+    #rpg-encounter-button {
+        width: 100%;
+        padding: 8px !important;
+        font-size: 13px !important;
+    }
+    */
+
+    /* Option 2: Keep horizontal but more compact (default) */
+    #rpg-plot-random,
+    #rpg-plot-natural,
+    #rpg-encounter-button {
+        padding: 6px 8px !important;
+        font-size: 11px !important;
+    }
+}
+
+/* Extra small screens - icon-only mode */
+@media (max-width: 400px) {
+    #rpg-plot-random,
+    #rpg-plot-natural,
+    #rpg-encounter-button {
+        padding: 6px !important;
+    }
+
+    /* Hide button text, keep icons */
+    #rpg-plot-random .rpg-btn-text,
+    #rpg-plot-natural .rpg-btn-text,
+    #rpg-encounter-button .rpg-btn-text {
+        display: none;
+    }
+
+    /* Ensure icons are visible */
+    #rpg-plot-random i,
+    #rpg-plot-natural i,
+    #rpg-encounter-button i {
+        margin: 0 !important;
+        font-size: 14px;
+    }
+}