fix: add mobile Safari safe area support #2135
Conversation
- Add viewport-fit=cover to viewport meta tag to enable safe area insets - Add paddingBottom: env(safe-area-inset-bottom) to mobile menu - Add paddingBottom: env(safe-area-inset-bottom) to docs and handbook drawer sidebars Co-Authored-By: [email protected] <[email protected]>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughAdds bottom safe-area inset padding to mobile menu/drawer containers and updates the root viewport meta tag to include Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web/src/routes/_view/route.tsx (2)
103-106: Add fallback value to the safe-area environment variable.The
env()function should include a fallback value for browsers that don't support safe-area-inset variables. This ensures graceful degradation on older browsers or non-iOS devices.Apply this diff:
style={{ paddingLeft: "env(safe-area-inset-left)", - paddingBottom: "env(safe-area-inset-bottom)", + paddingBottom: "env(safe-area-inset-bottom, 0px)", }}Note: Consider applying the same fallback pattern to
paddingLefton line 104 for consistency.
191-194: Add fallback value to the safe-area environment variable.Same as the MobileDocsDrawer above, add a fallback value for graceful degradation.
Apply this diff:
style={{ paddingLeft: "env(safe-area-inset-left)", - paddingBottom: "env(safe-area-inset-bottom)", + paddingBottom: "env(safe-area-inset-bottom, 0px)", }}Note: Consider applying the same fallback pattern to
paddingLefton line 192 for consistency.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/components/header.tsx(1 hunks)apps/web/src/routes/_view/route.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/components/header.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/route.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci
- GitHub Check: fmt
- GitHub Check: Devin
ComputelessComputer
deleted the
devin/1764920268-fix-mobile-safari-safe-area
branch
Summary
Fixes mobile Safari safe area issue where the mobile menu and drawer sidebars were extending beyond the safe area boundaries, causing awkward display on iOS devices with notches/home indicators.
Changes:
viewport-fit=coverto the viewport meta tag to enable safe area insetspaddingBottom: env(safe-area-inset-bottom)to the mobile menu dropdownpaddingBottom: env(safe-area-inset-bottom)to the docs and handbook drawer sidebars (which already had left safe area padding)Review & Testing Checklist for Human
Notes
There are other components using
100vhcalculations that may have similar issues (product pages, gallery pages, etc.) but were not addressed in this PR since they weren't shown in the reported screenshot. May need follow-up if issues are found elsewhere.Requested by: @ComputelessComputer ([email protected])
Link to Devin run: https://app.devin.ai/sessions/fa5c3161fa514674acdc2b7b10107ae9