Add Safe Area to Drawer (Fixes Issue #508)

[Roaring30s]

Fix Drawer Safe Area on Android

Summary

Fixed the main Drawer component to respect Android safe area insets, preventing footer content (including "What's New" link) from being cut off by the navigation bar.

Fixes #508

Changes Made

• Changed drawer height from 100vh to 100dvh (dynamic viewport height) to account for browser UI changes
• Added env(safe-area-inset-top) to top padding to respect status bar/notch area
• Added env(safe-area-inset-bottom) to bottom padding to prevent content from being obscured by navigation bar
• Updated responsive breakpoint padding to also include safe area insets

Technical Details

• Used CSS calc() to combine design tokens with safe area insets
• Applied 100dvh for dynamic viewport height that adjusts with browser UI
• Safe area insets are automatically provided by the browser based on device characteristics

Files Changed

• components/Drawer/index.tsx

Testing

Tested on Android devices to verify footer content is fully visible and not cut off by the navigation bar.

Before

After

[vercel]

@Roaring30s is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
explorer-arbitrum-one	Ready	Preview, Comment	Feb 19, 2026 11:59pm

[rickstaa]

@Roaring30s thanks for your contribution. Is it possible to ensure the links are visible but keep it aligned at the bottom without the extra space.

[vercel]

Additional Suggestion:

Double bottom padding on Drawer footer links due to marginBottom and paddingBottom both including "$4" spacing