From a354f79f54da127748db828af81b3c203066258e Mon Sep 17 00:00:00 2001
From: Kamron Batman <3953314+kamronbatman@users.noreply.github.com>
Date: Fri, 2 Jan 2026 22:17:01 -0800
Subject: [PATCH] fix: Fixes Packet Documentation scrolling on mobile. (#2305)

---
 docs/packets/packets.html  | 19 ++++++++++++++++---
 docs/packets/template.html | 19 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/docs/packets/packets.html b/docs/packets/packets.html
index 128290cf4..067c88b8d 100644
--- a/docs/packets/packets.html
+++ b/docs/packets/packets.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="description" content="Network packet documentation for the Ultima Online Server Emulator ModernUO">
   <meta name="author" content="ModernUO Development Team">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <link rel="icon" href="https://modernuo.com/branding/favicon.png">
   <title>ModernUO Packet Documentation</title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -41,6 +41,19 @@
     }
   </script>
   <style>
+    /* Mobile viewport fix: 100vh doesn't account for browser chrome/gesture nav */
+    .h-dvh {
+      height: 100vh; /* fallback for older browsers */
+      height: 100dvh; /* dynamic viewport height - adjusts for browser chrome */
+    }
+
+    /* Safe area insets for edge-to-edge phones (notches, gesture nav) */
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      .safe-area-bottom {
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
     .packet-list::-webkit-scrollbar {
       width: 8px;
     }
@@ -74,8 +87,8 @@
   </style>
 </head>
 
-<body class="bg-modern-dark-black text-gold-300 font-sans h-screen overflow-hidden">
-<div id="app" class="h-screen flex flex-col">
+<body class="bg-modern-dark-black text-gold-300 font-sans h-dvh overflow-hidden safe-area-bottom">
+<div id="app" class="h-dvh flex flex-col">
   <!-- Header -->
   <header class="bg-modern-black p-3 md:p-4 shadow-lg border-b border-gold-500/30">
     <div class="max-w-7xl mx-auto flex items-center justify-between gap-2">
diff --git a/docs/packets/template.html b/docs/packets/template.html
index a14527caf..f7620def7 100644
--- a/docs/packets/template.html
+++ b/docs/packets/template.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="description" content="Network packet documentation for the Ultima Online Server Emulator ModernUO">
   <meta name="author" content="ModernUO Development Team">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <link rel="icon" href="https://modernuo.com/branding/favicon.png">
   <title>ModernUO Packet Documentation</title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -41,6 +41,19 @@
     }
   </script>
   <style>
+    /* Mobile viewport fix: 100vh doesn't account for browser chrome/gesture nav */
+    .h-dvh {
+      height: 100vh; /* fallback for older browsers */
+      height: 100dvh; /* dynamic viewport height - adjusts for browser chrome */
+    }
+
+    /* Safe area insets for edge-to-edge phones (notches, gesture nav) */
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      .safe-area-bottom {
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
     .packet-list::-webkit-scrollbar {
       width: 8px;
     }
@@ -74,8 +87,8 @@
   </style>
 </head>
 
-<body class="bg-modern-dark-black text-gold-300 font-sans h-screen overflow-hidden">
-<div id="app" class="h-screen flex flex-col">
+<body class="bg-modern-dark-black text-gold-300 font-sans h-dvh overflow-hidden safe-area-bottom">
+<div id="app" class="h-dvh flex flex-col">
   <!-- Header -->
   <header class="bg-modern-black p-3 md:p-4 shadow-lg border-b border-gold-500/30">
     <div class="max-w-7xl mx-auto flex items-center justify-between gap-2">
