fix(web): keep scroll-to-end button close to composer

[Bil0000]

The Stash tab added 34 px of empty space between the composer and “Scroll to end” in both the collapsed and expanded states. The button now clears only attached content that overlaps its width. In the real app, the gap falls from 52 px to 18 px in both states.

The existing height measurement still drives composer transitions and timeline spacing. Full-width attachments and Stash at narrow widths keep their clearance. This changes the shared web/desktop chat view; the native mobile client is unchanged.

Verified with 35 composer layout tests, the web type check, targeted lint and formatting, and real-app checks at 1280, 600, and 375 px. Focus/scroll transitions, opening Stash, and scrolling to the end worked. Lint reports existing warnings in ChatView. Browser checks used an isolated local server with sample messages; the Electron shell was not launched.

State	Before	After
Collapsed
Expanded

Model: GPT-6. Harness: Codex.

Note

Fix ChatView scroll-to-end button clearance to account for attached banners

• Adds resolveScrollToEndClearance in composerFooterLayout.ts to compute clearance from overlay height, main-surface position, button bounds, and attached-banner rectangles. Clearance is reduced only when a banner sits above the button without horizontally overlapping it.
• ChatView now measures the composer, scroll-to-end button, and banner surfaces, stores the resolver's clearance, and reruns the measurement effect when scroll-to-bottom visibility changes.
• ComposerBannerStack keeps the notices container at minimum height in both collapsed and expanded states, and remounts the front banner wrapper when the front item changes.
• Risk: clearance now shrinks when a non-overlapping banner is present; callers relying on the full overlay-height clearance when banners exist should verify ChatView.tsx overlay-height fallback logic.

^{Macroscope summarized 1784151.}

Summary by CodeRabbit

• Bug Fixes

  • Improved scroll-to-end button positioning when the message composer includes attachments or banners.
  • The timeline now reserves appropriate bottom clearance based on visible composer content.
  • Positioning updates correctly when the scroll-to-bottom control appears or disappears.
  • Composer banner spacing remains consistent when banners are collapsed or displayed.

• Tests

  • Added coverage for scroll-to-end clearance across attachment overlap and button placement scenarios.

[macroscopeapp]

Approvability

Verdict: Approved at 1784151

Macroscope's review found this PR approvable — This is a contained web UI bug fix that adjusts existing scroll-to-end clearance and composer banner layout, with focused resolver tests and no schema, infrastructure, security, billing, or default-setting changes. The runtime impact is limited to positioning and transition/layout behavior within the existing chat composer.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 34ef3f6f-f6b0-4a9a-80d4-2e37bf1f9370

📥 Commits

Reviewing files that changed from the base of the PR and between b1d453a and 1784151.

📒 Files selected for processing (1)

• apps/web/src/components/chat/ComposerBannerStack.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds resolveScrollToEndClearance, uses composer and attachment geometry to calculate scroll-to-end clearance, and recalculates composer layout when scroll-to-bottom visibility changes. Banner stack rendering now uses stable keys and reserves collapsed height.

Changes

Scroll-to-end clearance

Layer / File(s)	Summary
Clearance helper and validation apps/web/src/components/composerFooterLayout.ts, apps/web/src/components/composerFooterLayout.test.ts	The helper calculates clearance from overlay, surface, button, and attachment bounds. Tests cover overlapping, spanning, absent, and separated attachments.
Composer layout integration apps/web/src/components/ChatView.tsx	ChatView uses the helper during overlay measurement and reruns layout calculation when scroll-to-bottom visibility changes.
Banner stack rendering apps/web/src/components/chat/ComposerBannerStack.tsx	The front banner wrapper uses the banner ID as its React key. The stack container always reserves the collapsed cap height.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 17841

The banner stack now maintains stable rendering identity and reserved collapsed spacing, with no identified impact on chat functionality or merge readiness.

Sequence Diagram(s)

sequenceDiagram
  participant ChatView
  participant ComposerGeometry
  participant ClearanceHelper
  participant ScrollButton
  ChatView->>ComposerGeometry: measure overlay and composer surfaces
  ComposerGeometry->>ClearanceHelper: pass surface, button, and attachment bounds
  ClearanceHelper->>ScrollButton: calculate reserved end clearance
  ScrollButton-->>ChatView: apply clearance to layout

Loading

Suggested reviewers: juliusmarminge

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 4 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: keeping the scroll-to-end button close to the composer.
Description check	✅ Passed	The description explains what changed, why it changed, the affected platforms, verification steps, and UI changes with before-and-after screenshots. It does not use the template headings or include th…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

Dismissing prior approval to re-evaluate 1784151

[macroscopeapp]

All clear

^{Posted via Macroscope — Effect Service Conventions}