AI Capture Ratio Design

Summary

Adjust the non-mobile AI capture composer so the text area and attachments panel use a 70 / 30 split instead of equal columns. Within the attachments panel, image previews should stack vertically with one preview per row. Example prompts should form a masonry-style cluster inside the composer footer rather than reading as a flat uniform row.

Goal

Give the text composer more room for prompt entry while keeping attachments visible and useful as a clearly secondary surface.

Scope

Update the non-mobile AIToolbar layout only.
Keep mobile behavior unchanged.
Change the attachments preview layout so each image preview occupies its own full-width row.
Change the example prompt area so prompts form a masonry-style cluster within their parent.
Update tests that lock down the desktop layout contract.

Non-Goals

No changes to the page-level placement of the AI capture section.
No changes to mobile stacking behavior.
No changes to attachment upload behavior, image removal behavior, or summary behavior.
No visual redesign of the prompt footer, buttons, or copy.

Design

Main Composer Layout

For every non-mobile width, the AI capture composer will use a two-column grid with this ratio:

Left column: 70% equivalent width for the text composer
Right column: 30% equivalent width for the attachments panel

Implementation will use a Tailwind arbitrary grid template in the existing useIsMobile() branch inside src/components/ai-toolbar.tsx.

Attachments Preview Layout

When image previews are present, the attachments panel will render them in a vertical list rather than a two-column thumbnail grid.

Expected behavior:

Each preview takes the full available width of the attachments panel.
Previews stack top-to-bottom with consistent spacing.
Existing remove actions stay attached to each preview card.
Mobile can share the same one-per-row preview layout without introducing a separate preview treatment.

Example Prompt Layout

The example prompt area below the textarea should feel denser and more editorial than a single flat row of chips.

Expected behavior:

Prompts remain inside the existing composer footer area.
Prompt chips wrap into a masonry-style cluster rather than a rigid single-row strip.
Chip widths remain content-driven so the cluster feels packed and varied.
The prompt area should still read as secondary to the textarea itself.

Files Affected

src/components/ai-toolbar.tsx
tests/ai-toolbar.test.ts

Testing

Add or update tests to verify:

non-mobile layout uses a 70 / 30 grid split
desktop/non-mobile preview layout is row-stacked instead of grid-cols-2
example prompts use a masonry-style clustered layout rather than a flat row contract

Then run:

bun test
bun run type:check
bun run lint

Risks

A narrower attachments panel may make attachment copy feel dense, so only the layout ratio should change unless the implementation reveals a real readability issue.
A vertical preview list may increase panel height when many images are attached, but that is preferable to shrinking previews into a dense grid.
A masonry prompt cluster can become visually noisy if spacing is too tight, so the implementation should preserve clear separation from the textarea and maintain readable chip padding.

3.3 KiB Raw Blame History