diff --git a/web/package-lock.json b/web/package-lock.json
index fee82d718f..10615f4b69 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,7 +11,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
- "@immich/ui": "^0.19.0",
+ "@immich/ui": "^0.19.1",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",
@@ -1320,9 +1320,9 @@
"link": true
},
"node_modules/@immich/ui": {
- "version": "0.19.0",
- "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.19.0.tgz",
- "integrity": "sha512-XVjSUoQVIoe83pxM4q8kmlejb2xep/TZEfoGbasI7takEGKNiWEyXr5eZaXZCSVgq78fcNRr4jyWz290ZAXh7A==",
+ "version": "0.19.1",
+ "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.19.1.tgz",
+ "integrity": "sha512-PyJ+OAEgBu1HTScMMui2KpBjMYkCw3nhVloYorOaB5lKOlNh7mqz5xBCNo/UVwxLXyAOFuBLU05lv3hWNveSKQ==",
"license": "GNU Affero General Public License version 3",
"dependencies": {
"@mdi/js": "^7.4.47",
diff --git a/web/package.json b/web/package.json
index 7c5a0147bb..9edd32f1ad 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,7 +27,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
- "@immich/ui": "^0.19.0",
+ "@immich/ui": "^0.19.1",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index d27361ea75..c7e2fea123 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -3,12 +3,12 @@
</script>
<script lang="ts">
- import { openFileUploadDialog } from '$lib/utils/file-uploader';
- import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
- import SideBar from '../shared-components/side-bar/side-bar.svelte';
- import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
import { useActions, type ActionArray } from '$lib/actions/use-actions';
+ 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,7 +51,7 @@
</header>
<div
tabindex="-1"
- class="relative grid h-dvh grid-cols-[theme(spacing.0)_auto] overflow-hidden bg-immich-bg max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
+ class="relative grid h-[calc(100dvh-var(--navbar-height))] grid-cols-[theme(spacing.0)_auto] overflow-hidden bg-immich-bg dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
>
{#if sidebar}{@render sidebar()}{:else if admin}
<AdminSideBar />
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 c8009a8fd9..53b90798d9 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
@@ -13,6 +13,7 @@
import { AppRoute } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+ import { notificationManager } from '$lib/stores/notification-manager.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { sidebarStore } from '$lib/stores/sidebar.svelte';
import { user } from '$lib/stores/user.store';
@@ -22,11 +23,9 @@
import { mdiBellBadge, mdiBellOutline, mdiHelpCircleOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
- import { fade } from 'svelte/transition';
import ThemeButton from '../theme-button.svelte';
import UserAvatar from '../user-avatar.svelte';
import AccountInfoPanel from './account-info-panel.svelte';
- import { notificationManager } from '$lib/stores/notification-manager.svelte';
interface Props {
showUploadButton?: boolean;
@@ -35,7 +34,6 @@
let { showUploadButton = true, onUploadClick }: Props = $props();
- let shouldShowAccountInfo = $state(false);
let shouldShowAccountInfoPanel = $state(false);
let shouldShowHelpPanel = $state(false);
let shouldShowNotificationPanel = $state(false);
@@ -55,10 +53,7 @@
<HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
{/if}
-<nav
- id="dashboard-navbar"
- class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
->
+<nav id="dashboard-navbar" class="z-auto max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm">
<SkipLink text={$t('skip_to_content')} />
<div
class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
@@ -180,28 +175,14 @@
<button
type="button"
class="flex ps-2"
- onmouseover={() => (shouldShowAccountInfo = true)}
- onfocus={() => (shouldShowAccountInfo = true)}
- onblur={() => (shouldShowAccountInfo = false)}
- onmouseleave={() => (shouldShowAccountInfo = false)}
onclick={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
+ title={`${$user.name} (${$user.email})`}
>
{#key $user}
<UserAvatar user={$user} size="md" showTitle={false} interactive />
{/key}
</button>
- {#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
- <div
- in:fade={{ delay: 500, duration: 150 }}
- out:fade={{ delay: 200, duration: 150 }}
- class="absolute -bottom-12 end-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
- >
- <p>{$user.name}</p>
- <p>{$user.email}</p>
- </div>
- {/if}
-
{#if shouldShowAccountInfoPanel}
<AccountInfoPanel onLogout={() => authManager.logout()} />
{/if}
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
index 62dda02cea..8043023ef0 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
@@ -35,7 +35,7 @@
id="sidebar"
aria-label={ariaLabel}
tabindex="-1"
- class="immich-scrollbar relative z-10 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
+ class="immich-scrollbar relative z-auto w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
class:shadow-2xl={isExpanded}
class:dark:border-e-immich-dark-gray={isExpanded}
class:border-r={isExpanded}
diff --git a/web/src/lib/modals/UserEditModal.svelte b/web/src/lib/modals/UserEditModal.svelte
index d2f56a974a..9981aed3ad 100644
--- a/web/src/lib/modals/UserEditModal.svelte
+++ b/web/src/lib/modals/UserEditModal.svelte
@@ -99,10 +99,10 @@
};
</script>
-<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
+<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose} class="text-dark bg-light">
<ModalBody>
<form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
- <div class="my-4 flex flex-col gap-2">
+ <div class="mb-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">{$t('email')}</label>
<input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
</div>