Address #121 review: keep sign-out reachable, dvh peek, exact height
Build image / build-and-push (push) Successful in 12s

- Fold the account menu into the editor's mobile strip. Hiding the global
  header removed the only sign-out on mobile in the editor; the strip now
  carries it, so the space win stays but sign-out is one tap away.
- EditorRail peek cap vh → dvh, matching the dvh-bounded editor column, so
  it can't overrun the visible viewport and push the mode bar off-screen.
- Mobile editor height 4rem → 3rem: with the header hidden, only <main>'s
  py-6 (3rem) is outside the editor, so 4rem left ~16px dead. Comment
  corrected.
- Trim two comments that duplicated nearby docs.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
This commit is contained in:
2026-07-22 21:31:35 -04:00
co-authored by Claude Opus 4.8
parent ace696467b
commit 256fa4f29f
3 changed files with 23 additions and 16 deletions
+11 -8
View File
@@ -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