fix: resolve workspace preview styling and mobile login modal positio…#57
Conversation
…ning - Add prose/prose-lg CSS classes for workspace preview rendering - Fix OAuthConfirmModal positioning by removing conflicting margin - Use 100dvh for dynamic viewport height on mobile devices - Add global mobile modal responsive fixes for PWA compatibility
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughModal responsiveness improvements across components and stylesheets using viewport-aware constraints. Fixed-position modal sizing now adapts dynamically to screen dimensions. New CSS rules add mobile-optimized layouts and PWA support. Comprehensive prose content styling introduced for document formatting with typography, spacing, and color specifications. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
📊 Performance Report
View detailed Lighthouse report in artifacts. |
![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
🤖 Fix all issues with AI agents
In `@src/styles/responsive.css`:
- Around line 560-564: The PWA-safe-area selector is using a quoted top value
and never matches inline styles; update the selector inside the `@media`
(display-mode: standalone) rule so it matches actual inline styles by replacing
the attribute selector [style*="top: '50%'"] with an unquoted variant that
covers common formatting (e.g., [style*="top: 50%"] and/or [style*="top:50%"])
while keeping the existing [style*="position: fixed"] condition and the top:
max(...) adjustment in the same rule.
🧹 Nitpick comments (1)
src/styles/responsive.css (1)
532-537: Scope the fixed‑modal selector to avoid unintended matches.The
[style*="position: fixed"][style*="transform: translate(-50%, -50%)"]selector will hit any fixed element using that transform, not just modals. Consider adding a dedicated class/data‑attr to the modal container and target that instead to prevent accidental overrides.
| @media (display-mode: standalone) { | ||
| /* Ensure modals account for PWA safe areas */ | ||
| [style*="position: fixed"][style*="top: '50%'"] { | ||
| top: max(50%, env(safe-area-inset-top, 0px)) !important; | ||
| } |
There was a problem hiding this comment.
PWA selector won’t match due to quoted value.
Inline styles render as top: 50%, so [style*="top: '50%'"] will never match. This prevents the safe‑area adjustment from applying in PWA mode.
🔧 Proposed fix
- [style*="position: fixed"][style*="top: '50%'"] {
+ [style*="position: fixed"][style*="top: 50%"] {
top: max(50%, env(safe-area-inset-top, 0px)) !important;
}🤖 Prompt for AI Agents
In `@src/styles/responsive.css` around lines 560 - 564, The PWA-safe-area selector
is using a quoted top value and never matches inline styles; update the selector
inside the `@media` (display-mode: standalone) rule so it matches actual inline
styles by replacing the attribute selector [style*="top: '50%'"] with an
unquoted variant that covers common formatting (e.g., [style*="top: 50%"] and/or
[style*="top:50%"]) while keeping the existing [style*="position: fixed"]
condition and the top: max(...) adjustment in the same rule.
2 participants
…ning
Pull Request
Description
Type of Change
Related Issues
Changes Made
Screenshots/Videos
Before
After
Testing
Design System Compliance
#7C85EDappropriately (sparingly)Checklist
Additional Notes
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.