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.