c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-16 16:56:46 +01:00
Code Releases Activity

fix(web): clip scrollbar overflow in modals (#12526)

Browse source
This commit is contained in:
Ben 2024-09-09 23:37:53 -04:00 committed by GitHub
parent 0dd38c6ec1
commit 009a1402e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -55,24 +55,28 @@
use:focusTrap use:focusTrap
> >
<div <div
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" class="z-[9999] max-w-[95vw] {modalWidth} overflow-hidden rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg pt-3 pb-4"
use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
tabindex="-1" tabindex="-1"
aria-modal="true" aria-modal="true"
aria-labelledby={titleId} aria-labelledby={titleId}
class:scroll-pb-40={isStickyBottom}
class:sm:scroll-p-24={isStickyBottom}
> >
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} /> <div
<div class="p-5 pt-0"> class="immich-scrollbar overflow-y-auto max-h-[min(92dvh,56rem)]"
<slot /> class:scroll-pb-40={isStickyBottom}
</div> class:sm:scroll-p-24={isStickyBottom}
{#if isStickyBottom} >
<div <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow" <div class="px-5 pt-0" class:pb-5={isStickyBottom}>
> <slot />
<slot name="sticky-bottom" />
</div> </div>
{/if} {#if isStickyBottom}
<div
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 pt-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div>
</div> </div>
</section> </section>

2
web/src/lib/components/shared-components/modal-header.svelte
View file

@ -21,7 +21,7 @@
export let icon: string | undefined = undefined; export let icon: string | undefined = undefined;
</script> </script>
<div class="flex place-items-center justify-between px-5 py-3"> <div class="flex place-items-center justify-between px-5 pb-3">
<div class="flex gap-2 place-items-center"> <div class="flex gap-2 place-items-center">
{#if showLogo} {#if showLogo}
<ImmichLogo noText={true} width={32} /> <ImmichLogo noText={true} width={32} />