Skip to content

Fix clipped bottom UI in miniapp environments#606

Merged
realproject7 merged 1 commit intomainfrom
task/594-miniapp-bottom-padding
Mar 27, 2026
Merged

Fix clipped bottom UI in miniapp environments#606
realproject7 merged 1 commit intomainfrom
task/594-miniapp-bottom-padding

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

Fixes #594

  • viewport-fit=cover: Add Viewport export to layout.tsx enabling env(safe-area-inset-bottom) in Farcaster miniapp and Base App
  • Reading Mode bottom nav: Add pb-[calc(0.75rem+env(safe-area-inset-bottom))] so prev/contents/next buttons aren't clipped
  • MobileActionBar bottom sheet: Add pb-[calc(1rem+env(safe-area-inset-bottom))] to the expanded panel
  • MobileActionBar fixed bar: Already had safe-area padding (unchanged)
  • Regular mobile browsers and desktop layouts unaffected — env(safe-area-inset-bottom) resolves to 0 without a notch/system bar

Test plan

  • Farcaster miniapp: MobileActionBar buttons fully visible
  • Farcaster miniapp: Reading Mode bottom nav fully visible
  • Base App: same bottom UI fully visible
  • Regular mobile browser: no layout change
  • Desktop: no layout change
  • Build passes

🤖 Generated with Claude Code

Add viewport-fit=cover to enable safe-area insets in miniapps.
Add env(safe-area-inset-bottom) padding to Reading Mode bottom nav
and MobileActionBar bottom sheet panel. MobileActionBar fixed bar
already had safe-area padding. Regular browser/desktop unaffected
(safe-area-inset-bottom resolves to 0).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored Mar 27, 2026 5:19pm

Request Review

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The PR fixes the reported miniapp clipping by enabling safe-area support at the viewport level and applying bottom inset padding to the affected fixed-bottom UI surfaces.

Findings

  • None.

Decision

Approved because the changes are minimal, aligned with issue #594, and preserve regular mobile/desktop behavior by relying on env(safe-area-inset-bottom), which resolves to zero outside miniapp/notched environments.

@realproject7 realproject7 merged commit 8893b09 into main Mar 27, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix bottom nav/action bar clipped in Farcaster miniapp and Base App environments

2 participants