From 45d8181e876f741c8125305728a67f8521abe4df Mon Sep 17 00:00:00 2001
From: "Alec M." <alec.mattu@nih.gov>
Date: Mon, 9 Mar 2026 13:10:46 -0400
Subject: [PATCH] fix: Incorrect mobile responsive behavior

---
 .../OverlayWindow/__snapshots__/index.test.tsx.snap    | 10 +++++-----
 src/components/OverlayWindow/index.tsx                 | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/OverlayWindow/__snapshots__/index.test.tsx.snap b/src/components/OverlayWindow/__snapshots__/index.test.tsx.snap
index 463bdd8..64d6097 100644
--- a/src/components/OverlayWindow/__snapshots__/index.test.tsx.snap
+++ b/src/components/OverlayWindow/__snapshots__/index.test.tsx.snap
@@ -5,17 +5,17 @@ exports[`OverlayWindow > Design > should match the snapshot 1`] = `
   <div
     aria-labelledby="government-usage-dialog-title"
     aria-modal="true"
-    class="fixed inset-0 z-[1200] flex items-center justify-center font-['Roboto']"
+    class="fixed inset-0 z-[1200] flex items-center justify-center p-[32px] font-['Roboto']"
     role="dialog"
   >
     <div
       class="absolute inset-0 bg-[#00000047] pointer-events-none"
     />
     <div
-      class="relative ml-[15px]"
+      class="relative w-full max-w-[770px]"
     >
       <div
-        class="w-[770px] h-[620px] rounded-[5px] bg-white px-[20px] flex flex-col"
+        class="w-full h-[620px] max-h-[calc(100vh-64px)] rounded-[5px] bg-white px-[20px] flex flex-col overflow-hidden"
       >
         <div
           class="py-[15px] pr-[15px] pl-0"
@@ -31,7 +31,7 @@ exports[`OverlayWindow > Design > should match the snapshot 1`] = `
           class="h-px w-full bg-[#e0e0e0]"
         />
         <div
-          class="pt-[20px] text-black text-[14px] flex-1 overflow-auto tracking-[0.00938em]"
+          class="pt-[20px] pb-[12px] text-black text-[14px] flex-1 min-h-0 overflow-auto tracking-[0.00938em]"
         >
           <p
             class="text-[14px] text-black mb-[10px] last:mb-0"
@@ -59,7 +59,7 @@ exports[`OverlayWindow > Design > should match the snapshot 1`] = `
             By using this system, you understand and consent to the following: 
           </p>
           <ul
-            class="mt-0 pt-0 text-[14px] pr-[6px]"
+            class="mt-0 pt-0 text-[14px] pr-[8px]"
           >
             <li
               class="text-[14px] pt-[3px] pl-[26px] flex items-start mt-[7px] first:-mt-[7.5px]"
diff --git a/src/components/OverlayWindow/index.tsx b/src/components/OverlayWindow/index.tsx
index 98ee6be..69a6e94 100644
--- a/src/components/OverlayWindow/index.tsx
+++ b/src/components/OverlayWindow/index.tsx
@@ -54,26 +54,26 @@ const OverlayWindow: React.FC = () => {
 
   return (
     <div
-      className="fixed inset-0 z-[1200] flex items-center justify-center font-['Roboto']"
+      className="fixed inset-0 z-[1200] flex items-center justify-center p-[32px] font-['Roboto']"
       role="dialog"
       aria-labelledby="government-usage-dialog-title"
       aria-modal="true"
     >
       <div className="absolute inset-0 bg-[#00000047] pointer-events-none" />
-      <div className="relative ml-[15px]">
-        <div className="w-[770px] h-[620px] rounded-[5px] bg-white px-[20px] flex flex-col">
+      <div className="relative w-full max-w-[770px]">
+        <div className="w-full h-[620px] max-h-[calc(100vh-64px)] rounded-[5px] bg-white px-[20px] flex flex-col overflow-hidden">
           <div className="py-[15px] pr-[15px] pl-0">
             <h2 id="government-usage-dialog-title" className="text-[22px] text-black font-medium leading-[1.6] tracking-[0.0075em]">
               Warning
             </h2>
           </div>
           <div className="h-px w-full bg-[#e0e0e0]" />
-          <div className="pt-[20px] text-black text-[14px] flex-1 overflow-auto tracking-[0.00938em]">
+          <div className="pt-[20px] pb-[12px] text-black text-[14px] flex-1 min-h-0 overflow-auto tracking-[0.00938em]">
             {content}
             <p className="text-[14px] text-[#000045] mb-[10px] -mt-[0.5px] tracking-[0.14994px]">
               {'By using this system, you understand and consent to the following: '}
             </p>
-            <ul className="mt-0 pt-0 text-[14px] pr-[6px]">
+            <ul className="mt-0 pt-0 text-[14px] pr-[8px]">
               {list}
             </ul>
           </div>