fix phone display with either/or detail/panel view

app/styles.css

@@ -591,13 +591,6 @@
     }
     .tarot-detail-heading {
       position: relative;
-      padding-right: 108px;
-    }
-    .tarot-detail-heading .detail-toggle-inline {
-      position: absolute;
-      top: 0;
-      right: 0;
-      margin-left: 0;
     }
     .tarot-detail-heading h2 {
       margin: 0;
@@ -1284,13 +1277,6 @@
     .planet-detail-heading {
       position: relative;
       z-index: 1;
-      padding-right: 108px;
-    }
-    .planet-detail-heading .detail-toggle-inline {
-      position: absolute;
-      top: 0;
-      right: 0;
-      margin-left: 0;
     }
     .planet-detail-heading h2 {
       margin: 0;
@@ -2170,32 +2156,21 @@
       display: none;
     }
 
-    .planet-layout.layout-sidebar-collapsed {
+    .planet-layout.layout-sidebar-collapsed,
-      grid-template-columns: 0 minmax(0, 1fr);
+    .planet-layout.layout-detail-collapsed,
-    }
+    .tarot-layout.layout-sidebar-collapsed,
-
-    .tarot-layout.layout-sidebar-collapsed {
-      grid-template-columns: 0 minmax(0, 1fr);
-    }
-
-    .kab-layout.layout-sidebar-collapsed {
-      grid-template-rows: 0 minmax(0, 1fr);
-    }
-
-    .planet-layout.layout-detail-collapsed {
-      grid-template-columns: minmax(0, 1fr) 0;
-    }
-
     .tarot-layout.layout-detail-collapsed {
-      grid-template-columns: minmax(0, 1fr) 0;
+      grid-template-columns: minmax(0, 1fr);
     }
 
+    .kab-layout.layout-sidebar-collapsed,
     .kab-layout.layout-detail-collapsed {
-      grid-template-rows: minmax(0, 1fr) 0;
+      grid-template-rows: minmax(0, 1fr);
     }
 
     .layout-sidebar-collapsed > .planet-list-panel,
     .layout-sidebar-collapsed > .tarot-list-panel {
+      display: none;
       width: 0;
       max-width: 0;
       min-width: 0;
@@ -2206,6 +2181,7 @@
     }
 
     .layout-sidebar-collapsed > .kab-tree-panel {
+      display: none;
       height: 0;
       max-height: 0;
       min-height: 0;
@@ -2218,6 +2194,7 @@
 
     .layout-detail-collapsed > .planet-detail-panel,
     .layout-detail-collapsed > .tarot-detail-panel {
+      display: none;
       width: 0;
       max-width: 0;
       min-width: 0;
@@ -2229,6 +2206,7 @@
     }
 
     .layout-detail-collapsed > .kab-detail-panel {
+      display: none;
       height: 0;
       max-height: 0;
       min-height: 0;
@@ -3342,7 +3320,6 @@
     .alpha-text-detail-heading {
       display: grid;
       gap: 14px;
-      padding-right: 108px;
     }
 
     .alpha-text-heading-main {
@@ -3413,13 +3390,6 @@
       box-sizing: border-box;
     }
 
-    .alpha-text-detail-heading .detail-toggle-inline {
-      position: absolute;
-      top: 0;
-      right: 0;
-      margin-left: 0;
-    }
-
     .alpha-text-control {
       display: grid;
       gap: 4px;
@@ -3519,13 +3489,6 @@
         grid-template-columns: 1fr;
       }
 
-      .planet-detail-heading .detail-toggle-inline,
-      .tarot-detail-heading .detail-toggle-inline,
-      .alpha-text-detail-heading .detail-toggle-inline {
-        position: static;
-        justify-self: start;
-      }
-
       .tarot-detail-top {
         grid-template-columns: minmax(0, 1fr);
       }
@@ -5405,6 +5368,13 @@
       .planet-layout,
       .tarot-layout {
         grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
+      }
+      .planet-layout.layout-sidebar-collapsed,
+      .planet-layout.layout-detail-collapsed,
+      .tarot-layout.layout-sidebar-collapsed,
+      .tarot-layout.layout-detail-collapsed {
+        grid-template-rows: minmax(0, 1fr);
       }
       .kab-layout {
         grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
@@ -5415,6 +5385,17 @@
         border-bottom: 1px solid #27272a;
         max-height: min(42svh, 420px);
       }
+      .layout-detail-collapsed > .planet-list-panel,
+      .layout-detail-collapsed > .tarot-list-panel,
+      .layout-detail-collapsed > .kab-tree-panel,
+      .layout-sidebar-collapsed > .planet-detail-panel,
+      .layout-sidebar-collapsed > .tarot-detail-panel,
+      .layout-sidebar-collapsed > .kab-detail-panel {
+        height: 100%;
+        max-height: none;
+        min-height: 0;
+        border-bottom: none;
+      }
       .planet-list-item,
       .tarot-list-item {
         min-height: 48px;

app/ui-chrome.js

@@ -1,10 +1,10 @@
 (function () {
   "use strict";
 
-  const SIDEBAR_COLLAPSE_STORAGE_PREFIX = "tarot-sidebar-collapsed:";
+  const SIDEBAR_COLLAPSE_STORAGE_PREFIX = "tarot-sidebar-collapsed:v2:";
-  const DETAIL_COLLAPSE_STORAGE_PREFIX = "tarot-detail-collapsed:";
+  const DETAIL_COLLAPSE_STORAGE_PREFIX = "tarot-detail-collapsed:v2:";
-  const DEFAULT_DATASET_ENTRY_COLLAPSED = true;
+  const DEFAULT_DATASET_ENTRY_COLLAPSED = false;
-  const DEFAULT_DATASET_DETAIL_COLLAPSED = false;
+  const DEFAULT_DATASET_DETAIL_COLLAPSED = true;
   const MOBILE_TOPBAR_MEDIA_QUERY = "(max-width: 900px)";
   const sidebarControllers = new WeakMap();
   const detailControllers = new WeakMap();
@@ -26,8 +26,6 @@
   const AUTO_COLLAPSE_IGNORE_SELECTOR = [
     ".sidebar-toggle-inline",
     ".sidebar-popout-open",
-    ".detail-toggle-inline",
-    ".detail-popout-open",
     "input",
     "select",
     "textarea",
@@ -120,6 +118,17 @@
     return detailChanged || sidebarChanged;
   }
 
+  function showSidebarOnly(target, persist = true) {
+    const layout = resolveLayoutTarget(target);
+    if (!layout) {
+      return false;
+    }
+
+    const detailChanged = setDetailCollapsed(layout, true, persist);
+    const sidebarChanged = setSidebarCollapsed(layout, false, persist);
+    return detailChanged || sidebarChanged;
+  }
+
   function shouldAutoCollapseFromEvent(panel, target) {
     if (!(panel instanceof HTMLElement) || !(target instanceof Element) || !panel.contains(target)) {
       return false;
@@ -252,11 +261,11 @@
       });
 
       collapseBtn.addEventListener("click", () => {
-        applyCollapsedState(true);
+        showDetailOnly(layout);
       });
 
       openBtn.addEventListener("click", () => {
-        applyCollapsedState(false);
+        showSidebarOnly(layout);
       });
 
       const storedCollapsed = loadSidebarCollapsedState(storageKey);
@@ -281,11 +290,6 @@
         return;
       }
 
-      const heading = detailPanel.querySelector(".planet-detail-heading, .tarot-detail-heading");
-      if (!(heading instanceof HTMLElement)) {
-        return;
-      }
-
       detailPanel.dataset.detailPopoutReady = "1";
 
       const sectionId = layout.closest("section")?.id || `layout-${index + 1}`;
@@ -295,42 +299,19 @@
       const detailStorageKey = `${DETAIL_COLLAPSE_STORAGE_PREFIX}${sectionId}`;
       const sidebarStorageKey = `${SIDEBAR_COLLAPSE_STORAGE_PREFIX}${sectionId}`;
 
-      const collapseBtn = document.createElement("button");
-      collapseBtn.type = "button";
-      collapseBtn.className = "detail-toggle-inline";
-      collapseBtn.textContent = "Hide Detail";
-      collapseBtn.setAttribute("aria-label", "Hide detail panel");
-      collapseBtn.setAttribute("aria-controls", panelId);
-      heading.appendChild(collapseBtn);
-
-      const openBtn = document.createElement("button");
-      openBtn.type = "button";
-      openBtn.className = "detail-popout-open";
-      openBtn.textContent = "Show Detail";
-      openBtn.setAttribute("aria-label", "Show detail panel");
-      openBtn.setAttribute("aria-controls", panelId);
-      openBtn.hidden = true;
-      layout.appendChild(openBtn);
-
       const applyCollapsedState = (collapsed, persist = true) => {
         if (collapsed && layout.classList.contains("layout-sidebar-collapsed")) {
+          const sidebarController = sidebarControllers.get(layout);
+          if (sidebarController) {
+            sidebarController.applyCollapsedState(false, persist);
+          } else {
             layout.classList.remove("layout-sidebar-collapsed");
-          const sidebarOpenBtn = layout.querySelector(".sidebar-popout-open");
-          if (sidebarOpenBtn instanceof HTMLButtonElement) {
-            sidebarOpenBtn.hidden = true;
-            sidebarOpenBtn.setAttribute("aria-expanded", "true");
-          }
-          const sidebarCollapseBtn = layout.querySelector(".sidebar-toggle-inline");
-          if (sidebarCollapseBtn instanceof HTMLButtonElement) {
-            sidebarCollapseBtn.setAttribute("aria-expanded", "true");
-          }
             saveSidebarCollapsedState(sidebarStorageKey, false);
           }
+        }
 
         layout.classList.toggle("layout-detail-collapsed", collapsed);
-        collapseBtn.setAttribute("aria-expanded", collapsed ? "false" : "true");
+        detailPanel.setAttribute("aria-hidden", collapsed ? "true" : "false");
-        openBtn.setAttribute("aria-expanded", collapsed ? "false" : "true");
-        openBtn.hidden = !collapsed;
 
         if (persist) {
           saveSidebarCollapsedState(detailStorageKey, collapsed);
@@ -340,24 +321,11 @@
       detailControllers.set(layout, {
         applyCollapsedState,
         detailPanel,
-        collapseBtn,
-        openBtn,
         detailStorageKey
       });
 
-      collapseBtn.addEventListener("click", () => {
-        applyCollapsedState(true);
-      });
-
-      openBtn.addEventListener("click", () => {
-        applyCollapsedState(false);
-      });
-
       const storedCollapsed = loadSidebarCollapsedState(detailStorageKey);
-      const shouldForceOpenForTarot = sectionId === "tarot-section";
+      const initialCollapsed = storedCollapsed == null ? DEFAULT_DATASET_DETAIL_COLLAPSED : storedCollapsed;
-      const initialCollapsed = shouldForceOpenForTarot
-        ? false
-        : (storedCollapsed == null ? DEFAULT_DATASET_DETAIL_COLLAPSED : storedCollapsed);
       applyCollapsedState(initialCollapsed, false);
     });
   }
@@ -565,6 +533,7 @@
     setSidebarCollapsed,
     setDetailCollapsed,
     showDetailOnly,
+    showSidebarOnly,
     setTopbarMenuOpen,
     setTopbarDropdownOpen,
     closeTopbarDropdowns,

index.html

@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-400.css">
   <link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-700.css">
   <link rel="stylesheet" href="node_modules/@fontsource/noto-naskh-arabic/arabic-400.css">
-  <link rel="stylesheet" href="app/styles.css?v=20260312-mobile-nav-01">
+  <link rel="stylesheet" href="app/styles.css?v=20260312-panel-toggle-03">
 </head>
 <body>
   <div class="topbar">
@@ -1014,7 +1014,7 @@
   <script src="app/ui-numbers.js"></script>
   <script src="app/ui-tarot-spread.js"></script>
   <script src="app/ui-settings.js?v=20260309-gate"></script>
-  <script src="app/ui-chrome.js?v=20260312-mobile-nav-01"></script>
+  <script src="app/ui-chrome.js?v=20260312-panel-toggle-02"></script>
   <script src="app/ui-navigation.js?v=20260309-alphabet-text-01"></script>
   <script src="app/ui-calendar-formatting.js?v=20260307b"></script>
   <script src="app/ui-calendar-visuals.js?v=20260307b"></script>