Reclaim Bible desk chrome space

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Moved the main menu from the fixed left rail into a compact top-left hamburger popover and reclaimed the unused right-side reader padding.
 - Completed Phase 9 Bible desk layout by replacing the 50/50 reader/resource split with a resizable Bible page, verse-focused margin, and tabbed study stack.
 - Added verse-anchored margin notes with markers, translation/context anchors, visible verse markers, and export metadata in JSON, Markdown, HTML, and CSV.
 - Changed the HotView HMR host from loopback-only `127.0.0.1` to the detected Tailscale IPv4 address, with a `VITE_HMR_HOST` override for other private intranet addresses.

src/App.css

@@ -1,6 +1,6 @@
 .app-shell {
   display: grid;
-  grid-template-columns: 58px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   min-height: 100vh;
   overflow: hidden;
   background: #ece9df;
@@ -85,34 +85,7 @@
 }
 
 .app-shell.menu-open .reader {
-  filter: blur(1.5px) brightness(0.62) saturate(0.72);
-}
-
-.app-shell.notes-pinned .reader {
-  padding-right: min(500px, 30vw);
-}
-
-.tool-rail {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: center;
-  position: relative;
-  z-index: 20;
-  width: 58px;
-  padding: 18px 10px;
-  background: #1f231f;
-  border-right: 1px solid #d1cab9;
-  box-sizing: border-box;
-  transition: width 160ms ease, box-shadow 160ms ease;
-  overflow: hidden;
-}
-
-.tool-rail:hover,
-.tool-rail:focus-within {
-  width: 270px;
-  align-items: stretch;
-  box-shadow: 18px 0 40px rgba(17, 20, 17, 0.26);
+  filter: brightness(0.94);
 }
 
 .brand-mark {
@@ -128,115 +101,13 @@
   font-size: 15px;
 }
 
-.tool-rail button {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-  border-color: #3c4239;
-  background: #2c302a;
-  color: #f6f3eb;
-  white-space: nowrap;
-}
-
-.tool-rail:hover button,
-.tool-rail:focus-within button {
-  width: 100%;
-  padding: 0 10px;
-}
-
-.menu-button {
-  flex: 0 0 auto;
-  justify-content: center;
-  align-self: center;
-}
-
-.menu-button span {
-  display: block;
-  width: 16px;
-  height: 2px;
-  border-radius: 999px;
-  background: currentColor;
-}
-
-.menu-button {
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tool-rail:hover .menu-button,
-.tool-rail:focus-within .menu-button {
-  width: 42px;
-  padding: 0;
-}
-
-.app-identity {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  min-height: 42px;
-}
-
-.rail-icon {
-  display: grid;
-  flex: 0 0 18px;
-  place-items: center;
-  font-weight: 800;
-}
-
-.rail-copy {
-  display: none;
-  min-width: 0;
-  text-align: left;
-}
-
-.tool-rail:hover .rail-copy,
-.tool-rail:focus-within .rail-copy {
-  display: grid;
-}
-
-.rail-copy strong,
-.rail-copy small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.rail-copy small {
-  color: #b9c0b4;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.rail-bottom {
-  margin-top: auto;
-}
-
-.rail-description {
-  display: none;
-  margin: 0;
-  padding: 12px;
-  border: 1px solid #3c4239;
-  border-radius: 6px;
-  background: #252b25;
-  color: #d9ddd4;
-  font-size: 13px;
-  line-height: 1.45;
-}
-
-.tool-rail:hover .rail-description,
-.tool-rail:focus-within .rail-description {
-  display: block;
-}
-
 .reader {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 10px;
   min-width: 0;
   height: 100vh;
-  padding: 10px 48px 12px 12px;
+  padding: 10px 10px 12px;
   box-sizing: border-box;
   transition: filter 160ms ease;
 }
@@ -352,12 +223,96 @@ textarea:focus-visible {
 
 .page-controls {
   display: grid;
-  grid-template-columns: minmax(62px, 0.8fr) minmax(92px, 1.25fr) minmax(54px, 0.55fr) minmax(50px, 0.5fr) minmax(80px, 0.82fr);
+  grid-template-columns: 34px minmax(62px, 0.8fr) minmax(92px, 1.25fr) minmax(54px, 0.55fr) minmax(50px, 0.5fr) minmax(80px, 0.82fr);
   gap: 5px;
   align-items: end;
   max-width: none;
 }
 
+.top-menu-button {
+  display: grid;
+  align-self: end;
+  justify-self: stretch;
+  place-items: center;
+  gap: 3px;
+  width: 34px;
+  height: 31px;
+  padding: 0;
+  border-color: #d8cfbf;
+  background: #fbf8ef;
+  color: #252821;
+}
+
+.top-menu-button span {
+  display: block;
+  width: 16px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.menu-popover-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 35;
+  background: rgba(24, 26, 22, 0.18);
+}
+
+.menu-popover {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: grid;
+  gap: 8px;
+  width: min(300px, calc(100vw - 20px));
+  padding: 12px;
+  border: 1px solid #d4cdbd;
+  border-radius: 8px;
+  background: #fffef8;
+  box-shadow: 0 20px 50px rgba(17, 20, 17, 0.24);
+  box-sizing: border-box;
+}
+
+.menu-popover header,
+.menu-popover button {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.menu-popover header {
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e0d6;
+}
+
+.menu-popover header div,
+.menu-popover button {
+  min-width: 0;
+}
+
+.menu-popover strong,
+.menu-popover small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu-popover small {
+  color: #657061;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.menu-popover button {
+  justify-content: flex-start;
+  width: 100%;
+  padding: 10px;
+  border-color: #ded6c7;
+  background: #fbf8ef;
+  color: #202124;
+  text-align: left;
+}
+
 .page-controls label {
   display: grid;
   gap: 2px;
@@ -2126,11 +2081,22 @@ textarea:focus-visible {
 }
 
 .theme-dark .close-button,
-.theme-dark .tool-rail,
 .theme-dark .notes-drawer-grip {
   background: #111511;
 }
 
+.theme-dark .top-menu-button,
+.theme-dark .menu-popover,
+.theme-dark .menu-popover button {
+  border-color: #3f493f;
+  background: #222820;
+  color: #eee8d8;
+}
+
+.theme-dark .menu-popover header {
+  border-bottom-color: #3f493f;
+}
+
 .theme-dark .book-tabs {
   background: #161a18;
 }
@@ -2417,17 +2383,12 @@ textarea:focus-visible {
     grid-template-columns: 1fr;
   }
 
-  .tool-rail {
-    flex-direction: row;
-    justify-content: flex-start;
-  }
-
   .top-bar {
     grid-template-columns: 1fr;
   }
 
   .page-controls {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 34px 1fr 1fr;
   }
 
   .page-columns {

src/App.tsx

@@ -3244,55 +3244,6 @@ function App() {
         themeMode === 'dark' ? 'theme-dark' : 'theme-light',
       ].filter(Boolean).join(' ')}
     >
-      <aside
-        className="tool-rail"
-        aria-label="Main tools"
-        onMouseEnter={() => setRailOpen(true)}
-        onMouseLeave={() => setRailOpen(false)}
-        onFocus={() => setRailOpen(true)}
-        onBlur={(event) => {
-          if (!event.currentTarget.contains(event.relatedTarget)) setRailOpen(false)
-        }}
-      >
-        <button type="button" className="menu-button" title="Menu" onClick={() => setRailOpen((current) => !current)}>
-          <span />
-          <span />
-          <span />
-        </button>
-        <div className="app-identity" aria-label="Libre Study">
-          <span className="brand-mark">LS</span>
-          <span className="rail-copy">
-            <strong>Libre Study</strong>
-            <small>Free Bible study by Christ IT</small>
-          </span>
-        </div>
-        <p className="rail-description">
-          A readable Bible page, study margin, notes workspace, and linked public Bible data.
-        </p>
-        {hostedUser ? (
-          <button
-            type="button"
-            title="Sign out"
-            onClick={() => signOutHostedWorkspace().catch((reason) => setError(String(reason)))}
-          >
-            <span className="rail-icon">U</span>
-            <span className="rail-copy"><strong>{hostedUser.username}</strong><small>Sign out</small></span>
-          </button>
-        ) : null}
-        <button type="button" title="Session management" onClick={() => setSessionModalOpen(true)}>
-          <span className="rail-icon">S</span>
-          <span className="rail-copy"><strong>Sessions</strong><small>Save, export, and configure</small></span>
-        </button>
-        <button type="button" title="Settings" onClick={() => setSettingsModalOpen(true)}>
-          <span className="rail-icon">A</span>
-          <span className="rail-copy"><strong>Settings</strong><small>Study display controls</small></span>
-        </button>
-        <button type="button" className="rail-bottom" title="About Libre Study" onClick={() => setAboutModalOpen(true)}>
-          <span className="rail-icon">?</span>
-          <span className="rail-copy"><strong>About</strong><small>Project, licenses, and links</small></span>
-        </button>
-      </aside>
-
       <section className="reader" ref={readerRef}>
         {loading ? (
           <div className="status-panel">Loading local library...</div>
@@ -3306,6 +3257,17 @@ function App() {
             >
               <div className="bible-top-tools">
                 <div className="page-controls" aria-label="Page selectors">
+                  <button
+                    type="button"
+                    className="top-menu-button"
+                    title="Menu"
+                    aria-label="Open menu"
+                    onClick={() => setRailOpen(true)}
+                  >
+                    <span />
+                    <span />
+                    <span />
+                  </button>
                   <label>
                     Translation
                     <select
@@ -3483,6 +3445,65 @@ function App() {
       {renderAboutModal()}
       {renderSettingsModal()}
       {renderTimelineModal()}
+      {railOpen ? (
+        <div className="menu-popover-backdrop" role="presentation" onMouseDown={() => setRailOpen(false)}>
+          <section
+            className="menu-popover"
+            aria-label="Main menu"
+            onMouseDown={(event) => event.stopPropagation()}
+          >
+            <header>
+              <span className="brand-mark">LS</span>
+              <div>
+                <strong>Libre Study</strong>
+                <small>Free Bible study by Christ IT</small>
+              </div>
+            </header>
+            {hostedUser ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setRailOpen(false)
+                  signOutHostedWorkspace().catch((reason) => setError(String(reason)))
+                }}
+              >
+                <strong>{hostedUser.username}</strong>
+                <small>Sign out</small>
+              </button>
+            ) : null}
+            <button
+              type="button"
+              onClick={() => {
+                setRailOpen(false)
+                setSessionModalOpen(true)
+              }}
+            >
+              <strong>Sessions</strong>
+              <small>Save, export, and configure</small>
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setRailOpen(false)
+                setSettingsModalOpen(true)
+              }}
+            >
+              <strong>Settings</strong>
+              <small>Study display controls</small>
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setRailOpen(false)
+                setAboutModalOpen(true)
+              }}
+            >
+              <strong>About</strong>
+              <small>Project, licenses, and links</small>
+            </button>
+          </section>
+        </div>
+      ) : null}
     </main>
   )
 }