tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): sizing of fullscreen modal (#9850)

Browse Source
This commit is contained in:
Michel Heusschen 2024-05-30 12:50:29 +02:00 committed by GitHub
parent 9fc0a0d935
commit 371a5ce0aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/lib/components/shared-components/full-screen-modal.svelte
View File

@ -22,9 +22,9 @@
/** /**
* Sets the width of the modal. * Sets the width of the modal.
* *
* - `wide`: 750px * - `wide`: 48rem
* - `narrow`: 450px * - `narrow`: 28rem
* - `auto`: fits the width of the modal content, up to a maximum of 550px * - `auto`: fits the width of the modal content, up to a maximum of 32rem
*/ */
export let width: 'wide' | 'narrow' | 'auto' = 'narrow'; export let width: 'wide' | 'narrow' | 'auto' = 'narrow';
@ -34,11 +34,11 @@
let modalWidth: string; let modalWidth: string;
$: { $: {
if (width === 'wide') { if (width === 'wide') {
modalWidth = 'w-[750px]'; modalWidth = 'w-[48rem]';
} else if (width === 'narrow') { } else if (width === 'narrow') {
modalWidth = 'w-[450px]'; modalWidth = 'w-[28rem]';
} else { } else {
modalWidth = 'sm:max-w-[550px]'; modalWidth = 'sm:max-w-lg';
} }
} }
</script> </script>
@ -47,15 +47,14 @@
role="presentation" role="presentation"
in:fade={{ duration: 100 }} in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }} out:fade={{ duration: 100 }}
class="fixed left-0 top-0 z-[9999] flex h-screen w-screen place-content-center place-items-center bg-black/40" class="fixed left-0 top-0 z-[9999] flex h-dvh w-screen place-content-center place-items-center bg-black/40"
on:keydown={(event) => { on:keydown={(event) => {
event.stopPropagation(); event.stopPropagation();
}} }}
> >
<FocusTrap> <FocusTrap>
<div <div
class="z-[9999] max-w-[95vw] max-h-[95vh] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar" class="z-[9999] max-w-[95vw] max-h-[min(95dvh,56rem)] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
style="max-height: min(95vh, 900px);"
use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
tabindex="-1" tabindex="-1"
aria-modal="true" aria-modal="true"