From 3bec8dc337c5284fd493435ee91e012304cf3f55 Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Fri, 11 Apr 2025 18:09:10 -0400
Subject: [PATCH] refactor: responsive: device units (#17551)

---
 web/src/lib/components/album-page/album-viewer.svelte         | 2 +-
 web/src/lib/components/layouts/AuthPageLayout.svelte          | 2 +-
 web/src/lib/components/layouts/ErrorLayout.svelte             | 2 +-
 .../shared-components/context-menu/context-menu.svelte        | 2 +-
 .../context-menu/right-click-context-menu.svelte              | 2 +-
 .../lib/components/shared-components/full-screen-modal.svelte | 2 +-
 .../shared-components/navigation-bar/navigation-bar.svelte    | 2 +-
 .../shared-components/navigation-loading-bar.svelte           | 2 +-
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte             | 2 +-
 .../[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte    | 2 +-
 .../[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte  | 2 +-
 web/src/routes/(user)/share/[key]/+error.svelte               | 2 +-
 .../share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte | 2 +-
 web/src/routes/+page.svelte                                   | 2 +-
 web/src/routes/auth/onboarding/+page.svelte                   | 4 ++--
 15 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 53040c8417..b9d953340c 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/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">
diff --git a/web/src/lib/components/layouts/AuthPageLayout.svelte b/web/src/lib/components/layouts/AuthPageLayout.svelte
index d469dffa4a..a30202e468 100644
--- a/web/src/lib/components/layouts/AuthPageLayout.svelte
+++ b/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}
diff --git a/web/src/lib/components/layouts/ErrorLayout.svelte b/web/src/lib/components/layouts/ErrorLayout.svelte
index 2479ab47fd..70853939ed 100644
--- a/web/src/lib/components/layouts/ErrorLayout.svelte
+++ b/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">
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index b4bf9043be..976f86d3e5 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/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"
diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
index f7745893db..9b9e68b6c5 100644
--- a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
+++ b/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}
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index 1263aed03b..9284283f54 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/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();
   }}
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 a6a72e842d..f7f9b877f3 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
@@ -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
diff --git a/web/src/lib/components/shared-components/navigation-loading-bar.svelte b/web/src/lib/components/shared-components/navigation-loading-bar.svelte
index f5879cf0a1..bd5f15ae4e 100644
--- a/web/src/lib/components/shared-components/navigation-loading-bar.svelte
+++ b/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}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 149fe0d214..818f48fe4a 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 22a0d82cf4..fe8c45f2f5 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9d0210b6f6..36b59e3ace 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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: () => {
diff --git a/web/src/routes/(user)/share/[key]/+error.svelte b/web/src/routes/(user)/share/[key]/+error.svelte
index 3e1a156571..9103a7710c 100644
--- a/web/src/routes/(user)/share/[key]/+error.svelte
+++ b/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>
diff --git a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index eba0d5ef32..7e6057696a 100644
--- a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index aa89fc0480..c5fabdd36f 100644
--- a/web/src/routes/+page.svelte
+++ b/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" />
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index 9950b0d09d..4c6e0878b6 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/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>