fix(web): form slideovers for mobile views (#1725)

This commit is contained in:
martylukyy 2024-09-17 15:08:11 +02:00 committed by GitHub
parent 45df8a67ee
commit 425c3b21ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 12 additions and 12 deletions

View file

@ -52,9 +52,9 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
return ( return (
<Transition show={isOpen} as={Fragment}> <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"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"

View file

@ -46,9 +46,9 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
return ( return (
<Transition show={isOpen} as={Fragment}> <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"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"

View file

@ -772,7 +772,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
onClose={toggle} onClose={toggle}
> >
<div className="absolute inset-0 overflow-hidden"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
@ -949,7 +949,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
<Dialog <Dialog
as="div" as="div"
static static
className="absolute inset-0 overflow-hidden" className="fixed inset-0 overflow-hidden"
open={isOpen} open={isOpen}
onClose={toggle} onClose={toggle}
initialFocus={cancelButtonRef} 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." text="Are you sure you want to remove this download client? This action cannot be undone."
/> />
<div className="absolute inset-0 overflow-hidden"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"

View file

@ -424,9 +424,9 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
return ( return (
<Transition show={isOpen} as={Fragment}> <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"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"

View file

@ -350,12 +350,12 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
<Dialog <Dialog
as="div" as="div"
static static
className="absolute inset-0 overflow-hidden" className="fixed inset-0 overflow-hidden"
open={isOpen} open={isOpen}
onClose={toggle} onClose={toggle}
> >
<div className="absolute inset-0 overflow-hidden"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"

View file

@ -63,7 +63,7 @@ export function ProxyAddForm({ isOpen, toggle }: AddProps) {
onClose={toggle} onClose={toggle}
> >
<div className="absolute inset-0 overflow-hidden"> <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 <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"