Reclaim mobile chrome: drop the editor's top banner, un-cramp the assistant
Build image / build-and-push (push) Successful in 23s
Gadfly review (reusable) / review (pull_request) Successful in 11m12s
Adversarial Review (Gadfly) / review (pull_request) Successful in 11m12s

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:
2026-07-22 21:13:35 -04:00
co-authored by Claude Opus 4.8
parent a72ddefc99
commit ace696467b
4 changed files with 48 additions and 11 deletions
+1 -1
View File
@@ -143,7 +143,7 @@ export function ChatPanel({ gardenId, canEdit }: { gardenId: number; canEdit: bo
</p>
)}
<div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">
{history.isPending && <p className="text-sm text-muted">Loading the conversation…</p>}
{/* A failed load rendering as an empty thread would look like the
conversation had been lost, which is a much worse thing to believe. */}
+13 -6
View File
@@ -18,10 +18,13 @@ import { cn } from '@/lib/cn'
* closes completely when nothing needs it.
*
* Layout differs by breakpoint. Desktop: a fixed 20rem column beside the canvas.
* Phone: an in-flow PEEK (#101) — a ≤50vh panel the editor's flex column places
* BETWEEN the canvas and the always-visible mode bar, so the canvas shrinks to
* keep the garden visible above it and the mode bar reachable below, rather than
* a bottom sheet that covered the whole garden.
* Phone: an in-flow PEEK (#101) — a capped-height panel the editor's flex column
* places BETWEEN the canvas and the always-visible mode bar, so the canvas
* shrinks to keep the garden visible above it and the mode bar reachable below,
* rather than a bottom sheet that covered the whole garden. `tall` raises that
* cap for panel modes (journal/history/assistant), where reading and typing are
* the task and a half-height peek felt cramped; the inspector keeps the shorter
* peek so the canvas it describes stays in view.
*/
export interface RailTab {
@@ -38,11 +41,14 @@ export function EditorRail({
activeId,
onActivate,
onClose,
tall = false,
}: {
tabs: RailTab[]
activeId: string
onActivate: (id: string) => void
onClose: () => void
/** Raise the mobile peek's height cap (panel modes want the room). */
tall?: boolean
}) {
const active = tabs.find((t) => t.id === activeId) ?? tabs[0]
if (!active) return null
@@ -54,8 +60,9 @@ export function EditorRail({
// canvas and the always-visible mode bar (the editor's flex column places
// it there), so the garden stays visible above it and the mode bar stays
// reachable below. The canvas flexes to fill whatever's left. Desktop: a
// fixed-width column beside the canvas.
'flex max-h-[50vh] min-h-0 shrink-0 flex-col rounded-t-xl border-t border-border bg-surface shadow-lg',
// 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]',
'md:static md:max-h-none md:w-80 md:rounded-xl md:border md:shadow-sm',
)}
>