danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): adjust modal positioning for responsive design

Browse source 
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.
This commit is contained in:
Richard R 2026-01-25 15:13:02 -07:00
parent fb8fc41994
commit 9561d5a816
7 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/AudiobookExportModal.tsx
View file

@ -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"

2
src/components/ConfirmDialog.tsx
View file

@ -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"

2
src/components/DocumentSelectionModal.tsx
View file

@ -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"

2
src/components/DocumentSettings.tsx
View file

@ -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"

2
src/components/SettingsModal.tsx
View file

@ -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"

2
src/components/doclist/CreateFolderDialog.tsx
View file

@ -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"

20
src/components/privacy-popup.tsx
View file

@ -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"