fix(ui): keep permission dock buttons in view on long requests#29004
fix(ui): keep permission dock buttons in view on long requests#29004Arcadi4 wants to merge 1 commit into
Conversation
Cap the dock with a measured max-height matching the available slot under the session header, and make the patterns row a flex grid track with min-height: 0 so long content scrolls inside the dock with a fading bottom mask instead of pushing the action buttons off-screen.
Arcadi4
force-pushed
the
fix/web-ui-permission-overflow
branch
from
942bd41 to
c2f68a5
Compare
|
Automated PR Cleanup Thank you for contributing to opencode. Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions. This PR was closed because it matched the following cleanup criteria:
PRs created within the last month are not affected by this cleanup. If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate. Thanks again for taking the time to contribute. |
|
@Hona @Brendonovich As this is automatically closed, I opened a new one #33563. Please consider reviewing that one instead. |
1 participant
Issue for this PR
Closes #28979
Type of change
What does this PR do?
A long
permission.patternscould push the permission dock past its slot under the session header. The page'soverflow: hiddenthen clipped the action buttons off-screen.The fix:
max-height: min(40dvh, calc(100dvh - var(--sticky-accordion-top, 0px)))— caps the dock height to ~40% of the viewport while reserving the inherited sticky-header offset (--sticky-accordion-topis already set inline on the scroll container inmessage-timeline.tsxwhen the session title is shown).:has(> permission-patterns) { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch }— the load-bearing scroll fix. The intermediatepermission-row(a grid) was missingmin-height: 0, so it grew to fit its children andoverflow-y: autoonpermission-patternsnever engaged. Forcing the grid track tominmax(0, 1fr)finally constrains the child.overscroll-behavior: contain+ bottom-onlymask-image— scroll doesn't bubble to the page, and a 24px fade at the bottom edge signals more content below.How did you verify your code works?
Reproduced the bug with a Playwright fixture that injects a
PermissionV1.Requestwith 40 longbashpatterns into a mock-server-backed session (uses themockOpenCodeServerpattern frompackages/app/e2e/utils/mock-server.ts). See the verification script in the comment below.Screenshots / recordings
The content body is scrollable.
Checklist