c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-28 22:51:59 +00: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
>
<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 }}
tabindex="-1"
aria-modal="true"
aria-labelledby={titleId}
class:scroll-pb-40={isStickyBottom}
class:sm:scroll-p-24={isStickyBottom}
>
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
<div class="p-5 pt-0">
<slot />
</div>
{#if isStickyBottom}
<div
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"
>
<slot name="sticky-bottom" />
<div
class="immich-scrollbar overflow-y-auto max-h-[min(92dvh,56rem)]"
class:scroll-pb-40={isStickyBottom}
class:sm:scroll-p-24={isStickyBottom}
>
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
<div class="px-5 pt-0" class:pb-5={isStickyBottom}>
<slot />
</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>
</section>

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

@ -21,7 +21,7 @@
export let icon: string | undefined = undefined;
</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">
{#if showLogo}
<ImmichLogo noText={true} width={32} />