refactor: responsive: device units (#17551)

web/src/lib/components/album-page/album-viewer.svelte

@@ -99,7 +99,7 @@
 </header>
 
 <main
-  class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
+  class="relative h-dvh overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
 >
   <AssetGrid enableRouting={true} {album} {assetStore} {assetInteraction}>
     <section class="pt-8 md:pt-24">

web/src/lib/components/layouts/AuthPageLayout.svelte

@@ -9,7 +9,7 @@
   let { title, children }: Props = $props();
 </script>
 
-<section class="min-w-screen flex min-h-dvh items-center justify-center relative">
+<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}

web/src/lib/components/layouts/ErrorLayout.svelte

@@ -21,7 +21,7 @@
   };
 </script>
 
-<div class="h-screen w-screen">
+<div class="h-dvh w-dvw">
   <section class="bg-immich-bg dark:bg-immich-dark-bg">
     <div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
       <a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -66,7 +66,7 @@
     aria-labelledby={ariaLabelledBy}
     bind:this={menuElement}
     class="{isVisible
-      ? 'max-h-screen max-h-svh'
+      ? 'max-h-dvh max-h-svh'
       : 'max-h-0'} flex flex-col transition-all duration-[250ms] ease-in-out outline-none overflow-auto"
     role="menu"
     tabindex="-1"

web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte

@@ -91,7 +91,7 @@
         },
       ]}
     >
-      <section class="fixed left-0 top-0 z-10 flex h-screen w-screen" {oncontextmenu} role="presentation">
+      <section class="fixed left-0 top-0 z-10 flex h-dvh w-dvw" {oncontextmenu} role="presentation">
         <ContextMenu
           {direction}
           {x}

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -77,7 +77,7 @@
   role="presentation"
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
-  class="fixed left-0 top-0 z-[9999] flex h-dvh w-screen place-content-center place-items-center bg-black/40"
+  class="fixed left-0 top-0 z-[9999] flex h-dvh w-dvw place-content-center place-items-center bg-black/40"
   onkeydown={(event) => {
     event.stopPropagation();
   }}

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

@@ -58,7 +58,7 @@
 
 <section
   id="dashboard-navbar"
-  class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-screen text-sm"
+  class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
 >
   <SkipLink text={$t('skip_to_content')} />
   <div

web/src/lib/components/shared-components/navigation-loading-bar.svelte

@@ -26,7 +26,7 @@
 </script>
 
 {#if showing}
-  <div class="absolute left-0 top-0 z-[999999999] h-[3px] w-screen bg-white">
+  <div class="absolute left-0 top-0 z-[999999999] h-[3px] w-dvw bg-white">
     <span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`}></span>
   </div>
 {/if}

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -605,7 +605,7 @@
     {/if}
 
     <main
-      class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
+      class="relative h-dvh overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
     >
       <AssetGrid
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -34,7 +34,7 @@
   };
 </script>
 
-<main class="grid h-screen bg-immich-bg pt-18 dark:bg-immich-dark-bg">
+<main class="grid h-dvh bg-immich-bg pt-18 dark:bg-immich-dark-bg">
   {#if assetInteraction.selectionActive}
     <AssetSelectControlBar
       assets={assetInteraction.selectedAssets}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -486,7 +486,7 @@
 </header>
 
 <main
-  class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
+  class="relative h-dvh overflow-hidden bg-immich-bg tall:ml-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
   use:scrollMemoryClearer={{
     routeStartsWith: AppRoute.PEOPLE,
     beforeClear: () => {

web/src/routes/(user)/share/[key]/+error.svelte

@@ -6,7 +6,7 @@
   <title>Oops! Error - Immich</title>
 </svelte:head>
 
-<section class="flex flex-col px-4 h-screen w-screen place-content-center place-items-center">
+<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
   <h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
   {#if page.error?.message}
     <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>

web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -70,7 +70,7 @@
     </ControlAppBar>
   </header>
   <main
-    class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
+    class="relative h-dvh overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
   >
     <div class="flex flex-col items-center justify-center mt-20">
       <div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>

web/src/routes/+page.svelte

@@ -4,7 +4,7 @@
   import { t } from 'svelte-i18n';
 </script>
 
-<section class="flex h-screen w-screen place-content-center place-items-center">
+<section class="flex h-dvh w-dvw place-content-center place-items-center">
   <div class="flex max-w-[350px] flex-col place-items-center gap-10 text-center">
     <div class="flex place-content-center place-items-center">
       <Logo variant="icon" class="text-center" size="landing" />

web/src/routes/auth/onboarding/+page.svelte

@@ -56,7 +56,7 @@
   const SvelteComponent = $derived(onboardingSteps[index].component);
 </script>
 
-<section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
+<section id="onboarding-page" class="min-w-dvw flex min-h-dvh p-4">
   <div class="flex flex-col w-full">
     <div class="w-full bg-gray-300 dark:bg-gray-600 rounded-md h-2">
       <div
@@ -64,7 +64,7 @@
         style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
       ></div>
     </div>
-    <div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
+    <div class="w-full min-w-dvw py-8 flex h-full place-content-center place-items-center">
       <SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} />
     </div>
   </div>