chore: cannonical tailwind classes (#23427)

Author: danieldietzler

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}