From 47b1938f17323958df75f377a72a31fadee14224 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Fri, 9 May 2025 17:10:10 +0200
Subject: [PATCH] fix: search filter modal close (#18180)

---
 web/src/lib/modals/SearchFilterModal.svelte | 71 +++++++++++----------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
index 1b2f32731e..7de6f9984a 100644
--- a/web/src/lib/modals/SearchFilterModal.svelte
+++ b/web/src/lib/modals/SearchFilterModal.svelte
@@ -19,7 +19,6 @@
 </script>
 
 <script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import SearchCameraSection, {
     type SearchCameraFilter,
   } from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
@@ -35,7 +34,7 @@
   import { parseUtcDate } from '$lib/utils/date-time';
   import { generateId } from '$lib/utils/generate-id';
   import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiTune } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
@@ -162,44 +161,50 @@
   });
 </script>
 
-<FullScreenModal icon={mdiTune} width="extra-wide" title={$t('search_options')} {onClose}>
-  <form id={formId} autocomplete="off" {onsubmit} {onreset}>
-    <div class="space-y-10 pb-10" tabindex="-1">
-      <!-- PEOPLE -->
-      <SearchPeopleSection bind:selectedPeople={filter.personIds} />
+<Modal icon={mdiTune} size="giant" title={$t('search_options')} {onClose}>
+  <ModalBody>
+    <form id={formId} autocomplete="off" {onsubmit} {onreset}>
+      <div class="space-y-10 pb-10" tabindex="-1">
+        <!-- PEOPLE -->
+        <SearchPeopleSection bind:selectedPeople={filter.personIds} />
 
-      <!-- TEXT -->
-      <SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} />
+        <!-- TEXT -->
+        <SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} />
 
-      <!-- TAGS -->
-      <SearchTagsSection bind:selectedTags={filter.tagIds} />
+        <!-- TAGS -->
+        <SearchTagsSection bind:selectedTags={filter.tagIds} />
 
-      <!-- LOCATION -->
-      <SearchLocationSection bind:filters={filter.location} />
+        <!-- LOCATION -->
+        <SearchLocationSection bind:filters={filter.location} />
 
-      <!-- CAMERA MODEL -->
-      <SearchCameraSection bind:filters={filter.camera} />
+        <!-- CAMERA MODEL -->
+        <SearchCameraSection bind:filters={filter.camera} />
 
-      <!-- DATE RANGE -->
-      <SearchDateSection bind:filters={filter.date} />
+        <!-- DATE RANGE -->
+        <SearchDateSection bind:filters={filter.date} />
 
-      <!-- RATING -->
-      {#if $preferences?.ratings.enabled}
-        <SearchRatingsSection bind:rating={filter.rating} />
-      {/if}
+        <!-- RATING -->
+        {#if $preferences?.ratings.enabled}
+          <SearchRatingsSection bind:rating={filter.rating} />
+        {/if}
 
-      <div class="grid md:grid-cols-2 gap-x-5 gap-y-10">
-        <!-- MEDIA TYPE -->
-        <SearchMediaSection bind:filteredMedia={filter.mediaType} />
+        <div class="grid md:grid-cols-2 gap-x-5 gap-y-10">
+          <!-- MEDIA TYPE -->
+          <SearchMediaSection bind:filteredMedia={filter.mediaType} />
 
-        <!-- DISPLAY OPTIONS -->
-        <SearchDisplaySection bind:filters={filter.display} />
+          <!-- DISPLAY OPTIONS -->
+          <SearchDisplaySection bind:filters={filter.display} />
+        </div>
       </div>
-    </div>
-  </form>
+    </form>
+  </ModalBody>
 
-  {#snippet stickyBottom()}
-    <Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}>{$t('clear_all')}</Button>
-    <Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
-  {/snippet}
-</FullScreenModal>
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}
+        >{$t('clear_all')}</Button
+      >
+      <Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
+    </div>
+  </ModalFooter>
+</Modal>