From 9561d5a8167affb2da6dde2acca3c1f9b9a25b2b Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Sun, 25 Jan 2026 15:13:02 -0700
Subject: [PATCH] fix(ui): adjust modal positioning for responsive design

Update modal components to start from top on mobile devices and center on larger screens, improving usability across screen sizes. Also refine transition handling in privacy popup for cleaner unmounting.
---
 src/components/AudiobookExportModal.tsx       |  2 +-
 src/components/ConfirmDialog.tsx              |  2 +-
 src/components/DocumentSelectionModal.tsx     |  2 +-
 src/components/DocumentSettings.tsx           |  2 +-
 src/components/SettingsModal.tsx              |  2 +-
 src/components/doclist/CreateFolderDialog.tsx |  2 +-
 src/components/privacy-popup.tsx              | 20 ++++++++++---------
 7 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/AudiobookExportModal.tsx b/src/components/AudiobookExportModal.tsx
index f71cb40..37f320b 100644
--- a/src/components/AudiobookExportModal.tsx
+++ b/src/components/AudiobookExportModal.tsx
@@ -449,7 +449,7 @@ export function AudiobookExportModal({
           </TransitionChild>
 
           <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
               <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index a460afb..cf69efa 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -51,7 +51,7 @@ export function ConfirmDialog({
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
             <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
diff --git a/src/components/DocumentSelectionModal.tsx b/src/components/DocumentSelectionModal.tsx
index e03af18..ffcddfc 100644
--- a/src/components/DocumentSelectionModal.tsx
+++ b/src/components/DocumentSelectionModal.tsx
@@ -154,7 +154,7 @@ export function DocumentSelectionModal({
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
             <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
diff --git a/src/components/DocumentSettings.tsx b/src/components/DocumentSettings.tsx
index 3434417..1f7da3e 100644
--- a/src/components/DocumentSettings.tsx
+++ b/src/components/DocumentSettings.tsx
@@ -131,7 +131,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
           </TransitionChild>
 
           <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
               <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 469eeb8..ca49c22 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -416,7 +416,7 @@ export function SettingsModal({ className = '' }: { className?: string }) {
           </TransitionChild>
 
           <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
               <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
diff --git a/src/components/doclist/CreateFolderDialog.tsx b/src/components/doclist/CreateFolderDialog.tsx
index a3304bd..f17c295 100644
--- a/src/components/doclist/CreateFolderDialog.tsx
+++ b/src/components/doclist/CreateFolderDialog.tsx
@@ -32,7 +32,7 @@ export function CreateFolderDialog({
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
             <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
diff --git a/src/components/privacy-popup.tsx b/src/components/privacy-popup.tsx
index b3b1bb9..17a3bb4 100644
--- a/src/components/privacy-popup.tsx
+++ b/src/components/privacy-popup.tsx
@@ -170,7 +170,7 @@ export function PrivacyPopup({ onAccept, authEnabled = false }: PrivacyPopupProp
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
             <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
@@ -234,16 +234,18 @@ export function showPrivacyPopup(options?: { authEnabled?: boolean }): void {
 
         const handleClose = () => {
           setShow(false);
-          setTimeout(() => {
-            root.unmount();
-            container.remove();
-          }, 300);
         };
 
-        if (!show) return null;
-
         return (
-          <Transition appear show={show} as={Fragment}>
+          <Transition
+            appear
+            show={show}
+            as={Fragment}
+            afterLeave={() => {
+              root.unmount();
+              container.remove();
+            }}
+          >
             <Dialog as="div" className="relative z-50" onClose={handleClose}>
               <TransitionChild
                 as={Fragment}
@@ -258,7 +260,7 @@ export function showPrivacyPopup(options?: { authEnabled?: boolean }): void {
               </TransitionChild>
 
               <div className="fixed inset-0 overflow-y-auto">
-                <div className="flex min-h-full items-center justify-center p-4 text-center">
+                <div className="flex min-h-full items-start justify-center p-4 pt-6 text-center sm:items-center sm:pt-4">
                   <TransitionChild
                     as={Fragment}
                     enter="ease-out duration-300"