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:
@@ -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. */}
|
||||
|
||||
@@ -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',
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user