add minimal width to the search filter box

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -22,6 +22,7 @@
   export let fullWidth = false;
   export let isOpen = false;
 
+  let searchBar: HTMLElement;
   let input: HTMLInputElement;
 
   let showHistory = false;
@@ -124,6 +125,7 @@
 
 <div
   class={searchBarClasses}
+  bind:this={searchBar}
   transition:animate={{
     x: '50%',
     duration: 350,
@@ -202,6 +204,8 @@
   </form>
 
   {#if showFilter}
-    <SearchFilterBox {searchQuery} on:search={({ detail }) => onSearch(detail)} />
+    <div class="absolute w-full">
+      <SearchFilterBox {searchQuery} {searchBar} on:search={({ detail }) => onSearch(detail)} />
+    </div>
   {/if}
 </div>

web/src/lib/components/shared-components/search-bar/search-filter-box.svelte

@@ -24,18 +24,19 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { AssetTypeEnum, type SmartSearchDto, type MetadataSearchDto } from '@immich/sdk';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import { fly } from 'svelte/transition';
   import SearchPeopleSection from './search-people-section.svelte';
   import SearchLocationSection from './search-location-section.svelte';
-  import SearchCameraSection, { type SearchCameraFilter } from './search-camera-section.svelte';
+  import SearchCameraSection from './search-camera-section.svelte';
   import SearchDateSection from './search-date-section.svelte';
   import SearchMediaSection from './search-media-section.svelte';
   import { parseUtcDate } from '$lib/utils/date-time';
   import SearchDisplaySection from './search-display-section.svelte';
   import SearchTextSection from './search-text-section.svelte';
 
   export let searchQuery: MetadataSearchDto | SmartSearchDto;
+  export let searchBar: HTMLElement;
 
   const parseOptionalDate = (dateString?: string) => (dateString ? parseUtcDate(dateString) : undefined);
   const toStartOfDayDate = (dateString: string) => parseUtcDate(dateString)?.startOf('day').toISODate() || undefined;
@@ -72,6 +73,8 @@
   };
 
   let filterBoxWidth = 0;
+  let filterBoxLeft = 0;
+  let filterBoxMinWidth = 0;
 
   const resetForm = () => {
     filter = {
@@ -111,12 +114,42 @@
 
     dispatch('search', payload);
   };
+
+  const computeWidthAndPosition = () => {
+    const searchBarRect = searchBar.getBoundingClientRect();
+    const minMargin = 50;
+    const minWidth = 750;
+
+    filterBoxLeft = 0;
+    filterBoxMinWidth = 0;
+
+    if (searchBarRect.width < minWidth) {
+      // Larger than the search bar.
+      const maxWidth = Math.max(window.innerWidth - minMargin, 0);
+      filterBoxMinWidth = Math.min(maxWidth, minWidth);
+
+      if (window.innerWidth < 2 * searchBarRect.left + filterBoxMinWidth) {
+        // Window-centered
+        const marginLeft = searchBarRect.left;
+        const marginRight = window.innerWidth - (searchBarRect.left + filterBoxMinWidth);
+        filterBoxLeft = (marginLeft + marginRight) / 2 - marginLeft;
+      }
+    }
+  };
+
+  onMount(() => {
+    computeWidthAndPosition();
+  });
 </script>
 
+<svelte:window on:resize={computeWidthAndPosition} />
+
 <div
   bind:clientWidth={filterBoxWidth}
   transition:fly={{ y: 25, duration: 250 }}
-  class="absolute w-full rounded-b-3xl border border-t-0 border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
+  class="relative w-full -top-[1px] rounded-b-3xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
+  style:left="{filterBoxLeft}px"
+  style:min-width="{filterBoxMinWidth}px"
 >
   <form
     id="search-filter-form"

web/src/lib/components/shared-components/search-bar/search-history-box.svelte

@@ -14,7 +14,7 @@
 
 <div
   transition:fly={{ y: 25, duration: 250 }}
-  class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
+  class="absolute w-full rounded-b-3xl border border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
 >
   {#if $savedSearchTerms.length > 0}
     <div class="flex items-center justify-between px-5 pt-5 text-xs">