fix(access): cap approve/reject dialogs to viewport with internal scroll - #726
Open
surojitchowdhury wants to merge 2 commits into
Open
Conversation
…abrickslabs#687) The notification-launched Approve/Reject access dialogs had no height cap and no internal scroll, so tall content pushed the action buttons past the viewport, leaving them unreachable at 100% zoom. Make both dialogs a flex column capped at max-h-[85vh] with overflow hidden: the header and footer stay shrink-0 (pinned) while the middle body scrolls (flex-1 overflow-y-auto). The action buttons remain visible regardless of content height. Targeted per-dialog fix; the shared ui/dialog.tsx base is left untouched to avoid regressing every other dialog in the app. - handle-access-grant-dialog.tsx (Deny/Approve) - workflow-approval-response-dialog.tsx (Reject/Approve) Co-authored-by: Isaac
surojitchowdhury
marked this pull request as ready for review
August 14, 2026 10:44
will-yuponce-db
force-pushed
the
development
branch
from
August 14, 2026 13:37
6667439 to
cd198df
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #687
Summary
The notification-launched Approve/Reject access dialogs had no height cap and no internal scroll, so with tall content the dialog grew past the viewport and the Approve/Deny (Reject) buttons fell off-screen (only reachable by zooming the browser out). This caps each dialog to the viewport, scrolls the body internally, and pins the header + action footer so the buttons stay reachable at 100% zoom for any content height.
Before / After (UI)
Same access-request dialog, same content, at a short viewport (~620px tall).
Before (
development) — the dialog overflows the viewport: the header is clipped at the top and the Deny / Approve buttons fall off-screen with no way to scroll to them (workaround was zooming the browser out).After (this PR) — the dialog caps to the viewport: the header + action footer are pinned and the body scrolls internally, so Deny / Approve stay reachable at 100% zoom.
Change (targeted per-dialog — shared
ui/dialog.tsxuntouched)Both
handle-access-grant-dialog.tsxandworkflow-approval-response-dialog.tsx:DialogContent: addflex flex-col max-h-[85vh] overflow-hidden(flex column capped to 85% of viewport height;flexoverrides the basegridvia tailwind-merge, basegap-4still applies).shrink-0(stays pinned).flex-1 overflow-y-autoso only the middle scrolls;px-1 -mx-1for focus-ring breathing room. In the workflow dialog a scroll wrapper was added around the content so the footer remains a non-scrolling sibling.DialogFooter:shrink-0(pinned, always visible).Scope decision
Fixed per-dialog rather than in the shared
DialogContent, whose base is used by every dialog in the app — a central max-h/overflow/flex change would have broad blast radius. The two affected dialogs already have header/body/footer structure, so a ~10-line scoped change fully resolves #687 without risking other dialogs.Gates
yarn type-check(tsc --noEmit): pass.yarn build: success (pre-existing chunk-size warning only).