fix(web): respect iOS safe areas across mobile chrome#2392
fix(web): respect iOS safe areas across mobile chrome#2392jappyjan wants to merge 1 commit intopingdotgg:mainfrom
Conversation
📝 WalkthroughWalkthroughAdds safe-area inset CSS utility classes and applies them across layout components (header, input bar, sidebar) to properly reserve space for device notches, Dynamic Island, and home indicator regions on iOS. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
github-actions
Bot
added
size:M
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
The viewport already opted into viewport-fit=cover but no element honored env(safe-area-inset-*), so on an iPhone the chat header sat under the Dynamic Island, the composer hid behind the home indicator, and the mobile sidebar drawer ran under the camera in landscape. Add pt-safe / pb-safe / pl-safe / pr-safe @Utility classes for the sidebar drawer (no other padding to combine with) and use inline calc() with env(safe-area-inset-*) on the chat top bar and the composer wrapper, where the existing px/py values must be preserved on devices without safe areas. Insets resolve to 0 on non-iOS, so desktop and Android layouts are unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
jappyjan
force-pushed
the
fix/mobile-safe-area
branch
from
f9955bb to
62ee822
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/index.css`:
- Around line 65-76: The Stylelint config is flagging Tailwind v4's custom
at-rule "@utility" in apps/web/src/index.css; update .stylelintrc.json to allow
it by adding or merging a rule entry for "at-rule-no-unknown" that supplies an
ignoreAtRules array including "utility" (and any other Tailwind at-rules you
use), e.g. add "rules": { "at-rule-no-unknown": [true, { "ignoreAtRules":
["utility"] }] } so the `@utility` declarations in index.css (padding-safe
utilities) are not treated as unknown at-rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 9fb2038b-732c-4a48-ac8c-83238e731845
📒 Files selected for processing (3)
apps/web/src/components/ChatView.tsxapps/web/src/components/ui/sidebar.tsxapps/web/src/index.css
| @utility pt-safe { | ||
| padding-top: max(env(safe-area-inset-top), 0px); | ||
| } | ||
| @utility pb-safe { | ||
| padding-bottom: max(env(safe-area-inset-bottom), 0px); | ||
| } | ||
| @utility pl-safe { | ||
| padding-left: max(env(safe-area-inset-left), 0px); | ||
| } | ||
| @utility pr-safe { | ||
| padding-right: max(env(safe-area-inset-right), 0px); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Stylelint config files =="
fd -HI 'stylelint' .
echo
echo "== at-rule rule definitions / ignoreAtRules =="
rg -n --iglob '*stylelint*' 'scss/at-rule-no-unknown|at-rule-no-unknown|ignoreAtRules|utility|theme|variant|custom-variant|source'
echo
echo "== package.json stylelint references =="
rg -n '"stylelint"|stylelint' package.jsonRepository: pingdotgg/t3code
Length of output: 157
🏁 Script executed:
cat .stylelintrc.jsonRepository: pingdotgg/t3code
Length of output: 1420
Stylelint config must be updated to allow Tailwind v4 @utility at-rules.
The current .stylelintrc.json extends stylelint-config-standard-scss without configuring ignoreAtRules for Tailwind v4's custom at-rules. The @utility declarations at Lines 65, 68, 71, and 74 are valid Tailwind v4 syntax but will be flagged as unknown at-rules by stylelint, blocking CI.
Update .stylelintrc.json to add exception rules:
Configuration fix
{
"extends": ["stylelint-config-standard-scss"],
"rules": {
+ "scss/at-rule-no-unknown": [true, {
+ "ignoreAtRules": ["theme", "variant", "custom-variant", "utility", "source"]
+ }],
"selector-id-pattern": null,
...
}
}🧰 Tools
🪛 Stylelint (17.9.0)
[error] 65-65: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 68-68: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 71-71: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 74-74: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/index.css` around lines 65 - 76, The Stylelint config is
flagging Tailwind v4's custom at-rule "@utility" in apps/web/src/index.css;
update .stylelintrc.json to allow it by adding or merging a rule entry for
"at-rule-no-unknown" that supplies an ignoreAtRules array including "utility"
(and any other Tailwind at-rules you use), e.g. add "rules": {
"at-rule-no-unknown": [true, { "ignoreAtRules": ["utility"] }] } so the `@utility`
declarations in index.css (padding-safe utilities) are not treated as unknown
at-rules.
ApprovabilityVerdict: Approved Pure CSS changes adding iOS safe-area-inset support for mobile browsers. The utilities use standard env() values that fall back to 0 on non-iOS devices, making this a low-risk styling fix with no runtime logic changes. You can customize Macroscope's approvability policy. Learn more. |
1 participant
Summary
`viewport-fit=cover` was already in place, but no element in the codebase honored `env(safe-area-inset-*)`. On iPhone the chat header / hamburger sat under the Dynamic Island, the composer hid behind the home indicator, and the mobile sidebar drawer ran under the camera in landscape.
Approach
Test plan
Screenshots / video
Note
Respect iOS safe areas in mobile Chrome for chat header and sidebar
pt-safe,pb-safe,pl-safe, andpr-safeTailwind utilities in index.css that applyenv(safe-area-inset-*)padding with amax(..., 0px)guard, requiringviewport-fit=cover.Macroscope summarized 62ee822.
Note
Low Risk
Low risk: CSS/layout-only changes that adjust padding on iOS devices with safe-area insets; primary risk is unintended spacing regressions in mobile layouts.
Overview
Improves iOS
viewport-fit=coverbehavior by adding Tailwind@utilityclasses (pt-safe,pb-safe,pl-safe,pr-safe) that map padding toenv(safe-area-inset-*).Updates
ChatViewto apply safe-area-aware padding to the non-Electron chat header and composer container (including bottom inset for the input bar), and updates the mobile sidebar sheet wrapper to include safe-area padding so drawer content avoids notches and the home indicator.Reviewed by Cursor Bugbot for commit 62ee822. Bugbot is set up for automated code reviews on this repo. Configure here.
Summary by CodeRabbit
Release Notes