From 0019cf13f33f66c82052de052628c3709febdb43 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:44:44 -0400
Subject: [PATCH] fix(web): modal sticky bottom scrolling

---
 .../components/forms/tag-asset-form.svelte    | 72 +++++++++----------
 .../full-screen-modal.svelte                  | 20 +++---
 web/src/lib/i18n/en.json                      |  2 +-
 3 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/web/src/lib/components/forms/tag-asset-form.svelte b/web/src/lib/components/forms/tag-asset-form.svelte
index 7500a6faac..b318c25320 100644
--- a/web/src/lib/components/forms/tag-asset-form.svelte
+++ b/web/src/lib/components/forms/tag-asset-form.svelte
@@ -49,42 +49,42 @@
       </FormatMessage>
     </p>
   </div>
-  <form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
-    <div class="my-4 flex flex-col gap-2">
-      <Combobox
-        on:select={({ detail: option }) => handleSelect(option)}
-        label={$t('tag')}
-        options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
-        placeholder={$t('search_tags')}
-      />
-    </div>
-  </form>
-
-  <section class="flex flex-wrap pt-2 gap-1">
-    {#each selectedIds as tagId (tagId)}
-      {@const tag = tagMap[tagId]}
-      {#if tag}
-        <div class="flex group transition-all">
-          <span
-            class="inline-block h-min whitespace-nowrap pl-3 pr-1 group-hover:pl-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary rounded-tl-full rounded-bl-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-          >
-            <p class="text-sm">
-              {tag.value}
-            </p>
-          </span>
-
-          <button
-            type="button"
-            class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-tr-full rounded-br-full place-items-center place-content-center pr-2 pl-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            title="Remove tag"
-            on:click={() => handleRemove(tagId)}
-          >
-            <Icon path={mdiClose} />
-          </button>
-        </div>
-      {/if}
-    {/each}
-  </section>
+  <div class="min-h-36">
+    <form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
+      <div class="my-4 flex flex-col gap-2">
+        <Combobox
+          on:select={({ detail: option }) => handleSelect(option)}
+          label={$t('tag')}
+          options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
+          placeholder={$t('search_tags')}
+        />
+      </div>
+    </form>
+    <section class="flex flex-wrap pt-2 gap-1">
+      {#each selectedIds as tagId (tagId)}
+        {@const tag = tagMap[tagId]}
+        {#if tag}
+          <div class="flex group transition-all">
+            <span
+              class="inline-block h-min whitespace-nowrap pl-3 pr-1 group-hover:pl-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary rounded-tl-full rounded-bl-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+            >
+              <p class="text-sm">
+                {tag.value}
+              </p>
+            </span>
+            <button
+              type="button"
+              class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-tr-full rounded-br-full place-items-center place-content-center pr-2 pl-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+              title="Remove tag"
+              on:click={() => handleRemove(tagId)}
+            >
+              <Icon path={mdiClose} />
+            </button>
+          </div>
+        {/if}
+      {/each}
+    </section>
+  </div>
 
   <svelte:fragment slot="sticky-bottom">
     <Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
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 2cecdf74e8..a2e365b012 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -74,22 +74,18 @@
     aria-modal="true"
     aria-labelledby={titleId}
   >
-    <div
-      class="immich-scrollbar overflow-y-auto max-h-[min(92dvh,64rem)]"
-      class:scroll-pb-40={isStickyBottom}
-      class:sm:scroll-p-24={isStickyBottom}
-    >
+    <div class="immich-scrollbar overflow-y-auto max-h-[min(85dvh,44rem)]">
       <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
       <div class="px-5 pt-0" class:pb-5={isStickyBottom}>
         <slot />
       </div>
-      {#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 z-[9999]"
-        >
-          <slot name="sticky-bottom" />
-        </div>
-      {/if}
     </div>
+    {#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"
+      >
+        <slot name="sticky-bottom" />
+      </div>
+    {/if}
   </div>
 </section>
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index e27cc54d52..5122a4ce19 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -1187,7 +1187,7 @@
   "tag_assets": "Tag assets",
   "tag_created": "Created tag: {tag}",
   "tag_feature_description": "Browsing photos and videos grouped by logical tag topics",
-  "tag_not_found_question": "Cannot find a tag? Create one <link>here</link>",
+  "tag_not_found_question": "Cannot find a tag? <link>Create a new tag.</link>",
   "tag_updated": "Updated tag: {tag}",
   "tagged_assets": "Tagged {count, plural, one {# asset} other {# assets}}",
   "tags": "Tags",