chore: cannonical tailwind classes (#23427)

web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte

@@ -25,7 +25,7 @@
     <p>{$t('admin.storage_template_date_time_description')}</p>
     <p>{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-03T20:03:05.250' } })}</p>
   </div>
-  <div class="flex gap-[40px]">
+  <div class="flex gap-10">
     <div>
       <p class="uppercase font-medium text-primary">{$t('year')}</p>
       <ul>

web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte

@@ -7,7 +7,7 @@
 </div>
 
 <div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
-  <div class="flex gap-[50px]">
+  <div class="flex gap-12">
     <div>
       <p class="uppercase font-medium text-primary">{$t('filename')}</p>
       <ul>

web/src/lib/components/album-page/albums-table-row.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <tr
-  class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
+  class="flex h-12 w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
   onclick={() => goto(resolve(`${AppRoute.ALBUMS}/${album.id}`))}
   {oncontextmenu}
 >

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -141,14 +141,14 @@
                 <UserAvatar user={reaction.user} size="sm" />
               </div>
 
-              <div class="w-full leading-4 overflow-hidden self-center break-words text-sm">{reaction.comment}</div>
+              <div class="w-full leading-4 overflow-hidden self-center wrap-break-word text-sm">{reaction.comment}</div>
               {#if assetId === undefined && reaction.assetId}
                 <a
-                  class="aspect-square w-[75px] h-[75px]"
+                  class="aspect-square w-19 h-19"
                   href={resolve(`${AppRoute.ALBUMS}/${albumId}/photos/${reaction.assetId}`)}
                 >
                   <img
-                    class="rounded-lg w-[75px] h-[75px] object-cover"
+                    class="rounded-lg w-19 h-19 object-cover"
                     src={getAssetThumbnailUrl(reaction.assetId)}
                     alt="Profile picture of {reaction.user.name}, who commented on this asset"
                   />
@@ -197,11 +197,11 @@
                 </div>
                 {#if assetId === undefined && reaction.assetId}
                   <a
-                    class="aspect-square w-[75px] h-[75px]"
+                    class="aspect-square w-19 h-19"
                     href={resolve(`${AppRoute.ALBUMS}/${albumId}/photos/${reaction.assetId}`)}
                   >
                     <img
-                      class="rounded-lg w-[75px] h-[75px] object-cover"
+                      class="rounded-lg w-19 h-19 object-cover"
                       src={getAssetThumbnailUrl(reaction.assetId)}
                       alt="Profile picture of {reaction.user.name}, who liked this asset"
                     />

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -593,7 +593,7 @@
 
             {#if stackedAsset.id === asset.id}
               <div class="w-full flex place-items-center place-content-center">
-                <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]"></div>
+                <div class="w-2 h-2 bg-white rounded-full flex mt-0.5"></div>
               </div>
             {/if}
           </div>

web/src/lib/components/asset-viewer/detail-panel-description.svelte

@@ -31,13 +31,13 @@
   <section class="px-4 mt-10">
     <AutogrowTextarea
       content={description}
-      class="max-h-[500px] w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
+      class="max-h-125 w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
       onContentUpdate={handleFocusOut}
       placeholder={$t('add_a_description')}
     />
   </section>
 {:else if description}
   <section class="px-4 mt-6">
-    <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
+    <p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
   </section>
 {/if}

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -199,7 +199,7 @@
         {#each people as person, index (person.id)}
           {#if showingHiddenPeople || !person.isHidden}
             <a
-              class="w-[90px]"
+              class="w-22"
               href={resolve(
                 `${AppRoute.PEOPLE}/${person.id}?${QueryParameter.PREVIOUS_ROUTE}=${
                   currentAlbum?.id ? `${AppRoute.ALBUMS}/${currentAlbum?.id}` : AppRoute.PHOTOS
@@ -439,7 +439,7 @@
 </section>
 
 {#if latlng && $featureFlags.loaded && $featureFlags.map}
-  <div class="h-[360px]">
+  <div class="h-90">
     {#await import('$lib/components/shared-components/map/map.svelte')}
       {#await delay(timeToLoadTheMap) then}
         <!-- show the loading spinner only if loading the map takes too much time -->
@@ -511,7 +511,7 @@
           <div>
             <img
               alt={album.albumName}
-              class="h-[50px] w-[50px] rounded object-cover"
+              class="h-12.5 w-12.5 rounded object-cover"
               src={album.albumThumbnailAssetId &&
                 getAssetThumbnailUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
               draggable="false"

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -16,10 +16,10 @@
 {#if downloadManager.isDownloading}
   <div
     transition:fly={{ x: -100, duration: 350 }}
-    class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
+    class="fixed bottom-10 start-2 max-h-67.5 w-79 rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
   >
     <Heading size="tiny">{$t('downloading')}</Heading>
-    <div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">
+    <div class="my-2 mb-2 flex max-h-50 flex-col overflow-y-auto text-sm">
       {#each Object.keys(downloadManager.assets) as downloadKey (downloadKey)}
         {@const download = downloadManager.assets[downloadKey]}
         <div class="mb-2 flex place-items-center" transition:slide>
@@ -31,10 +31,10 @@
               {/if}
             </div>
             <div class="flex place-items-center gap-2">
-              <div class="h-[10px] w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
-                <div class="h-[10px] rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
+              <div class="h-2.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
+                <div class="h-2.5 rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
               </div>
-              <p class="min-w-[4em] whitespace-nowrap text-right">
+              <p class="min-w-16 whitespace-nowrap text-right">
                 <span class="text-primary">
                   {(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
                 </span>

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -322,7 +322,7 @@
       <Input placeholder={$t('search_people')} bind:value={searchTerm} size="tiny" />
     </div>
 
-    <div class="h-[250px] overflow-y-auto mt-2">
+    <div class="h-62.5 overflow-y-auto mt-2">
       {#if filteredCandidates.length > 0}
         <div class="mt-2 rounded-lg">
           {#each filteredCandidates as person (person.id)}

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -257,7 +257,7 @@
       <!-- eslint-disable-next-line svelte/require-each-key -->
       {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
         <div
-          class="absolute border-solid border-white border-[3px] rounded-lg"
+          class="absolute border-solid border-white border-3 rounded-lg"
           style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
         ></div>
       {/each}

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -68,7 +68,7 @@
       circle && 'rounded-full',
       shadow && 'shadow-lg',
       (circle || !heightStyle) && 'aspect-square',
-      border && 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary',
+      border && 'border-3 border-immich-dark-primary/80 hover:border-immich-primary',
       brokenAssetClass,
     ]
       .filter(Boolean)

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -232,7 +232,7 @@
   ></div>
 
   <div
-    class={['group absolute -top-[0px] -bottom-[0px]', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
+    class={['group absolute top-0 bottom-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
     style:width="inherit"
     style:height="inherit"
   >

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -73,7 +73,7 @@
 
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 h-full w-[360px] overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
+  class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
 >
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}
@@ -157,7 +157,7 @@
         {#each showPeople as person (person.id)}
           {#if !editedFace.person || person.id !== editedFace.person.id}
             <div class="w-fit">
-              <button type="button" class="w-[90px]" onclick={() => onReassign(person)}>
+              <button type="button" class="w-22.5" onclick={() => onReassign(person)}>
                 <div class="relative">
                   <ImageThumbnail
                     curve

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -103,9 +103,9 @@
       </Button>
     {/snippet}
   </ControlAppBar>
-  <section class="px-[70px] pt-[100px]">
+  <section class="px-17.5 pt-25">
     <section id="merge-face-selector">
-      <div class="mb-10 h-[200px] place-content-center place-items-center">
+      <div class="mb-10 h-50 place-content-center place-items-center">
         <p class="mb-4 text-center uppercase dark:text-white">{$t('choose_matching_people_to_merge')}</p>
 
         <div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -186,7 +186,7 @@
 
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 h-full w-[360px] overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
+  class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">
@@ -222,11 +222,11 @@
       {:else}
         {#each peopleWithFaces as face, index (face.id)}
           {@const personName = face.person ? face.person?.name : $t('face_unassigned')}
-          <div class="relative h-[115px] w-[95px]">
+          <div class="relative h-29 w-24">
             <div
               role="button"
               tabindex={index}
-              class="absolute start-0 top-0 h-[90px] w-[90px] cursor-default"
+              class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
               onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
               onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
               onmouseleave={() => ($boundingBoxesArray = [])}
@@ -302,7 +302,7 @@
                 </p>
               {/if}
 
-              <div class="absolute -end-[3px] -top-[3px] h-[20px] w-[20px] rounded-full">
+              <div class="absolute -end-[3px] -top-[3px] h-5 w-5 rounded-full">
                 {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
                   <IconButton
                     shape="round"
@@ -326,7 +326,7 @@
                   />
                 {/if}
               </div>
-              <div class="absolute end-[33px] -top-[3px] h-[20px] w-[20px] rounded-full">
+              <div class="absolute end-8 -top-[3px] h-5 w-5 rounded-full">
                 {#if !selectedPersonToCreate[face.id] && !selectedPersonToReassign[face.id] && !face.person}
                   <div
                     class="flex place-content-center place-items-center rounded-full bg-[#d3d3d3] p-1 transition-all absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
@@ -336,7 +336,7 @@
                 {/if}
               </div>
               {#if face.person != null}
-                <div class="absolute -end-[3px] top-[33px] h-[20px] w-[20px] rounded-full">
+                <div class="absolute -end-[3px] top-8 h-5 w-5 rounded-full">
                   <IconButton
                     shape="round"
                     color="danger"

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -147,10 +147,10 @@
     {/snippet}
   </ControlAppBar>
   {@render merge?.()}
-  <section class="px-[70px] pt-[100px]">
+  <section class="px-17.5 pt-25">
     <section id="merge-face-selector relative">
       {#if selectedPerson !== null}
-        <div class="mb-10 h-[200px] place-content-center place-items-center">
+        <div class="mb-10 h-50 place-content-center place-items-center">
           <p class="mb-4 text-center uppercase dark:text-white">Choose matching faces to re assign</p>
 
           <div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -156,7 +156,7 @@
     <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
       {#each validatedPaths as validatedPath, listIndex (validatedPath.importPath)}
         <tr
-          class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
+          class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
         >
           <td class="w-1/8 text-ellipsis ps-8 text-sm">
             {#if validatedPath.isValid}
@@ -180,7 +180,7 @@
         </tr>
       {/each}
       <tr
-        class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
+        class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
       >
         <td class="w-4/5 text-ellipsis px-4 text-sm">
           {#if importPaths.length === 0}

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -111,7 +111,7 @@
     <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
       {#each exclusionPatterns as exclusionPattern, listIndex (exclusionPattern)}
         <tr
-          class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
+          class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
         >
           <td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
           <td class="w-1/4 text-ellipsis flex justify-center">
@@ -128,7 +128,7 @@
         </tr>
       {/each}
       <tr
-        class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
+        class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
       >
         <td class="w-3/4 text-ellipsis px-4 text-sm">
           {#if exclusionPatterns.length === 0}

web/src/lib/components/jobs/JobTile.svelte

@@ -53,9 +53,7 @@
   const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pe-4 ps-6';
 </script>
 
-<div
-  class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-[35px]"
->
+<div class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-9">
   <div class="flex w-full flex-col">
     {#if queueStatus.isPaused}
       <JobTileStatus color="warning">{$t('paused')}</JobTileStatus>

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

@@ -24,7 +24,7 @@
   <section>
     <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">
-        <ImmichLogo class="h-[50px]" />
+        <ImmichLogo class="h-12.5" />
       </a>
     </div>
   </section>
@@ -32,7 +32,7 @@
   <div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
     <div>
       <div
-        class="w-[500px] max-w-[95vw] rounded-3xl border shadow-sm dark:border-immich-dark-gray dark:text-immich-dark-fg bg-subtle/80"
+        class="w-125 max-w-[95vw] rounded-3xl border shadow-sm dark:border-immich-dark-gray dark:text-immich-dark-fg bg-subtle/80"
       >
         <div>
           <div class="flex items-center justify-between gap-4 px-4 py-4">
@@ -52,7 +52,7 @@
 
           <hr />
 
-          <div class="immich-scrollbar max-h-[75vh] min-h-[300px] gap-4 overflow-y-auto p-4 pb-4">
+          <div class="immich-scrollbar max-h-[75vh] min-h-75 gap-4 overflow-y-auto p-4 pb-4">
             <div class="flex w-full flex-col gap-2">
               <p class="text-red-500">{error?.message} ({error?.code})</p>
               {#if error?.stack}

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

@@ -372,7 +372,7 @@
       {/snippet}
 
       <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-        <div class="w-[50px] dark">
+        <div class="w-12.5 dark">
           <IconButton
             shape="round"
             variant="ghost"
@@ -385,8 +385,8 @@
 
         {#each current.memory.assets as asset, index (asset.id)}
           <a class="relative w-full py-2" href={asHref(asset)} aria-label={$t('view')}>
-            <span class="absolute start-0 h-[2px] w-full bg-gray-500"></span>
-            <span class="absolute start-0 h-[2px] bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
+            <span class="absolute start-0 h-0.5 w-full bg-gray-500"></span>
+            <span class="absolute start-0 h-0.5 bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
           </a>
         {/each}
 
@@ -397,7 +397,7 @@
         </div>
 
         {#if currentTimelineAssets.some(({ isVideo }) => isVideo)}
-          <div class="w-[50px] dark">
+          <div class="w-12.5 dark">
             <IconButton
               shape="round"
               variant="ghost"
@@ -502,7 +502,7 @@
                   color="secondary"
                   aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
                   onclick={() => handleSaveMemory()}
-                  class="w-[48px] h-[48px]"
+                  class="w-12 h-12"
                 />
                 <!-- <IconButton
                   icon={mdiShareVariantOutline}

web/src/lib/components/onboarding-page/onboarding-hello.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="gap-4">
-  <ImmichLogo noText class="h-[100px] mb-2" />
+  <ImmichLogo noText class="h-25 mb-2" />
   <p class="font-medium mb-6 text-6xl text-primary">
     {$t('onboarding_welcome_user', { values: { user: $user.name } })}
   </p>

web/src/lib/components/photos-page/memory-lane.svelte

@@ -47,10 +47,7 @@
     {#if canScrollLeft || canScrollRight}
       <div class="sticky start-0 z-1">
         {#if canScrollLeft}
-          <div
-            class="absolute start-4 max-md:top-[75px] top-[108px] -translate-y-1/2"
-            transition:fade={{ duration: 200 }}
-          >
+          <div class="absolute start-4 max-md:top-19 top-27 -translate-y-1/2" transition:fade={{ duration: 200 }}>
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -63,10 +60,7 @@
           </div>
         {/if}
         {#if canScrollRight}
-          <div
-            class="absolute end-4 max-md:top-[75px] top-[108px] -translate-y-1/2 z-1"
-            transition:fade={{ duration: 200 }}
-          >
+          <div class="absolute end-4 max-md:top-19 top-27 -translate-y-1/2 z-1" transition:fade={{ duration: 200 }}>
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -83,7 +77,7 @@
     <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
       {#each memoryStore.memories as memory (memory.id)}
         <a
-          class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-[150px] xl:aspect-video h-[216px] rounded-xl"
+          class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-37.5 xl:aspect-video h-54 rounded-xl"
           href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
         >
           <img

web/src/lib/components/places-page/places-card-group.svelte

@@ -43,12 +43,12 @@
         {@const city = item.exifInfo?.city}
         <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city })}" draggable="false">
           <div
-            class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
+            class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-39 justify-center overflow-hidden rounded-xl brightness-75 filter"
           >
             <img
               src={getAssetThumbnailUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
               alt={city}
-              class="object-cover w-[156px] h-[156px]"
+              class="object-cover w-39 h-39"
             />
           </div>
           <span

web/src/lib/components/server-statistics/ServerStatisticsCard.svelte

@@ -20,7 +20,7 @@
   });
 </script>
 
-<div class="flex h-[140px] w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
+<div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
   <div class="flex place-items-center gap-4">
     <Icon {icon} size="40" />
     <Text size="large" fontWeight="bold" class="uppercase">{title}</Text>

web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte

@@ -100,10 +100,10 @@
         </tr>
       </thead>
       <tbody
-        class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
+        class="block max-h-80 w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
         {#each stats.usageByUser as user (user.userId)}
-          <tr class="flex h-[50px] w-full place-items-center text-center even:bg-subtle/20 odd:bg-subtle/80">
+          <tr class="flex h-12.5 w-full place-items-center text-center even:bg-subtle/20 odd:bg-subtle/80">
             <td class="w-1/4 text-ellipsis px-2 text-sm">{user.userName}</td>
             <td class="w-1/4 text-ellipsis px-2 text-sm"
               >{user.photos.toLocaleString($locale)} ({getByteUnitString(user.usagePhotos, $locale, 0)})</td

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -136,7 +136,7 @@
         {/snippet}
       </ControlAppBar>
     {/if}
-    <section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
+    <section class="my-40 mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
       <GalleryViewer {assets} {assetInteraction} {viewport} />
     </section>
   {:else if assets.length === 1}

web/src/lib/components/shared-components/change-location.svelte

@@ -172,7 +172,7 @@
       </div>
 
       <span>{$t('pick_a_location')}</span>
-      <div class="h-[500px] min-h-[300px] w-full z-0">
+      <div class="h-125 min-h-75 w-full z-0">
         {#await import('$lib/components/shared-components/map/map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->

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

@@ -61,7 +61,7 @@
 
 <div
   bind:clientHeight={height}
-  class="fixed min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg z-1"
+  class="fixed min-w-50 w-max max-w-75 overflow-hidden rounded-lg shadow-lg z-1"
   style:left="{left}px"
   style:top="{top}px"
   transition:slide={{ duration: 250, easing: quintOut }}

web/src/lib/components/shared-components/immich-logo-small-link.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-  <ImmichLogo class="h-[50px] max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
+  <ImmichLogo class="h-12.5 max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
 </a>

web/src/lib/components/shared-components/map/map.svelte

@@ -359,7 +359,7 @@
       >
         {#snippet children({ feature })}
           <div
-            class="rounded-full w-[40px] h-[40px] bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
+            class="rounded-full w-10 h-10 bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
           >
             {feature.properties?.point_count?.toLocaleString()}
           </div>
@@ -380,7 +380,7 @@
           {:else}
             <img
               src={getAssetThumbnailUrl(feature.properties?.id)}
-              class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
+              class="rounded-full w-15 h-15 border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
               alt={feature.properties?.city && feature.properties.country
                 ? $t('map_marker_for_images', {
                     values: { city: feature.properties.city, country: feature.properties.country },

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -32,7 +32,7 @@
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
   id="account-info-panel"
-  class="absolute z-1 end-[25px] top-[75px] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
+  class="absolute z-1 end-6 top-19 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   use:focusTrap
 >
   <div

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

@@ -78,7 +78,7 @@
         class="sidebar:hidden"
       />
       <a data-sveltekit-preload-data="hover" href={AppRoute.PHOTOS}>
-        <ImmichLogo class="max-md:h-[48px] h-[50px]" noText={!mobileDevice.isFullSidebar} />
+        <ImmichLogo class="max-md:h-12 h-12.5" noText={!mobileDevice.isFullSidebar} />
       </a>
     </div>
     <div class="flex justify-between gap-4 lg:gap-8 pe-6">

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

@@ -100,7 +100,7 @@
 </script>
 
 <button
-  class="min-h-[80px] p-2 py-3 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 border-b border-gray-200 dark:border-immich-dark-gray w-full"
+  class="min-h-20 p-2 py-3 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 border-b border-gray-200 dark:border-immich-dark-gray w-full"
   type="button"
   onclick={() => onclick(notification)}
   title={notification.createdAt}

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

@@ -66,10 +66,10 @@
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
   id="notification-panel"
-  class="absolute right-[25px] top-[70px] z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light"
+  class="absolute right-6 top-17.5 z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light"
   use:focusTrap
 >
-  <Stack class="max-h-[500px]">
+  <Stack class="max-h-125">
     <div class="flex justify-between items-center mt-4 mx-4">
       <Text size="medium" color="secondary" class="font-semibold">{$t('notifications')}</Text>
       <div>

web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte

@@ -20,7 +20,7 @@
     <p>{$t('purchase_per_user')}</p>
   </div>
 
-  <div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
+  <div class="flex flex-col justify-between h-50 dark:text-immich-gray">
     <div class="mt-6 flex flex-col gap-1">
       <div class="grid grid-cols-[36px_auto]">
         <Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />

web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte

@@ -20,7 +20,7 @@
     <p>{$t('purchase_per_server')}</p>
   </div>
 
-  <div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
+  <div class="flex flex-col justify-between h-50 dark:text-immich-gray">
     <div class="mt-6 flex flex-col gap-1">
       <div class="grid grid-cols-[36px_auto]">
         <Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />

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

@@ -235,7 +235,7 @@
         name="q"
         id="main-search-bar"
         class="w-full transition-all border-2 ps-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg
-        {showClearIcon ? 'pe-[90px]' : 'pe-14'}
+        {showClearIcon ? 'pe-22.5' : 'pe-14'}
         {grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
         {showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
         {searchStore.isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -52,7 +52,7 @@
 </script>
 
 {#await peoplePromise}
-  <div id="spinner" class="flex h-[217px] items-center justify-center -mb-4">
+  <div id="spinner" class="flex h-54 items-center justify-center -mb-4">
     <LoadingSpinner size="large" />
   </div>
 {:then people}

web/src/lib/components/shared-components/settings/setting-checkboxes.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class="mb-4 w-full">
-  <div class="flex h-[26px] place-items-center gap-1">
+  <div class="flex h-6.5 place-items-center gap-1">
     <label class="font-medium text-primary text-sm" for="{name}-select">
       {label}
     </label>

web/src/lib/components/shared-components/settings/setting-combobox.svelte

@@ -30,7 +30,7 @@
 
 <div class="grid grid-cols-2">
   <div>
-    <div class="flex h-[26px] place-items-center gap-1">
+    <div class="flex h-6.5 place-items-center gap-1">
       <label class="font-medium text-primary text-sm" for={title}>
         {title}
       </label>

web/src/lib/components/shared-components/settings/setting-dropdown.svelte

@@ -28,7 +28,7 @@
 
 <div class="flex place-items-center justify-between">
   <div>
-    <div class="flex h-[26px] place-items-center gap-1">
+    <div class="flex h-6.5 place-items-center gap-1">
       <label class="font-medium text-primary text-sm" for={title}>
         {title}
       </label>

web/src/lib/components/shared-components/settings/setting-select.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <div class="mb-4 w-full">
-  <div class="flex h-[26px] place-items-center gap-1">
+  <div class="flex h-6.5 place-items-center gap-1">
     <label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
 
     {#if isEdited}

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -34,7 +34,7 @@
 
 <div class="flex place-items-center justify-between">
   <div class="me-2">
-    <div class="flex h-[26px] place-items-center gap-1">
+    <div class="flex h-6.5 place-items-center gap-1">
       <label class="font-medium text-primary text-sm" for={sliderId}>
         {title}
       </label>

web/src/lib/components/shared-components/settings/setting-textarea.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class="mb-4 w-full">
-  <div class="flex h-[26px] place-items-center gap-1">
+  <div class="flex h-6.5 place-items-center gap-1">
     <label class="font-medium text-primary text-sm" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>

web/src/lib/components/shared-components/settings/settings-language-selector.svelte

@@ -37,7 +37,7 @@
 <div class={showSettingDescription ? 'grid grid-cols-2' : ''}>
   {#if showSettingDescription}
     <div>
-      <div class="flex h-[26px] place-items-center gap-1">
+      <div class="flex h-6.5 place-items-center gap-1">
         <label class="font-medium text-primary text-sm" for={$t('language')}>
           {$t('language')}
         </label>

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -94,7 +94,7 @@
       <div class="flex justify-between w-full place-items-center place-content-center">
         <div class="flex place-items-center place-content-center gap-1">
           <div class="h-6 w-6">
-            <ImmichLogo noText class="h-[24px]" />
+            <ImmichLogo noText class="h-6" />
           </div>
           <p class="flex text-primary font-medium">
             {$t('purchase_button_buy_immich')}
@@ -113,7 +113,7 @@
   {#if showMessage}
     <dialog
       open
-      class="hidden sidebar:block w-[500px] absolute bottom-[75px] start-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl shadow-2xl px-8 py-6"
+      class="hidden sidebar:block w-125 absolute bottom-19 start-64 bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl shadow-2xl px-8 py-6"
       transition:fade={{ duration: 150 }}
       onmouseover={() => (hoverMessage = true)}
       onmouseleave={() => (hoverMessage = false)}
@@ -122,7 +122,7 @@
     >
       <div class="flex justify-between place-items-center">
         <div class="h-10 w-10">
-          <ImmichLogo noText class="h-[32px]" />
+          <ImmichLogo noText class="h-8" />
         </div>
         <IconButton
           shape="round"

web/src/lib/components/shared-components/upload-asset-preview.svelte

@@ -95,8 +95,8 @@
   </div>
 
   {#if uploadAsset.state === UploadState.STARTED}
-    <div class="text-black relative mt-[5px] h-[18px] w-full rounded-md bg-gray-300 dark:bg-gray-700">
-      <div class="h-[18px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
+    <div class="text-black relative mt-[5px] h-4.5 w-full rounded-md bg-gray-300 dark:bg-gray-700">
+      <div class="h-4.5 rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
       <p class="absolute top-0.5 h-full w-full text-center text-white text-[10px]">
         {#if uploadAsset.message === $t('asset_hashing')}
           {uploadAsset.message}

web/src/lib/components/shared-components/upload-panel.svelte

@@ -42,7 +42,7 @@
     {#if showDetail}
       <div
         in:scale={{ duration: 250, easing: quartInOut }}
-        class="w-[325px] rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
+        class="w-81 rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
       >
         <div class="place-item-center mb-4 flex justify-between">
           <div class="flex flex-col gap-1">
@@ -101,8 +101,8 @@
           </div>
         </div>
         {#if showOptions}
-          <div class="immich-scrollbar mb-4 max-h-[400px] overflow-y-auto rounded-lg">
-            <div class="flex h-[26px] place-items-center gap-1">
+          <div class="immich-scrollbar mb-4 max-h-100 overflow-y-auto rounded-lg">
+            <div class="flex h-6.5 place-items-center gap-1">
               <label class="immich-form-label" for="upload-concurrency">{$t('upload_concurrency')}</label>
             </div>
             <input

web/src/lib/components/sidebar/sidebar.spec.ts

@@ -61,7 +61,7 @@ describe('Sidebar component', () => {
     const parent = screen.getByTestId('sidebar-parent');
 
     // then
-    expect(parent.classList).toContain('sidebar:w-[16rem]'); // sets the initial width for page load
+    expect(parent.classList).toContain('sidebar:w-64'); // sets the initial width for page load
     expect(parent.classList).toContain('w-[min(100vw,16rem)]');
     expect(parent.classList).toContain('shadow-2xl');
   });

web/src/lib/components/sidebar/sidebar.svelte

@@ -35,7 +35,7 @@
   id="sidebar"
   aria-label={ariaLabel}
   tabindex="-1"
-  class="immich-scrollbar relative z-1 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden pt-8 transition-all duration-200 bg-light"
+  class="immich-scrollbar relative z-1 w-0 sidebar:w-64 overflow-y-auto overflow-x-hidden pt-8 transition-all duration-200 bg-light"
   class:shadow-2xl={isExpanded}
   class:dark:border-e-immich-dark-gray={isExpanded}
   class:border-r={isExpanded}

web/src/lib/components/timeline/Scrubber.svelte

@@ -528,7 +528,7 @@
   {#if usingMobileDevice && ((timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging)}
     <div
       id="time-label"
-      class="rounded-s-full w-[32px] ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
+      class="rounded-s-full w-8 ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
       style:top="{PADDING_TOP + (scrollY - 50 / 2)}px"
       style:height="50px"
       style:right="0"
@@ -536,15 +536,15 @@
       in:fade={{ duration: 200 }}
       out:fade={{ duration: 200 }}
     >
-      <Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-[2px]" />
-      <Icon icon={mdiPlay} size="20" class="rotate-90 relative top-px -end-[2px]" />
+      <Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-0.5" />
+      <Icon icon={mdiPlay} size="20" class="rotate-90 relative top-px -end-0.5" />
       {#if (timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging}
         <p
           transition:fade={{ duration: 200 }}
           style:bottom={50 / 2 - 30 / 2 + 'px'}
           style:right="36px"
           style:width="fit-content"
-          class="truncate pointer-events-none absolute text-sm rounded-full w-[32px] py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
+          class="truncate pointer-events-none absolute text-sm rounded-full w-8 py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
         >
           {scrollHoverLabel}
         </p>
@@ -553,7 +553,7 @@
   {/if}
   <!-- Scroll Position Indicator Line -->
   {#if !usingMobileDevice && !isDragging}
-    <div class="absolute end-0 h-[2px] w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
+    <div class="absolute end-0 h-0.5 w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
       {#if timelineManager.scrolling && scrollHoverLabel && !isHover}
         <p
           transition:fade={{ duration: 200 }}
@@ -586,7 +586,7 @@
           </div>
         {/if}
         {#if segment.hasDot}
-          <div class="absolute end-3 bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
+          <div class="absolute end-3 bottom-0 h-1 w-1 rounded-full bg-gray-300"></div>
         {/if}
       {/if}
     </div>

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -80,7 +80,7 @@
         <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
           {#each keys as key (key.id)}
             <tr
-              class="flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
+              class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
             >
               <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden">{key.name}</td>
               <td

web/src/lib/elements/Dropdown.svelte

@@ -107,7 +107,7 @@
   {#if showMenu}
     <div
       transition:fly={{ y: -30, duration: 250 }}
-      class="text-sm font-medium z-1 absolute flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
+      class="text-sm font-medium z-1 absolute flex min-w-75 max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
         position,
       )}"
     >

web/src/lib/modals/AlbumEditModal.svelte

@@ -39,7 +39,7 @@
   <ModalBody>
     <form onsubmit={handleSubmit} autocomplete="off" id="edit-album-form">
       <div class="flex items-center gap-8 m-4">
-        <AlbumCover {album} class="h-[200px] w-[200px] shadow-lg hidden sm:flex" />
+        <AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />
 
         <div class="grow flex flex-col gap-4">
           <Field label={$t('name')}>

web/src/lib/modals/AlbumPickerModal.svelte

@@ -148,7 +148,7 @@
 
 <Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
   <ModalBody>
-    <div class="mb-2 flex max-h-[400px] flex-col">
+    <div class="mb-2 flex max-h-100 flex-col">
       {#if loading}
         <!-- eslint-disable-next-line svelte/require-each-key -->
         {#each { length: 3 } as _}

web/src/lib/modals/AlbumShareModal.svelte

@@ -117,7 +117,7 @@
       </p>
     {/if}
 
-    <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
+    <div class="immich-scrollbar max-h-125 overflow-y-auto">
       {#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
         <Text>{$t('users')}</Text>
 

web/src/lib/modals/AlbumUsersModal.svelte

@@ -99,7 +99,7 @@
 
 <Modal title={$t('options')} size="small" {onClose}>
   <ModalBody>
-    <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
+    <section class="immich-scrollbar max-h-100 overflow-y-auto pb-4">
       {#each [{ user: album.owner, role: 'owner' }, ...album.albumUsers] as { user, role } (user.id)}
         <div class="flex w-full place-items-center justify-between gap-4 p-5 rounded-xl transition-colors">
           <div class="flex place-items-center gap-4">

web/src/lib/modals/AppDownloadModal.svelte

@@ -17,21 +17,21 @@
           target="_blank"
           id="play-store-link"
         >
-          <img class="w-[200px] mt-2" alt="Get it on Google Play" src={playStoreBadge} />
+          <img class="w-50 mt-2" alt="Get it on Google Play" src={playStoreBadge} />
         </a>
       </div>
 
       <div class="flex flex-col place-items-start">
         <Text>App Store</Text>
         <a href="https://apps.apple.com/us/app/immich/id1613945652" target="_blank" id="app-store-link">
-          <img class="w-[200px] mt-2" alt="Download on the App Store" src={appStoreBadge} />
+          <img class="w-50 mt-2" alt="Download on the App Store" src={appStoreBadge} />
         </a>
       </div>
 
       <div class="flex flex-col place-items-start">
         <Text>F-Droid</Text>
         <a href="https://f-droid.org/packages/app.alextran.immich/" target="_blank" id="fdroid-link">
-          <img class="w-[200px] mt-2" alt="Get it on F-Droid" src={fdroidBadge} />
+          <img class="w-50 mt-2" alt="Get it on F-Droid" src={fdroidBadge} />
         </a>
       </div>
     </div>

web/src/lib/modals/ObtainiumConfigModal.svelte

@@ -73,7 +73,7 @@
               rel="noreferrer"
               id="obtainium-link"
             >
-              <img class="pt-2 pr-5 h-[80px]" alt="Get it on Obtainium" src={obtainiumBadge} />
+              <img class="pt-2 pr-5 h-20" alt="Get it on Obtainium" src={obtainiumBadge} />
             </a>
           </div>
         </div>

web/src/lib/modals/PartnerSelectionModal.svelte

@@ -36,7 +36,7 @@
 
 <Modal title={$t('add_partner')} {onClose} size="small">
   <ModalBody>
-    <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
+    <div class="immich-scrollbar max-h-75 overflow-y-auto">
       {#if availableUsers.length > 0}
         {#each availableUsers as user (user.id)}
           <button

web/src/lib/modals/ProfileImageCropperModal.svelte

@@ -83,7 +83,7 @@
   <ModalBody>
     <div class="flex place-items-center items-center justify-center">
       <div
-        class="relative flex aspect-square w-[250px] overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
+        class="relative flex aspect-square w-62.5 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
       >
         <PhotoViewer bind:element={imgElement} {asset} />
       </div>

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

@@ -516,8 +516,8 @@
           {/if}
 
           {#if album.assetCount === 0}
-            <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
-              <div class="w-[300px]">
+            <section id="empty-album" class=" mt-50 flex place-content-center place-items-center">
+              <div class="w-75">
                 <p class="uppercase text-xs dark:text-immich-dark-fg">{$t('add_photos')}</p>
                 <button
                   type="button"
@@ -722,7 +722,7 @@
       <div
         transition:fly={{ duration: 150 }}
         id="activity-panel"
-        class="z-2 w-[360px] md:w-[460px] overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
+        class="z-2 w-90 md:w-115 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
         translate="yes"
       >
         <ActivityViewer

web/src/routes/admin/jobs-status/+page.svelte

@@ -95,7 +95,7 @@
     </HStack>
   {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
+    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
       {#if jobs}
         <JobsPanel {jobs} />
       {/if}

web/src/routes/admin/library-management/+page.svelte

@@ -278,7 +278,7 @@
           <tbody class="block overflow-y-auto rounded-md border dark:border-immich-dark-gray">
             {#each libraries as library, index (library.id)}
               <tr
-                class="grid grid-cols-6 h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
+                class="grid grid-cols-6 h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
               >
                 <td class="text-ellipsis px-4 text-sm">{library.name}</td>
                 <td class="text-ellipsis px-4 text-sm">

web/src/routes/admin/server-status/+page.svelte

@@ -28,7 +28,7 @@
 
 <AdminPageLayout title={data.meta.title}>
   <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
+    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
       <ServerStatisticsPanel stats={data.stats} />
     </section>
   </section>

web/src/routes/admin/system-settings/+page.svelte

@@ -285,7 +285,7 @@
   <AdminSettings bind:config bind:this={adminSettingElement}>
     {#snippet children({ savedConfig, defaultConfig })}
       <section id="setting-content" class="flex place-content-center sm:mx-4">
-        <section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
+        <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
           {#if $featureFlags.configFile}
             <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
           {/if}

web/src/routes/admin/users/+page.svelte

@@ -77,7 +77,7 @@
     </HStack>
   {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 lg:w-[850px]">
+    <section class="w-full pb-28 lg:w-212.5">
       <table class="my-5 w-full text-start">
         <thead
           class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
@@ -95,7 +95,7 @@
           {#if allUsers}
             {#each allUsers as immichUser (immichUser.id)}
               <tr
-                class="flex h-[80px] overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {immichUser.deletedAt
+                class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {immichUser.deletedAt
                   ? 'bg-red-300 dark:bg-red-900'
                   : 'even:bg-subtle/20 odd:bg-subtle/80'}"
               >

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

@@ -167,7 +167,7 @@
         style="width: {(onboardingProgress / onboardingStepCount) * 100}%"
       ></div>
     </div>
-    <div class="py-8 flex place-content-center place-items-center m-auto w-[min(100%,_800px)]">
+    <div class="py-8 flex place-content-center place-items-center m-auto w-[min(100%,800px)]">
       <OnboardingCard
         title={onboardingSteps[index].title}
         icon={onboardingSteps[index].icon}