From 425c3b21ef20b490c62e7cfa83eebd8b7c6e8a07 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Tue, 17 Sep 2024 15:08:11 +0200
Subject: [PATCH] fix(web): form slideovers for mobile views (#1725)

---
 web/src/forms/filters/FilterAddForm.tsx        | 4 ++--
 web/src/forms/settings/APIKeyAddForm.tsx       | 4 ++--
 web/src/forms/settings/DownloadClientForms.tsx | 6 +++---
 web/src/forms/settings/IndexerForms.tsx        | 4 ++--
 web/src/forms/settings/NotificationForms.tsx   | 4 ++--
 web/src/forms/settings/ProxyForms.tsx          | 2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/forms/filters/FilterAddForm.tsx b/web/src/forms/filters/FilterAddForm.tsx
index de6c191..cf88479 100644
--- a/web/src/forms/filters/FilterAddForm.tsx
+++ b/web/src/forms/filters/FilterAddForm.tsx
@@ -52,9 +52,9 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
 
   return (
     <Transition show={isOpen} as={Fragment}>
-      <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle} initialFocus={inputRef}>
+      <Dialog as="div" static className="z-20 fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle} initialFocus={inputRef}>
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+          <DialogPanel className="absolute inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
diff --git a/web/src/forms/settings/APIKeyAddForm.tsx b/web/src/forms/settings/APIKeyAddForm.tsx
index 4957316..bb4bad5 100644
--- a/web/src/forms/settings/APIKeyAddForm.tsx
+++ b/web/src/forms/settings/APIKeyAddForm.tsx
@@ -46,9 +46,9 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
 
   return (
     <Transition show={isOpen} as={Fragment}>
-      <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
+      <Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+          <DialogPanel className="absolute inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
diff --git a/web/src/forms/settings/DownloadClientForms.tsx b/web/src/forms/settings/DownloadClientForms.tsx
index d72311d..88e38a8 100644
--- a/web/src/forms/settings/DownloadClientForms.tsx
+++ b/web/src/forms/settings/DownloadClientForms.tsx
@@ -772,7 +772,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
         onClose={toggle}
       >
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+          <DialogPanel className="fixed inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
@@ -949,7 +949,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
       <Dialog
         as="div"
         static
-        className="absolute inset-0 overflow-hidden"
+        className="fixed inset-0 overflow-hidden"
         open={isOpen}
         onClose={toggle}
         initialFocus={cancelButtonRef}
@@ -964,7 +964,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
           text="Are you sure you want to remove this download client? This action cannot be undone."
         />
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+          <DialogPanel className="absolute inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
diff --git a/web/src/forms/settings/IndexerForms.tsx b/web/src/forms/settings/IndexerForms.tsx
index a9c7d3e..dc59339 100644
--- a/web/src/forms/settings/IndexerForms.tsx
+++ b/web/src/forms/settings/IndexerForms.tsx
@@ -424,9 +424,9 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
 
   return (
     <Transition show={isOpen} as={Fragment}>
-      <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
+      <Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="absolute inset-y-0 right-0 pl-10 sm:pl-0 max-w-full flex">
+          <DialogPanel className="absolute inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
diff --git a/web/src/forms/settings/NotificationForms.tsx b/web/src/forms/settings/NotificationForms.tsx
index 8be6a3d..1e4eccc 100644
--- a/web/src/forms/settings/NotificationForms.tsx
+++ b/web/src/forms/settings/NotificationForms.tsx
@@ -350,12 +350,12 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
       <Dialog
         as="div"
         static
-        className="absolute inset-0 overflow-hidden"
+        className="fixed inset-0 overflow-hidden"
         open={isOpen}
         onClose={toggle}
       >
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+          <DialogPanel className="absolute inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
diff --git a/web/src/forms/settings/ProxyForms.tsx b/web/src/forms/settings/ProxyForms.tsx
index c34f5d2..b4603e0 100644
--- a/web/src/forms/settings/ProxyForms.tsx
+++ b/web/src/forms/settings/ProxyForms.tsx
@@ -63,7 +63,7 @@ export function ProxyAddForm({ isOpen, toggle }: AddProps) {
         onClose={toggle}
       >
         <div className="absolute inset-0 overflow-hidden">
-          <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+          <DialogPanel className="absolute inset-y-0 right-0 max-w-full flex">
             <TransitionChild
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"