From 4743a085f174808fb0fb7a2491db6317a440986b Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 25 May 2025 14:31:24 -0500
Subject: [PATCH] fix: more z-index issue (#18598)

* fix: search suggestion

* fix: play icon lay on top of the search bar
---
 .../assets/thumbnail/video-thumbnail.svelte   | 58 +++++++++----------
 .../navigation-bar/navigation-bar.svelte      |  2 +-
 .../search-bar/search-bar.svelte              |  2 +-
 .../search-bar/search-history-box.svelte      |  8 +--
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index 2c03ca48f8..e2c5ed93c8 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -55,35 +55,6 @@
   };
 </script>
 
-<div class="absolute end-0 top-0 z-1 flex place-items-center gap-1 text-xs font-medium text-white">
-  {#if showTime}
-    <span class="pt-2">
-      {#if remainingSeconds < 60}
-        {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
-      {:else if remainingSeconds < 3600}
-        {Duration.fromObject({ seconds: remainingSeconds }).toFormat('mm:ss')}
-      {:else}
-        {Duration.fromObject({ seconds: remainingSeconds }).toFormat('h:mm:ss')}
-      {/if}
-    </span>
-  {/if}
-
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <span class="pe-2 pt-2" onmouseenter={onMouseEnter} onmouseleave={onMouseLeave}>
-    {#if enablePlayback}
-      {#if loading}
-        <LoadingSpinner />
-      {:else if error}
-        <Icon path={mdiAlertCircleOutline} size="24" class="text-red-600" />
-      {:else}
-        <Icon path={pauseIcon} size="24" />
-      {/if}
-    {:else}
-      <Icon path={playIcon} size="24" />
-    {/if}
-  </span>
-</div>
-
 {#if enablePlayback}
   <video
     bind:this={player}
@@ -114,3 +85,32 @@
     }}
   ></video>
 {/if}
+
+<div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+  {#if showTime}
+    <span class="pt-2">
+      {#if remainingSeconds < 60}
+        {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
+      {:else if remainingSeconds < 3600}
+        {Duration.fromObject({ seconds: remainingSeconds }).toFormat('mm:ss')}
+      {:else}
+        {Duration.fromObject({ seconds: remainingSeconds }).toFormat('h:mm:ss')}
+      {/if}
+    </span>
+  {/if}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <span class="pe-2 pt-2" onmouseenter={onMouseEnter} onmouseleave={onMouseLeave}>
+    {#if enablePlayback}
+      {#if loading}
+        <LoadingSpinner />
+      {:else if error}
+        <Icon path={mdiAlertCircleOutline} size="24" class="text-red-600" />
+      {:else}
+        <Icon path={pauseIcon} size="24" />
+      {/if}
+    {:else}
+      <Icon path={playIcon} size="24" />
+    {/if}
+  </span>
+</div>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index f0e140c8c1..debc268923 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -52,7 +52,7 @@
 
 <svelte:window bind:innerWidth />
 
-<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm overflow-hidden">
+<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm">
   <SkipLink text={$t('skip_to_content')} />
   <div
     class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 2d68f589ed..df67ad7f67 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -214,7 +214,7 @@
   ]}
 />
 
-<div class="w-full relative" use:focusOutside={{ onFocusOut }} tabindex="-1">
+<div class="w-full relative z-2" use:focusOutside={{ onFocusOut }} tabindex="-1">
   <form
     draggable="false"
     autocomplete="off"
diff --git a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
index 2eb0b06d4b..5c4202dd77 100644
--- a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { searchStore } from '$lib/stores/search.svelte';
-  import { mdiMagnify, mdiClose } from '@mdi/js';
-  import { fly } from 'svelte/transition';
+  import { mdiClose, mdiMagnify } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { fly } from 'svelte/transition';
 
   interface Props {
     id: string;
@@ -95,7 +95,7 @@
   {#if isOpen && isSearchSuggestions}
     <div
       transition:fly={{ y: 25, duration: 150 }}
-      class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
+      class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300 z-1"
     >
       <div class="flex items-center justify-between px-5 pt-5 text-xs">
         <p class="py-2" aria-hidden={true}>{$t('recent_searches').toUpperCase()}</p>