Skip to content

R8a: turn the composer into a floating island, not a full-width footer bar - #163

Merged
dovvnloading merged 1 commit into
mainfrom
r8a/composer-island
Jul 28, 2026
Merged

R8a: turn the composer into a floating island, not a full-width footer bar#163
dovvnloading merged 1 commit into
mainfrom
r8a/composer-island

Conversation

@dovvnloading

Copy link
Copy Markdown
Owner

Problem

The composer was a <footer> spanning the full window width, docked flush at the bottom with no visual container of its own - a plain textarea and a row of individually-bordered buttons sitting directly in the app background. It read as a form embedded in a page, not a self-contained control surface.

Change

  • Structurally, <footer className="app-composer-region"> is gone. The composer now lives inside <main className="app-canvas-region"> as a new absolutely-positioned layer, the same pattern already used for the token counter and notification banner, so the canvas renders full-bleed behind it.
  • The card itself picks up the same elevated-surface language already used by the app's popovers/dialogs (node-body background, border, shadow, ~14px radius), centered with a responsive max-width so it never spans the full window.
  • Inside the card: the textarea drops its own border/background and blends into the card surface (focus now highlights the whole card via :focus-within, not just the field); the attach/reasoning/model controls go flat and borderless until hover instead of each being its own bordered box; send/cancel break out into their own zone behind a single hairline divider, with send as the one circular, filled accent control.
  • The card's bottom offset is derived from the token counter's actual measured footprint so the two never collide - verified directly via real bounding-rect measurements at both a 960px and a wide desktop window width, not just eyeballed.
  • Deleted two fully orphaned CSS rules (.app-composer-region and .app-composer-placeholder, an unrelated dead leftover from an early pre-R2.3 scaffold) found sitting next to the selector this change repoints - neither had any remaining JSX reference.

No changes to Composer.tsx's element tree, aria-labels, or data-overlay-trigger attributes - this is a CSS/layout change only, so existing test coverage for composer behavior is untouched and still exercises the same DOM contract.

Test plan

  • Full frontend suite: tsc --noEmit clean, lint 0 errors, 785 tests passed, build succeeds
  • Full backend suite: 989 passed (unaffected - this is a frontend-only change)
  • Verified in a live browser preview against the real running app: card renders as a bounded, centered island (760px cap, confirmed via getBoundingClientRect) at both 1189px and 960px window widths, with zero vertical overlap against the token counter's real measured position at either width
  • Verified the reasoning/model popovers still render correctly, unclipped, at a short 600px window height

…r bar

The composer was a <footer> spanning the full window width, docked flush
at the bottom with no visual container of its own - a textarea and a row
of individually-bordered buttons sitting directly in the app background.
It's now a self-contained floating card, centered over the canvas with a
responsive max-width, using the same elevated-surface language as the
app's popovers/dialogs (node-body background, border, shadow).

Inside the card: the textarea drops its own border/background and blends
into the card surface (focus now highlights the whole card via
:focus-within, not just the field); the attach/reasoning/model controls
go flat and borderless until hover instead of each being its own bordered
box; send/cancel break out into their own zone behind a single hairline
divider, with send as the one circular, filled accent control.

Structurally, <footer className="app-composer-region"> is gone - the
composer now lives inside <main className="app-canvas-region"> as an
absolutely-positioned layer, the same pattern already used for the token
counter and notification banner, so the canvas renders full-bleed behind
it. Its bottom offset is set from the token counter's actual measured
footprint so the two never collide, verified at both a 960px and a wide
desktop window width.

Also deletes two fully orphaned CSS rules (.app-composer-region and
.app-composer-placeholder, an unrelated dead leftover from an early
pre-R2.3 scaffold) found sitting next to the selector this change
repoints - neither had any JSX reference left.
@dovvnloading
dovvnloading merged commit bfdc469 into main Jul 28, 2026
2 checks passed
@dovvnloading
dovvnloading deleted the r8a/composer-island branch July 28, 2026 18:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant