web/src/components/layout/AppShell.tsx

@@ -43,11 +43,10 @@ export function AppShell() {
   // max-w-5xl reading measure the other pages use (#107).
   const canvasRoute = inEditor || inPublicGarden
   const showBottomNav = !!user && !canvasRoute
-  // On a phone the editor is a full-screen canvas — the same reason the bottom
-  // bar hides there. The global top bar (brand + account) is then pure chrome
-  // above the garden, so hide it too and let the editor's own strip carry a back
-  // affordance; desktop keeps the header. Only the editor, not the public view,
-  // which has no strip of its own to fall back on.
+  // On a phone the editor is a full-screen canvas, so the global top bar is pure
+  // chrome above the garden — hide it and let the editor's own strip carry the
+  // back link AND the account menu (so sign-out isn't lost). Editor only, not the
+  // public view, which has no strip of its own to fall back on.
   const hideHeaderOnMobile = inEditor
 
   const visibleSections = sections.filter((s) => !s.adminOnly || user?.isAdmin)
@@ -126,8 +125,10 @@ export function AppShell() {
 }
 
 /** Account control: a compact button that toggles a small sign-out popover. On
- *  desktop the display name shows inline; on mobile it lives inside the popover. */
-function AccountMenu({ displayName }: { displayName: string }) {
+ *  desktop the display name shows inline; on mobile it lives inside the popover.
+ *  Exported so the editor's mobile strip can carry it — the global header that
+ *  normally hosts it is hidden there (see hideHeaderOnMobile). */
+export function AccountMenu({ displayName }: { displayName: string }) {
   const logout = useLogout()
   const navigate = useNavigate()
   const [open, setOpen] = useState(false)

web/src/editor/EditorRail.tsx

@@ -62,7 +62,10 @@ export function EditorRail({
         // reachable below. The canvas flexes to fill whatever's left. Desktop: a
         // fixed-width column beside the canvas (the cap doesn't apply there).
         'flex min-h-0 shrink-0 flex-col rounded-t-xl border-t border-border bg-surface shadow-lg',
-        tall ? 'max-h-[78vh]' : 'max-h-[50vh]',
+        // dvh, not vh: the enclosing editor column is dvh-bounded, and on mobile
+        // Safari/Chrome vh is the *largest* viewport, so a vh cap could overrun the
+        // visible area and shove the mode bar off-screen (same #85 reasoning).
+        tall ? 'max-h-[78dvh]' : 'max-h-[50dvh]',
         'md:static md:max-h-none md:w-80 md:rounded-xl md:border md:shadow-sm',
       )}
     >

web/src/pages/GardenEditorPage.tsx

@@ -23,6 +23,7 @@ import { isCoarsePointer } from '@/editor/shared'
 import { cn } from '@/lib/cn'
 import type { EditorGarden } from '@/editor/types'
 import { ShareGardenModal } from '@/components/gardens/ShareGardenModal'
+import { AccountMenu } from '@/components/layout/AppShell'
 import { useMe } from '@/lib/auth'
 import {
   toEditorObject,
@@ -546,11 +547,11 @@ export function GardenEditorPage() {
   // the canvas bottom + Fit button under the browser chrome (#85).
   //
   // The subtracted band differs by breakpoint because the chrome does. On mobile
-  // the global top bar is hidden here (AppShell), so only <main>'s padding is
-  // above us — 4rem reclaims the ~48px the header used to cost the canvas. On
-  // desktop the header is present, so keep the original 8rem.
+  // the global top bar is hidden here (AppShell), so the only thing outside the
+  // editor is <main>'s py-6 — 3rem, top + bottom. On desktop the header is
+  // present, so keep the original 8rem.
   return (
-    <div className="flex h-[calc(100dvh-4rem)] flex-col gap-3 md:h-[calc(100dvh-8rem)] md:flex-row">
+    <div className="flex h-[calc(100dvh-3rem)] flex-col gap-3 md:h-[calc(100dvh-8rem)] md:flex-row">
       {/* Desktop-only control column. On mobile these move to the bottom mode bar
           + a slim top strip so the canvas — the point of the screen — isn't shoved
           into a corner by a stack of controls (#99). */}
@@ -627,6 +628,10 @@ export function GardenEditorPage() {
               Share
             </Button>
           )}
+          {/* The global header (and its account menu) is hidden on mobile in the
+              editor, so carry sign-out here — otherwise it's unreachable without
+              leaving the garden. */}
+          {me.data && <AccountMenu displayName={me.data.displayName} />}
         </div>
         {seasonYear !== null && <SeasonBanner year={seasonYear} onExit={() => setSeasonYear(null)} />}
         {/* Focus toolbar is desktop-only; on mobile its plant tools move to the
@@ -687,10 +692,8 @@ export function GardenEditorPage() {
           tabs={railTabs}
           activeId={railTab}
           onActivate={setRailTab}
-          // The inspector is read alongside the canvas, so it stays a half-height
-          // peek. Journal/History/Assistant are the task themselves — reading and
-          // typing want room — so they take a taller slice on mobile (the canvas
-          // above just needs to stay glanceable as the assistant edits it).
+          // Panel modes want the room; the inspector stays a shorter peek (see the
+          // `tall` prop doc).
           tall={railTab !== 'inspector'}
           onClose={() => {
             // Only the inspector is *about* the selection, so only closing it