From 009a1402e64dde87bee1f74d3838b311d83be2e2 Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:37:53 -0400
Subject: [PATCH] fix(web): clip scrollbar overflow in modals (#12526)

---
 .../full-screen-modal.svelte                  | 30 +++++++++++--------
 .../shared-components/modal-header.svelte     |  2 +-
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index be407decde..228d560cab 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -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>
diff --git a/web/src/lib/components/shared-components/modal-header.svelte b/web/src/lib/components/shared-components/modal-header.svelte
index 59c62e0a97..8c81cebe1a 100644
--- a/web/src/lib/components/shared-components/modal-header.svelte
+++ b/web/src/lib/components/shared-components/modal-header.svelte
@@ -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} />