fix(modal): resolve mobile viewport height and centering issues

[seojcarlos]

Summary

• Replace h-screen with h-full on modal root to fix mobile browser viewport issues
• Add flex flex-col to content.base for proper content layout and centering
• On mobile browsers, 100vh (and even 100dvh) includes the area behind the toolbar, causing the close button to be cut off and modals to appear misaligned

Changes

• packages/ui/src/components/Modal/theme.ts:
  • root.base: h-screen → h-full (fixes mobile viewport overflow)
  • content.base: Added flex flex-col (enables proper vertical content distribution)

Root Cause

Mobile browsers (iOS Safari, Chrome, Firefox) report 100vh as larger than the visible viewport because it includes the browser chrome (toolbar/address bar). This causes:

1. Modal close button cut off above viewport
2. Modal not vertically centered
3. Bottom padding/rounding disappearing on long content

Test plan

• Verify modal displays correctly on iOS Safari
• Verify modal displays correctly on iOS Chrome
• Verify modal close button is accessible on mobile
• Verify modal centers vertically with position="center"
• Verify no regression on desktop browsers
• Verify long-content modals scroll correctly on mobile

Fixes #1083

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Modal layout on mobile now sizes and centers correctly within the viewport by adjusting root height handling.

• Style

  • Modal content now uses a column flex layout for more consistent stacking, spacing, and responsive behavior across screen sizes.

[changeset-bot]

🦋 Changeset detected

Latest commit: feceebe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
flowbite-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@seojcarlos is attempting to deploy a commit to the Bergside Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2285b18c-a07f-485f-9ccb-a7292eb1c47f

📥 Commits

Reviewing files that changed from the base of the PR and between 85389d5 and feceebe.

📒 Files selected for processing (1)

• packages/ui/src/components/Modal/theme.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/ui/src/components/Modal/theme.ts

---

📝 Walkthrough

Walkthrough

Changed Modal theme classes: replaced h-screen with h-full on the modal root and added flex flex-col to modal content to adjust mobile layout and centering behavior.

Changes

Cohort / File(s)	Summary
Modal Theme Styling packages/ui/src/components/Modal/theme.ts	Replaced root.base h-screen → h-full; added flex flex-col to content.base to make the modal content a column flex container and improve mobile centering/height handling.
Release Metadata .changeset/modal-mobile-viewport.md	Added changeset for a fix(modal) patch describing the mobile viewport/layout adjustments.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• SutuSebastian

Poem

🐰 I nudged a class, then gave a cheer,
Heights went gentle, content drew near,
Flexed my columns, tidy and light,
Mobile modals now feel just right,
Hoppity-hop, a small delight!

🚥 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 and specifically describes the main changes: fixing mobile viewport height and centering issues in the modal component.
Linked Issues check	✅ Passed	The PR changes address the core coding requirements from issue #1083: replacing h-screen with h-full and adding flex flex-col for proper mobile layout.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to resolving the modal mobile viewport issues documented in #1083; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}