fix(web): make Add Instance dialog scrollable on small viewports

[s0up4200]

Summary

• Add max-h-[90dvh] flex flex-col to DialogContent to constrain height and enable flex layout
• Add flex-shrink-0 to DialogHeader to keep it always visible
• Wrap InstanceForm in scrollable container with flex-1 overflow-y-auto min-h-0

Fixes #1231

Test plan

• Open Settings > Instances > Add Instance
• Enable HTTP Basic Auth to expand the form
• Shrink browser window height
• Verify modal content scrolls and buttons remain accessible

Summary by CodeRabbit

• Style
  • Improved the layout and scrolling behavior of the Settings dialog to better accommodate longer forms and content.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The Settings page's Add Instance modal is refactored to constrain its height and enable internal scrolling. DialogContent applies flex layout and height constraints, DialogHeader prevents shrinking, and the form is wrapped in a scrollable container to prevent content overflow beyond the viewport.

Changes

Cohort / File(s)	Change Summary
Dialog Layout Fixes web/src/pages/Settings.tsx	Adds max-h-[90dvh], flex, flex-col to DialogContent for height constraint and flex layout. DialogHeader gains flex-shrink-0. InstanceForm wrapped in scrollable container (flex-1 overflow-y-auto min-h-0) to enable internal scrolling without affecting dialog structure.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

web, bugfix

Poem

A modal once grew too tall and wide,
Content fleeing far to hide,
With flex and constraints, we set it right,
Now scrolling flows, the view's just right! 🐰✨

🚥 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and concisely describes the main change: making the Add Instance dialog scrollable on small viewports, which is the primary focus of all code modifications.
Linked Issues check	✅ Passed	The pull request directly addresses issue #1231 by implementing all required changes: constraining dialog height, preventing header shrinkage, and making form content scrollable.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Settings.tsx dialog layout and directly address the scrollability issue; no unrelated modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/instance-dialog-overflow

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aba9b7e and 8134bd9.

📒 Files selected for processing (1)

• web/src/pages/Settings.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

web/src/pages/Settings.tsx (2)

web/src/components/ui/dialog.tsx (4)

• DialogContent (138-138)
• DialogHeader (141-141)
• DialogTitle (144-144)
• DialogDescription (139-139)

web/src/components/instances/InstanceForm.tsx (1)

• InstanceForm (77-407)

🔇 Additional comments (1)

web/src/pages/Settings.tsx (1)

520-535: LGTM! Solid implementation for scrollable modal dialog.

The flexbox pattern applied here is the correct approach:

• max-h-[90dvh] with flex flex-col constrains and structures the dialog
• flex-shrink-0 on header keeps it visible during scroll
• min-h-0 on the scroll container is essential for flex children to respect overflow

The dvh (dynamic viewport height) unit is a good choice over vh as it accounts for mobile browser UI chrome changes.

---

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