From acc78db86eb46d88ca373e973aedb7110f024f93 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Mon, 23 Feb 2026 08:22:00 -0800
Subject: [PATCH] fix: use h-dvh instead of h-screen on mobile draft board
 (#31)

Replace h-screen (100vh) with h-dvh (100dvh) on the root draft room
container. On mobile browsers, 100vh equals the max viewport height
when the address bar is hidden, causing the page to overflow when the
address bar is visible. 100dvh (dynamic viewport height) correctly
adjusts to the actual visible area at all times.

https://claude.ai/code/session_01GecUeTHw4Mc2ErSYJ6WXae

Co-authored-by: Claude <noreply@anthropic.com>
---
 app/routes/leagues/$leagueId.draft.$seasonId.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
index bd2c2f3..b75b156 100644
--- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
@@ -1092,7 +1092,7 @@ export default function DraftRoom() {
     : null;
 
   return (
-    <div className="h-screen bg-background flex flex-col overflow-hidden">
+    <div className="h-dvh bg-background flex flex-col overflow-hidden">
       {/* Draft Completion Banner */}
       {isDraftComplete && (
         <div className="bg-emerald-500/20 border-b border-emerald-500/30 text-emerald-400 px-4 py-3 text-center font-semibold flex-shrink-0">