fix: respect Android status bar in mobile shell

[Aswanidev-vs]

Summary by CodeRabbit

• Bug Fixes
  • Improved mobile layout handling around device status bars and top safe areas.
  • Prevented mobile header content from being obscured by notches or system UI.
  • Preserved existing horizontal and bottom spacing while applying the appropriate top inset.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity · 0 duplication

Metric	Results
Complexity	0
Duplication	0

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3aaa937a-c5f2-495f-9f33-49eb94d64534

📥 Commits

Reviewing files that changed from the base of the PR and between df693ce and 7f7225d.

📒 Files selected for processing (3)

• build/android/app/src/main/java/com/wails/app/MainActivity.java
• frontend/src/components/layout/AppLayout.vue
• frontend/src/styles/index.css

---

📝 Walkthrough

Walkthrough

The change adds Android status-bar inset handling to the WebView and safe-area-aware top padding to the mobile header.

Changes

Mobile inset handling

Layer / File(s)	Summary
Android WebView inset handling build/android/app/src/main/java/com/wails/app/MainActivity.java	MainActivity listens for window insets and applies the top status-bar inset without changing horizontal or bottom padding.
Mobile header safe-area styling frontend/src/components/layout/AppLayout.vue, frontend/src/styles/index.css	AppLayout uses the mobile-header class. The class applies safe-area-aware top padding and bottom-only spacing.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Android
  participant WebView
  participant AppLayout
  participant CSS
  Android->>WebView: provide top status-bar inset
  WebView->>WebView: preserve horizontal and bottom padding
  WebView->>AppLayout: render mobile layout
  AppLayout->>CSS: apply mobile-header class
  CSS->>AppLayout: apply safe-area-aware top padding

Loading

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch develop

---

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