fix: viewport issue with safe area

[ivan-dalmet]

Describe your changes

Use the NextJS API to declare the viewport and prevent issue with safe area.

Summary by CodeRabbit

• New Features

  • Introduced a refined viewport configuration to enhance responsive behavior across devices.

• Style

  • Updated the approach to viewport sizing for more consistent component heights.
  • Adjusted layout spacing by transitioning top padding to margin, resulting in improved visual alignment and a cleaner overall interface.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
start-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2025 1:09pm
start-ui-web-restart	🔄 Building (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2025 1:09pm

[coderabbitai]

Walkthrough

This pull request updates several components related to viewport configuration and layout. In the Document component, the viewport <meta> tag was removed, and in the layout file a new export named viewport was added with properties for width, initial scale, and viewport fit. Additionally, the viewport component’s styling was adjusted to use 100lvh instead of 100dvh, and the page layout was modified by shifting top spacing from the Flex container to the PageContainer. No changes were made to exported or public API declarations.

Changes

File(s)	Change Summary
src/app/Document.tsx, src/app/layout.tsx	Removed the viewport <meta> tag in Document and introduced a new viewport export with settings (width: 'device-width', initialScale: 1, viewportFit: 'cover') in the layout.
src/components/Viewport/index.tsx	Updated the Flex component's minHeight style property from '100dvh' to '100lvh'.
src/features/app/AppLayoutPage.tsx	Removed pt="safe-top" from the Flex component and added mt="safe-top" to the PageContainer, while retaining the existing padding (pt={4}, pb={16}).

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0eb8a79 and f443a99.

📒 Files selected for processing (4)

• src/app/Document.tsx (0 hunks)
• src/app/layout.tsx (2 hunks)
• src/components/Viewport/index.tsx (1 hunks)
• src/features/app/AppLayoutPage.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• src/app/Document.tsx

🧰 Additional context used

🧬 Code Definitions (1)

src/app/layout.tsx (1)

src/components/Viewport/index.tsx (1)

• Viewport (3-20)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: Playwright E2E Tests

🔇 Additional comments (4)

src/components/Viewport/index.tsx (1)

15-15: Updated viewport height unit for better cross-device compatibility

The change from '100dvh' to '100lvh' helps address viewport issues by using the large viewport height unit instead of the dynamic viewport height. The lvh unit represents the viewport height in "large" mode, which may provide more consistent behavior across devices with UI elements like notches or software keyboards.

src/app/layout.tsx (2)

3-3: Import updated to include Viewport type from Next.js

The import statement has been properly updated to include the Viewport type from Next.js, which will be used to define viewport configuration.

---

18-22: Added Next.js viewport configuration to replace meta tag

This change properly implements the Next.js viewport API to configure the viewport settings. The viewportFit: 'cover' property is particularly important for handling safe areas on devices with notches or rounded corners, directly addressing the PR objective of fixing the safe area issue.

src/features/app/AppLayoutPage.tsx (1)

88-88: Shifted safe area handling from padding to margin

The change from padding to margin (pt="safe-top" to mt="safe-top") on the PageContainer complements the viewport changes by ensuring proper spacing at the top of the layout. This approach typically works better with the viewportFit: 'cover' setting by allowing the content to respect safe areas more naturally.

✨ 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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud