Fix: add spacers for mobile view modals

[Bekiboo]

Description of change

Because eReputation runs as a standard web app in regular mobile browsers, env(safe-area-inset-*) is unreliable or resolves to 0 in most of our target environments (especially Chrome Android). While it works in some iOS Safari contexts, it cannot be depended on cross-browser. Fixed spacers therefore provide a predictable and practical solution.

Issue Number

Closes #683

Type of change$

• Fix (a change which fixes an issue)

How the change has been tested

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• Bug Fixes

  • Improved dialog box spacing and alignment on mobile devices to ensure better visual presentation and readability for users on small screens.

• Chores

  • Code cleanup: removed unused imports from multiple UI components to improve codebase maintainability.
  • Updated development server configuration to support network-level access during development.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Addresses responsive design issues on small/medium devices in eReputation modals by adding vertical spacing around dialog content. Also removes unused imports from modal components and enables the Vite dev server to listen on network interfaces.

Changes

Cohort / File(s)	Summary
Modal import cleanup platforms/eReputation/client/src/components/modals/other-calculation-modal.tsx, platforms/eReputation/client/src/components/modals/reference-modal.tsx	Removed unused imports including useDebouncedCallback, Select components, and FileUpload. No functional behavior changes.
Dialog responsive spacing platforms/eReputation/client/src/components/ui/dialog.tsx	Added two spacer divs (h-12 before and h-10 after children) with sm:hidden class to address screen overflow on small devices. Divs are marked aria-hidden="true".
Dev server configuration platforms/eReputation/vite.config.ts	Added host: true to server configuration, enabling the dev server to listen on network interfaces.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: eReputation and Dreamsync wishlist synchronization #455: Modifies other-calculation-modal.tsx to add wishlist integration; shares file-level overlap with import cleanup changes in this PR.

Suggested reviewers

• coodos
• ananyayaa129

Poem

🐰 Spacers shimmer on small screens bright,
Unused imports fade from sight,
Modal windows fit just right,
Network host now burning bright,
Responsive magic, oh what a delight! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Vite server config change (host: true) appears out of scope. The primary objective is fixing mobile modal layouts, and adding network listening capability to the dev server is unrelated to this goal.	Review the vite.config.ts change (host: true) to confirm it is necessary for mobile testing or if it should be removed as out of scope.
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 (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding spacers for mobile modals to address layout issues on small devices, which matches the core implementation.
Description check	✅ Passed	The description covers required sections (issue number, type of change, checklist) and provides context about the cross-browser reliability issue with safe-area-inset, though it lacks specific testing steps.
Linked Issues check	✅ Passed	The changes directly address issue #683 by adding fixed spacers to dialog components for mobile devices, ensuring modal content remains accessible on small screens as required.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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.}