Skip to content

[agent-team] Fix homepage to use fixed viewport layout (ChatGPT-style)#114

Merged
verkyyi merged 1 commit into
mainfrom
agent-team/issue-113-fixed-viewport-layout-c4b7546b8a7e1228
Apr 21, 2026
Merged

[agent-team] Fix homepage to use fixed viewport layout (ChatGPT-style)#114
verkyyi merged 1 commit into
mainfrom
agent-team/issue-113-fixed-viewport-layout-c4b7546b8a7e1228

Conversation

@github-actions
Copy link
Copy Markdown
Contributor

Closes #113

Summary

The homepage previously allowed the whole page to scroll as the chat grew, because the outer container was unconstrained. This PR introduces a .resume-viewport wrapper (locked to 100dvh) with .resume-main as a flex-growing <main>, so the page height is fixed to the viewport. .chatp now uses flex: 1; min-height: 0 to fill the available space, and .chatp-messages replaces the fixed max-height: 560px cap with min-height: 300px and scrolls within that container. The input bar stays anchored at the bottom at all times.

Plan reference

Implemented from the plan posted in issue #113 comment by the Planner Agent.

Test status

  • cd web && npx vitest run → ✅ 21 test files, 108 tests passed

🤖 agent-team / implementer

Generated by Implementer Agent ·

To install this agentic workflow, run

gh aw add verkyyi/github-agent-runner/catalog/agent-team/implementer-agent.md@main

…rnally

Wraps the homepage in a `.resume-viewport` div (100dvh, flex column) so
the page never scrolls vertically. `.chatp` grows to fill available space
via `flex: 1` and `.chatp-messages` scrolls within it, replacing the old
`max-height: 560px` cap with `min-height: 300px`. Closes #113.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions github-actions Bot added agent-team Opt-in marker for the agent-team pipeline agent-team:pr labels Apr 21, 2026
@github-actions
Copy link
Copy Markdown
Contributor Author

(agent-team:review)

Review

Verdict: ✅ Approve

Spec alignment: All 7 acceptance criteria are met.

  • ✅ No <body> vertical scroll: .resume-viewport { height: 100dvh; overflow: hidden } prevents page scroll entirely.
  • ✅ Messages area fills available space: .chatp { flex: 1; min-height: 0 } fills .resume-main; .chatp-messages { flex: 1; overflow-y: auto } (pre-existing, preserved) fills .chatp minus the input row.
  • ✅ Scroll isolated to .chatp-messages: overflow-y: auto on the messages container with a flex-constrained height scrolls content there only — the page never scrolls.
  • ✅ Input bar always visible: .chatp-input-row { margin-top: auto } (pre-existing) keeps it anchored at the bottom of the flex column.
  • ✅ Min-height 300 px on messages area: min-height: 300px replaces the old max-height: 560px.
  • ✅ Mobile layout preserved: the @media (max-width: 640px) breakpoint retains the margin override; the min-height: 360px removal is correct since flex sizing now governs .chatp height.
  • ✅ Tests pass: 21 test files, 108 tests all green.

Plan adherence: Exactly the three files listed in the plan were changed (global.css, App.tsx, ChatPanel.css). No out-of-scope edits. The implementation matches the plan's approach description and step-by-step instructions precisely.

Tests: ## Test status section present in PR body. npx vitest run → ✅ 21 test files, 108 tests passed (7 more than the plan's 101 baseline — fine, tests were added since the plan was written).

Issues found: none.

Nits (non-blocking)

  • overflow: hidden on .resume-main may clip the bottom border-radius of .chatp on viewports where the card reaches the edge. Purely cosmetic; easy follow-up if it looks rough in practice.
  • The @media (pointer: coarse) { font-size: 16px } guard on the input already prevents iOS Safari auto-zoom on the locked viewport — a good existing complement to this change.

🤖 agent-team / reviewer

(/agent-team:review)

Generated by Reviewer Agent ·

To install this agentic workflow, run

gh aw add verkyyi/github-agent-runner/catalog/agent-team/reviewer-agent.md@cb66d12806d7f00d220f11e964bc27dfec672913

@github-actions github-actions Bot added the agent-team:reviewed agent-team: PR has been reviewed label Apr 21, 2026
@verkyyi verkyyi marked this pull request as ready for review April 21, 2026 09:00
@verkyyi verkyyi merged commit 1808f87 into main Apr 21, 2026
@verkyyi verkyyi deleted the agent-team/issue-113-fixed-viewport-layout-c4b7546b8a7e1228 branch April 21, 2026 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

agent-team:pr agent-team:reviewed agent-team: PR has been reviewed agent-team Opt-in marker for the agent-team pipeline

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UX Improvement on homepage

1 participant