fix: z-index overuse (#18192)

This commit is contained in:
Daniel Dietzler
2025-05-13 16:10:05 +02:00
committed by GitHub
parent 48112d84a3
commit 989d9dbe51
49 changed files with 330 additions and 332 deletions

View File

@@ -11,11 +11,7 @@
<section class="min-w-dvw flex min-h-dvh items-center justify-center relative">
<div class="absolute -z-10 w-full h-full flex place-items-center place-content-center">
<img
src={immichLogo}
class="max-w-screen-md mx-auto h-full mb-2 antialiased -z-10 overflow-hidden"
alt="Immich logo"
/>
<img src={immichLogo} class="max-w-screen-md mx-auto h-full mb-2 antialiased overflow-hidden" alt="Immich logo" />
<div
class="w-full h-[99%] absolute start-0 top-0 backdrop-blur-[200px] bg-transparent dark:bg-immich-dark-bg/20"
></div>

View File

@@ -4,11 +4,11 @@
<script lang="ts">
import { useActions, type ActionArray } from '$lib/actions/use-actions';
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import AdminSideBar from '$lib/components/shared-components/side-bar/admin-side-bar.svelte';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import type { Snippet } from 'svelte';
import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
import SideBar from '../shared-components/side-bar/side-bar.svelte';
interface Props {
hideNavbar?: boolean;
@@ -51,18 +51,24 @@
</header>
<div
tabindex="-1"
class="relative grid grid-cols-[theme(spacing.0)_auto] overflow-hidden sidebar:grid-cols-[theme(spacing.64)_auto]
class="relative z-0 grid grid-cols-[theme(spacing.0)_auto] overflow-hidden sidebar:grid-cols-[theme(spacing.64)_auto]
{hideNavbar ? 'h-dvh' : 'h-[calc(100dvh-var(--navbar-height))]'}
{hideNavbar ? 'pt-[var(--navbar-height)]' : ''}
{hideNavbar ? 'max-md:pt-[var(--navbar-height-md)]' : ''}"
>
{#if sidebar}{@render sidebar()}{:else if admin}
{#if sidebar}
{@render sidebar()}
{:else if admin}
<AdminSideBar />
{:else}
<SideBar />
{/if}
<main class="relative">
<div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
{@render children?.()}
</div>
{#if title || buttons}
<div
class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 dark:border-immich-dark-gray dark:text-immich-dark-fg"
@@ -78,9 +84,5 @@
{@render buttons?.()}
</div>
{/if}
<div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
{@render children?.()}
</div>
</main>
</div>