fix(settings): keep Settings modal within the viewport on short windows

[jSydorowicz21]

Summary

On a window shorter than the modal, the Settings pane overflowed off the top of the screen and the cut-off top was unreachable.

Root cause: the modal box used a fixed h-[900px] with no max-height, inside a centered overlay (flex items-center justify-center). When the viewport was shorter than 900px the modal stayed 900px tall and centered, so it overflowed equally above and below; the header (search + close) scrolled off the top with no way to reach it. The inner sidebar/content panels already scroll, but the outer box did not shrink.

Changes

• SettingsModal.tsx: cap the modal box height at calc(100vh - 2rem) via the existing style object, and add p-4 padding to the overlay so the dialog shrinks to fit short windows and stays fully reachable. On tall windows it is unchanged (still 900px). Inner panels keep their existing overflow-y-auto scrolling.

Verification

• npm run lint (tsc x3): clean.
• Manual: with a window shorter than ~900px, open Settings; the modal now fits within the viewport with the search/close header reachable, and content scrolls inside.

Summary by CodeRabbit

• Style
  • Updated the settings modal layout to add consistent padding around the overlay.
  • Improved modal sizing so it stays within the viewport and is less likely to overflow vertically.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3dda226c-a2bc-45ac-b531-0a10f7bde3f0

📥 Commits

Reviewing files that changed from the base of the PR and between b330223 and 096536b.

📒 Files selected for processing (1)

• src/renderer/components/Settings/SettingsModal.tsx

---

📝 Walkthrough

Walkthrough

Two styling changes to SettingsModal: the fixed overlay container gains p-4 padding, and the modal element receives a maxHeight: calc(100vh - 2rem) inline style to constrain vertical size.

Changes

SettingsModal Overlay Styling

Layer / File(s)	Summary
Overlay padding and maxHeight constraint src/renderer/components/Settings/SettingsModal.tsx	Adds p-4 to the overlay container's className and sets maxHeight: calc(100vh - 2rem) as an inline style on the modal element.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A rabbit squints at screens too tall,
The modal used to show it all!
Now p-4 frames the view just right,
And maxHeight keeps it trim and tight.
Hop hop — the layout fits at last! 🐇✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main fix: keeping the Settings modal within the viewport on short windows.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/settings-modal-height

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[greptile-apps]

Greptile Summary

This PR keeps the Settings modal reachable on short windows. The main changes are:

• Adds padding to the fullscreen modal overlay.
• Caps the modal height at calc(100vh - 2rem).
• Leaves the existing 900px height in place for taller windows.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
src/renderer/components/Settings/SettingsModal.tsx	Adds overlay padding and a viewport-based maximum height so the Settings dialog can shrink on short windows.

_{Reviews (1): Last reviewed commit: "fix(settings): keep Settings modal withi..." | Re-trigger Greptile}