fix: more z-index issue (#18598)

* fix: search suggestion

* fix: play icon lay on top of the search bar
This commit is contained in:
Alex 2025-05-25 14:31:24 -05:00 committed by GitHub
parent 911c877e72
commit 4743a085f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 35 additions and 35 deletions

View file

@ -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

View file

@ -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"

View file

@ -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>