Reclaim mobile chrome: drop the editor's top banner, un-cramp the assistant
Two mobile complaints, both in the editor/assistant context: - The global top bar (brand + account) sat above the editor's own garden-name strip — a whole banner of pure chrome over a full-screen canvas. Hide it on mobile in the editor (the same rationale that hides the bottom nav there) and fold a leaf/back affordance into the garden strip so there's still a way out. Desktop keeps the header. The editor's height band shrinks 8rem → 4rem on mobile to hand that space to the canvas; desktop stays 8rem since the header is still there. - The assistant (and journal/history) rendered inside the rail peek capped at max-h-[50vh]; after the tab bar, header and input, messages got ~200px. That cap is right for the inspector (read alongside the canvas) but not for a mode where reading/typing is the task. Panel modes now take a taller slice (78vh) via a `tall` prop; the inspector keeps the 50vh peek. Chat message spacing loosened gap-2 → gap-3. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { getRouteApi } from '@tanstack/react-router'
|
||||
import { Link, getRouteApi } from '@tanstack/react-router'
|
||||
import { Alert } from '@/components/ui/Alert'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { GardenCanvas } from '@/editor/GardenCanvas'
|
||||
@@ -544,8 +544,13 @@ export function GardenEditorPage() {
|
||||
// 100dvh, not 100vh: on mobile Safari/Chrome 100vh is the *largest* viewport
|
||||
// (URL bar hidden), so with the bar showing the editor overflowed and pushed
|
||||
// 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.
|
||||
return (
|
||||
<div className="flex h-[calc(100dvh-8rem)] flex-col gap-3 md:flex-row">
|
||||
<div className="flex h-[calc(100dvh-4rem)] 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). */}
|
||||
@@ -597,8 +602,17 @@ export function GardenEditorPage() {
|
||||
|
||||
<div className="relative flex min-h-0 flex-1 flex-col gap-2">
|
||||
{/* Mobile top strip: the garden identity / season / share that live in the
|
||||
desktop left column. md:hidden. */}
|
||||
desktop left column, plus the way out. The global header is hidden on
|
||||
mobile here (AppShell), so this leaf is the only route back to the
|
||||
gardens list — it can't be dropped. md:hidden. */}
|
||||
<div className="flex items-center gap-2 md:hidden">
|
||||
<Link
|
||||
to="/gardens"
|
||||
aria-label="All gardens"
|
||||
className="-ml-1 shrink-0 rounded-md px-1.5 py-1 text-lg leading-none text-accent-strong outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
||||
>
|
||||
🌱
|
||||
</Link>
|
||||
<h1 className="min-w-0 flex-1 truncate text-base font-semibold tracking-tight" title={garden.name}>
|
||||
{garden.name}
|
||||
</h1>
|
||||
@@ -673,6 +687,11 @@ 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).
|
||||
tall={railTab !== 'inspector'}
|
||||
onClose={() => {
|
||||
// Only the inspector is *about* the selection, so only closing it
|
||||
// deselects; dismissing a panel leaves the canvas as you had it. Any
|
||||
|
||||
Reference in New Issue
Block a user