diff --git a/.vscode/settings.json b/.vscode/settings.json
index eeb80649ba..dbf9688b9b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -26,7 +26,8 @@
   },
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode",
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "tailwindCSS.lint.suggestCanonicalClasses": "ignore"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
diff --git a/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts b/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
index 5069a46a91..c2a3b8e724 100644
--- a/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
+++ b/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
@@ -304,7 +304,7 @@ test.describe('Timeline', () => {
       await page.keyboard.down('Shift');
       await thumbnailUtils.withAssetId(page, assets[2].id).hover();
       await expect(
-        thumbnailUtils.locator(page).locator('.absolute.top-0.h-full.w-full.bg-immich-primary.opacity-40'),
+        thumbnailUtils.locator(page).locator('.absolute.top-0.size-full.bg-immich-primary.opacity-40'),
       ).toHaveCount(3);
       await thumbnailUtils.selectButton(page, assets[2].id).click();
       await page.keyboard.up('Shift');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6de45bf746..f7aa8f33f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -875,7 +875,7 @@ importers:
         specifier: 7.0.0
         version: 7.0.0(svelte@5.55.2)(vite@8.0.10(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       '@tailwindcss/vite':
-        specifier: ^4.2.2
+        specifier: ^4.2.4
         version: 4.2.4(vite@8.0.10(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       '@testing-library/jest-dom':
         specifier: ^6.4.2
@@ -919,6 +919,9 @@ importers:
       eslint-config-prettier:
         specifier: ^10.1.8
         version: 10.1.8(eslint@10.2.1(jiti@2.6.1))
+      eslint-plugin-better-tailwindcss:
+        specifier: ^4.5.0
+        version: 4.5.0(eslint@10.2.1(jiti@2.6.1))(tailwindcss@4.2.4)(typescript@6.0.3)
       eslint-plugin-compat:
         specifier: ^7.0.0
         version: 7.0.1(eslint@10.2.1(jiti@2.6.1))
@@ -956,7 +959,7 @@ importers:
         specifier: ^1.3.3
         version: 1.6.0(svelte@5.55.2)
       tailwindcss:
-        specifier: ^4.2.2
+        specifier: ^4.2.4
         version: 4.2.4
       typescript:
         specifier: ^6.0.0
@@ -2730,6 +2733,10 @@ packages:
     resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/css-tree@4.0.2':
+    resolution: {integrity: sha512-eqSkC3mka2tiqOuPZKqvxNJoRzpxMss3Np3Yqi4sW7nTTRCpTKB2hzrY4JRsi0ZP3QbVfp23sgEm7VCoOjesmw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/js@10.0.1':
     resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -5468,6 +5475,11 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  '@valibot/to-json-schema@1.6.0':
+    resolution: {integrity: sha512-d6rYyK5KVa2XdqamWgZ4/Nr+cXhxjy7lmpe6Iajw15J/jmU+gyxl2IEd1Otg1d7Rl3gOQL5reulnSypzBtYy1A==}
+    peerDependencies:
+      valibot: ^1.3.0
+
   '@vercel/oidc@3.0.5':
     resolution: {integrity: sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw==}
     engines: {node: '>= 20'}
@@ -7329,6 +7341,19 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
+  eslint-plugin-better-tailwindcss@4.5.0:
+    resolution: {integrity: sha512-EBNTx6OJYaWv7uUxHWTy1fhiNz2rZVkoeOHZzAJFwWaEPideBf04CMshrJ7YntG0KQzadlbRhHKYr32q5aBX4w==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+      oxlint: ^1.35.0
+      tailwindcss: ^3.3.0 || ^4.1.17
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      oxlint:
+        optional: true
+
   eslint-plugin-compat@7.0.1:
     resolution: {integrity: sha512-wDID2fVIAfxV9R1uSkCn5HscnNu8yMxDF1IaQGyD1C6XuWwJbuaDgMOSkVgOom0LzY8z0fXXXCy7AQQTERQUvQ==}
     engines: {node: '>=18.x'}
@@ -9052,6 +9077,9 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -11553,6 +11581,15 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
+  tailwind-csstree@0.3.1:
+    resolution: {integrity: sha512-v147gLOR+E+9H4dNaP9rBeS/S/CTQJMRItlX9jLOXjdBGfSRauLwiz7LBCViaQmn6URXIlOdN6iMzSzOaeoUUw==}
+    engines: {node: '>=18.18'}
+    peerDependencies:
+      '@eslint/css': '>=1.0.0'
+    peerDependenciesMeta:
+      '@eslint/css':
+        optional: true
+
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
@@ -12099,6 +12136,14 @@ packages:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
 
+  valibot@1.3.1:
+    resolution: {integrity: sha512-sfdRir/QFM0JaF22hqTroPc5xy4DimuGQVKFrzF1YfGwaS1nJot3Y8VqMdLO2Lg27fMzat2yD3pY5PbAYO39Gg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   validator@13.15.35:
     resolution: {integrity: sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==}
     engines: {node: '>= 0.10'}
@@ -15090,6 +15135,11 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/css-tree@4.0.2':
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
   '@eslint/js@10.0.1(eslint@10.2.1(jiti@2.6.1))':
     optionalDependencies:
       eslint: 10.2.1(jiti@2.6.1)
@@ -17887,6 +17937,10 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
+  '@valibot/to-json-schema@1.6.0(valibot@1.3.1(typescript@6.0.3))':
+    dependencies:
+      valibot: 1.3.1(typescript@6.0.3)
+
   '@vercel/oidc@3.0.5': {}
 
   '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.12.2)(happy-dom@20.9.0)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
@@ -17920,7 +17974,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(@vitest/coverage-v8@4.1.5)(happy-dom@20.9.0)(jsdom@26.1.0(canvas@2.11.2))(vite@8.0.10(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@25.6.0)(@vitest/coverage-v8@4.1.5)(happy-dom@20.9.0)(jsdom@26.1.0(canvas@2.11.2))(vite@8.0.10(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -19977,6 +20031,23 @@ snapshots:
     dependencies:
       eslint: 10.2.1(jiti@2.6.1)
 
+  eslint-plugin-better-tailwindcss@4.5.0(eslint@10.2.1(jiti@2.6.1))(tailwindcss@4.2.4)(typescript@6.0.3):
+    dependencies:
+      '@eslint/css-tree': 4.0.2
+      '@valibot/to-json-schema': 1.6.0(valibot@1.3.1(typescript@6.0.3))
+      enhanced-resolve: 5.21.0
+      jiti: 2.6.1
+      synckit: 0.11.12
+      tailwind-csstree: 0.3.1
+      tailwindcss: 4.2.4
+      tsconfig-paths-webpack-plugin: 4.2.0
+      valibot: 1.3.1(typescript@6.0.3)
+    optionalDependencies:
+      eslint: 10.2.1(jiti@2.6.1)
+    transitivePeerDependencies:
+      - '@eslint/css'
+      - typescript
+
   eslint-plugin-compat@7.0.1(eslint@10.2.1(jiti@2.6.1)):
     dependencies:
       '@mdn/browser-compat-data': 6.1.5
@@ -22094,6 +22165,8 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  mdn-data@2.27.1: {}
+
   media-typer@0.3.0: {}
 
   media-typer@1.1.0: {}
@@ -25150,6 +25223,8 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
+  tailwind-csstree@0.3.1: {}
+
   tailwind-merge@3.5.0: {}
 
   tailwind-variants@3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.4):
@@ -25749,6 +25824,10 @@ snapshots:
 
   uuid@8.3.2: {}
 
+  valibot@1.3.1(typescript@6.0.3):
+    optionalDependencies:
+      typescript: 6.0.3
+
   validator@13.15.35: {}
 
   value-equal@1.0.1: {}
diff --git a/web/eslint.config.js b/web/eslint.config.js
index a75aa9ed05..e457be29ba 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -1,6 +1,7 @@
 import js from '@eslint/js';
 import tslintPluginCompat from '@koddsson/eslint-plugin-tscompat';
 import prettier from 'eslint-config-prettier';
+import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss';
 import eslintPluginCompat from 'eslint-plugin-compat';
 import eslintPluginSvelte from 'eslint-plugin-svelte';
 import eslintPluginUnicorn from 'eslint-plugin-unicorn';
@@ -18,7 +19,6 @@ export default typescriptEslint.config(
   ...eslintPluginSvelte.configs.recommended,
   eslintPluginUnicorn.configs.recommended,
   js.configs.recommended,
-  prettier,
   {
     plugins: {
       tscompat: tslintPluginCompat,
@@ -134,6 +134,18 @@ export default typescriptEslint.config(
     },
   },
   {
+    extends: [eslintPluginBetterTailwindcss.configs.recommended],
+    settings: {
+      'better-tailwindcss': {
+        entryPoint: 'src/app.css',
+      },
+    },
+
+    rules: {
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+      'better-tailwindcss/no-unknown-classes': 'off',
+    },
+
     files: ['**/*.svelte'],
 
     languageOptions: {
diff --git a/web/package.json b/web/package.json
index 32b44a4645..1b4f1c46ed 100644
--- a/web/package.json
+++ b/web/package.json
@@ -76,7 +76,7 @@
     "@sveltejs/enhanced-img": "^0.10.4",
     "@sveltejs/kit": "^2.56.1",
     "@sveltejs/vite-plugin-svelte": "7.0.0",
-    "@tailwindcss/vite": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.5.2",
@@ -91,6 +91,7 @@
     "dotenv": "^17.0.0",
     "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-better-tailwindcss": "^4.5.0",
     "eslint-plugin-compat": "^7.0.0",
     "eslint-plugin-svelte": "^3.12.4",
     "eslint-plugin-unicorn": "^64.0.0",
@@ -104,7 +105,7 @@
     "svelte": "5.55.2",
     "svelte-check": "^4.4.6",
     "svelte-eslint-parser": "^1.3.3",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "typescript": "^6.0.0",
     "typescript-eslint": "^8.45.0",
     "vite": "^8.0.0",
diff --git a/web/src/app.css b/web/src/app.css
index 0a0187f9fd..07226be41f 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,8 +1,38 @@
 @import 'tailwindcss';
 @import '@immich/ui/theme/default.css';
+
 @source "../node_modules/@immich/ui";
 /* @import '../../../ui/packages/ui/dist/theme/default.css'; */
 
+@custom-variant dark (&:where(.dark, .dark *):not(.light));
+
+@theme inline {
+  --color-immich-primary: rgb(var(--immich-primary));
+  --color-immich-bg: rgb(var(--immich-bg));
+  --color-immich-fg: rgb(var(--immich-fg));
+  --color-immich-gray: rgb(var(--immich-gray));
+
+  --color-immich-dark-primary: rgb(var(--immich-dark-primary));
+  --color-immich-dark-bg: rgb(var(--immich-dark-bg));
+  --color-immich-dark-fg: rgb(var(--immich-dark-fg));
+  --color-immich-dark-gray: rgb(var(--immich-dark-gray));
+}
+
+@theme {
+  --font-sans: 'GoogleSans', sans-serif;
+  --font-mono: 'GoogleSansCode', monospace;
+
+  --spacing-18: 4.5rem;
+
+  --breakpoint-tall: 800px;
+  --breakpoint-2xl: 1535px;
+  --breakpoint-xl: 1279px;
+  --breakpoint-lg: 1023px;
+  --breakpoint-md: 767px;
+  --breakpoint-sm: 639px;
+  --breakpoint-sidebar: 850px;
+}
+
 @utility immich-form-input {
   @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base pl-4 pr-4;
 }
@@ -34,35 +64,6 @@
   grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
 }
 
-@custom-variant dark (&:where(.dark, .dark *):not(.light));
-
-@theme inline {
-  --color-immich-primary: rgb(var(--immich-primary));
-  --color-immich-bg: rgb(var(--immich-bg));
-  --color-immich-fg: rgb(var(--immich-fg));
-  --color-immich-gray: rgb(var(--immich-gray));
-
-  --color-immich-dark-primary: rgb(var(--immich-dark-primary));
-  --color-immich-dark-bg: rgb(var(--immich-dark-bg));
-  --color-immich-dark-fg: rgb(var(--immich-dark-fg));
-  --color-immich-dark-gray: rgb(var(--immich-dark-gray));
-}
-
-@theme {
-  --font-sans: 'GoogleSans', sans-serif;
-  --font-mono: 'GoogleSansCode', monospace;
-
-  --spacing-18: 4.5rem;
-
-  --breakpoint-tall: 800px;
-  --breakpoint-2xl: 1535px;
-  --breakpoint-xl: 1279px;
-  --breakpoint-lg: 1023px;
-  --breakpoint-md: 767px;
-  --breakpoint-sm: 639px;
-  --breakpoint-sidebar: 850px;
-}
-
 @layer base {
   :root {
     /* light */
@@ -168,7 +169,7 @@
 
 .maplibregl-popup {
   .maplibregl-popup-tip {
-    @apply border-t-subtle! translate-y-[-1px];
+    @apply border-t-subtle! -translate-y-px;
   }
 
   .maplibregl-popup-content {
diff --git a/web/src/lib/components/AdaptiveImage.svelte b/web/src/lib/components/AdaptiveImage.svelte
index a61fb13029..39bc4516b7 100644
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -148,11 +148,11 @@
   });
 </script>
 
-<div class="relative h-full w-full overflow-hidden" bind:this={ref}>
+<div class="relative size-full overflow-hidden" bind:this={ref}>
   {@render backdrop?.()}
 
   <div
-    class="absolute inset-0 pointer-events-none"
+    class="pointer-events-none absolute inset-0"
     style:inset-inline-start={insetInlineStart}
     style:top
     style:width
@@ -165,7 +165,7 @@
     {#if show.thumbhash}
       {#if asset.thumbhash}
         <!-- Thumbhash / spinner layer  -->
-        <Thumbhash base64ThumbHash={asset.thumbhash} class="h-full w-full absolute" />
+        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
       {:else if show.spinner}
         <DelayedLoadingSpinner />
       {/if}
@@ -185,7 +185,7 @@
     {/if}
 
     {#if show.brokenAsset}
-      <BrokenAsset class="text-xl h-full w-full absolute" />
+      <BrokenAsset class="absolute size-full text-xl" />
     {/if}
 
     {#if show.preview}
diff --git a/web/src/lib/components/AdminCard.svelte b/web/src/lib/components/AdminCard.svelte
index 4aaf890ca4..02f1195ddb 100644
--- a/web/src/lib/components/AdminCard.svelte
+++ b/web/src/lib/components/AdminCard.svelte
@@ -15,7 +15,7 @@
 
 <Card color="secondary">
   <CardHeader>
-    <div class="flex w-full justify-between items-center px-4 py-2">
+    <div class="flex w-full items-center justify-between px-4 py-2">
       <div class="flex gap-2 text-primary">
         <Icon {icon} size="1.5rem" />
         <CardTitle>{title}</CardTitle>
diff --git a/web/src/lib/components/ApiKeyPermissionsPicker.svelte b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
index 62283bcf74..859c20da80 100644
--- a/web/src/lib/components/ApiKeyPermissionsPicker.svelte
+++ b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <Label label={$t('permission')} for="permission-container" />
-<div class="flex items-center gap-2 m-4" id="permission-container">
+<div class="m-4 flex items-center gap-2" id="permission-container">
   <Checkbox id="input-select-all" size="tiny" checked={allItemsSelected} onCheckedChange={onCheckedAllChange} />
   <Label label={$t('select_all')} for="input-select-all" />
 </div>
diff --git a/web/src/lib/components/BreadcrumbActionPage.svelte b/web/src/lib/components/BreadcrumbActionPage.svelte
index cdde67b725..b47c189881 100644
--- a/web/src/lib/components/BreadcrumbActionPage.svelte
+++ b/web/src/lib/components/BreadcrumbActionPage.svelte
@@ -30,8 +30,8 @@
   );
 </script>
 
-<div class="h-full flex flex-col">
-  <div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2">
+<div class="flex h-full flex-col">
+  <div class="flex h-16 w-full items-center justify-between border-b px-4 py-2 md:px-2">
     <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
 
     {#if enabledActions.length > 0}
diff --git a/web/src/lib/components/ImageLayer.svelte b/web/src/lib/components/ImageLayer.svelte
index ea8360df56..1ac854259d 100644
--- a/web/src/lib/components/ImageLayer.svelte
+++ b/web/src/lib/components/ImageLayer.svelte
@@ -36,7 +36,7 @@
       onLoad={() => adaptiveImageLoader.onLoad(quality)}
       onError={() => adaptiveImageLoader.onError(quality)}
       bind:ref
-      class="h-full w-full bg-transparent pointer-events-auto"
+      class="pointer-events-auto size-full bg-transparent"
       {alt}
       {role}
       draggable={false}
diff --git a/web/src/lib/components/SharedLinkExpiration.svelte b/web/src/lib/components/SharedLinkExpiration.svelte
index 25ee96242a..5dea4c5392 100644
--- a/web/src/lib/components/SharedLinkExpiration.svelte
+++ b/web/src/lib/components/SharedLinkExpiration.svelte
@@ -58,7 +58,7 @@
     <DatePicker bind:value={getSelectedDate, setSelectedDate} />
   </Field>
 
-  <div class="flex flex-wrap gap-2 mt-2">
+  <div class="mt-2 flex flex-wrap gap-2">
     {#each expiredDateOptions as option (option.value)}
       <Button
         size="tiny"
diff --git a/web/src/lib/components/SharedLinkFormFields.svelte b/web/src/lib/components/SharedLinkFormFields.svelte
index 42019fe54e..cb371fd800 100644
--- a/web/src/lib/components/SharedLinkFormFields.svelte
+++ b/web/src/lib/components/SharedLinkFormFields.svelte
@@ -30,7 +30,7 @@
   });
 </script>
 
-<div class="flex flex-col gap-4 mt-4">
+<div class="mt-4 flex flex-col gap-4">
   <div>
     <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
       <Input bind:value={slug} autocomplete="off" />
diff --git a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
index 3cce0ffd3b..9d99e86a42 100644
--- a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
+++ b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
@@ -106,7 +106,7 @@
   });
 </script>
 
-<section class="dark:text-immich-dark-fg mt-2">
+<section class="mt-2 dark:text-immich-dark-fg">
   <div in:fade={{ duration }} class="mx-4 flex flex-col gap-4 py-4">
     <p class="text-sm dark:text-immich-dark-fg">
       <FormatMessage key="admin.storage_template_more_details">
@@ -164,7 +164,7 @@
           <SupportedVariablesPanel />
         </section>
 
-        <div class="flex flex-col mt-2">
+        <div class="mt-2 flex flex-col">
           <!-- <h3 class="text-base font-medium text-primary">{$t('template')}</h3> -->
           <Heading size="tiny" color="primary">
             {$t('template')}
@@ -199,20 +199,20 @@
             </FormatMessage>
           </p>
 
-          <p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
+          <p class="mt-2 rounded-lg bg-gray-200 p-4 py-2 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
             <span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
               >UPLOAD_LOCATION/library/{authManager.user.storageLabel || authManager.user.id}</span
             >/{parsedTemplate()}.jpg
           </p>
 
           <form autocomplete="off" class="flex flex-col" onsubmit={preventDefault(bubble('submit'))}>
-            <div class="flex flex-col my-2">
+            <div class="my-2 flex flex-col">
               {#if templateOptions}
-                <label class="font-medium text-primary text-sm" for="preset-select">
+                <label class="text-sm font-medium text-primary" for="preset-select">
                   {$t('preset')}
                 </label>
                 <select
-                  class="immich-form-input p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
+                  class="mt-2 immich-form-input rounded-lg bg-slate-200 p-2 text-sm hover:cursor-pointer dark:bg-gray-600"
                   disabled={disabled || !configToEdit.storageTemplate.enabled}
                   name="presets"
                   id="preset-select"
diff --git a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
index c22d3cb792..d91e15cffd 100644
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
@@ -27,7 +27,7 @@
 
 <Text size="small">{$t('date_and_time')}</Text>
 
-<Card class="mt-2 text-sm bg-light-50 shadow-none">
+<Card class="mt-2 bg-light-50 text-sm shadow-none">
   <CardHeader>
     <Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text>
     <Text color="primary"
diff --git a/web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte b/web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte
index f46f33860a..d074d3e696 100644
--- a/web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte
@@ -5,7 +5,7 @@
 
 <Text size="small">{$t('other_variables')}</Text>
 
-<Card class="mt-2 text-sm bg-light-50 shadow-none">
+<Card class="mt-2 bg-light-50 text-sm shadow-none">
   <CardBody>
     <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
       <div>
diff --git a/web/src/lib/components/album-page/AlbumCard.svelte b/web/src/lib/components/album-page/AlbumCard.svelte
index 621de983eb..cdb7e9e27c 100644
--- a/web/src/lib/components/album-page/AlbumCard.svelte
+++ b/web/src/lib/components/album-page/AlbumCard.svelte
@@ -34,13 +34,13 @@
 </script>
 
 <div
-  class="group relative rounded-2xl border border-transparent p-5 hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
+  class="group relative rounded-2xl border border-transparent p-5 hover:border-gray-200 hover:bg-gray-100 dark:hover:border-gray-800 dark:hover:bg-gray-900"
   data-testid="album-card"
 >
   {#if onShowContextMenu}
     <div
       id="icon-{album.id}"
-      class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
+      class="absolute inset-e-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
       data-testid="context-button-parent"
     >
       <IconButton
@@ -60,7 +60,7 @@
 
   <div class="mt-4">
     <p
-      class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-primary"
+      class="line-clamp-2 w-full text-lg/6 font-semibold text-black group-hover:text-primary dark:text-white"
       data-testid="album-name"
       title={album.albumName}
     >
@@ -68,7 +68,7 @@
     </p>
 
     {#if showDateRange && album.startDate && album.endDate}
-      <p class="flex text-sm dark:text-immich-dark-fg capitalize">
+      <p class="flex text-sm capitalize dark:text-immich-dark-fg">
         {getShortDateRange(album.startDate, album.endDate)}
       </p>
     {/if}
diff --git a/web/src/lib/components/album-page/AlbumCardGroup.svelte b/web/src/lib/components/album-page/AlbumCardGroup.svelte
index 778f04872e..0a3635ec3a 100644
--- a/web/src/lib/components/album-page/AlbumCardGroup.svelte
+++ b/web/src/lib/components/album-page/AlbumCardGroup.svelte
@@ -48,11 +48,11 @@
     <button
       type="button"
       onclick={() => toggleAlbumGroupCollapsing(group.id)}
-      class="w-full text-start mt-2 pt-2 pe-2 pb-2 rounded-md transition-colors cursor-pointer dark:text-immich-dark-fg hover:text-primary hover:bg-subtle dark:hover:bg-immich-dark-gray"
+      class="mt-2 w-full cursor-pointer rounded-md py-2 pe-2 text-start transition-colors hover:bg-subtle hover:text-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray"
       aria-expanded={!isCollapsed}
     >
-      <Icon icon={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" />
-      <span class="font-bold text-3xl text-black dark:text-white">{group.name}</span>
+      <Icon icon={mdiChevronRight} size="24" class="-mt-2.5 inline-block transition-all duration-250 {iconRotation}" />
+      <span class="text-3xl font-bold text-black dark:text-white">{group.name}</span>
       <span class="ms-1.5">({$t('albums_count', { values: { count: albums.length } })})</span>
     </button>
     <hr class="dark:border-immich-dark-gray" />
diff --git a/web/src/lib/components/album-page/AlbumSharedLink.svelte b/web/src/lib/components/album-page/AlbumSharedLink.svelte
index 0969b60d29..30e38c3341 100644
--- a/web/src/lib/components/album-page/AlbumSharedLink.svelte
+++ b/web/src/lib/components/album-page/AlbumSharedLink.svelte
@@ -34,7 +34,7 @@
   const { ViewQrCode, Copy, Delete } = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
-<div class="flex justify-between items-center">
+<div class="flex items-center justify-between">
   <div class="flex flex-col gap-1">
     <Text size="small">{sharedLink.description || album.albumName}</Text>
     <Text size="tiny" color="muted">{getShareProperties()}</Text>
diff --git a/web/src/lib/components/album-page/AlbumViewer.svelte b/web/src/lib/components/album-page/AlbumViewer.svelte
index 98e251be30..85a032067f 100644
--- a/web/src/lib/components/album-page/AlbumViewer.svelte
+++ b/web/src/lib/components/album-page/AlbumViewer.svelte
@@ -70,11 +70,11 @@
   }}
 />
 
-<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
+<main class="relative h-dvh overflow-hidden px-2 pt-(--navbar-height) max-md:pt-(--navbar-height-md) md:px-6">
   <Timeline enableRouting={true} {album} bind:timelineManager {options} assetInteraction={assetMultiSelectManager}>
-    <section class="pt-8 md:pt-24 px-2 md:px-0">
+    <section class="px-2 pt-8 md:px-0 md:pt-24">
       <!-- ALBUM TITLE -->
-      <h1 class="text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all">
+      <h1 class="text-2xl text-primary transition-all outline-none md:text-4xl lg:text-6xl">
         {album.albumName}
       </h1>
 
@@ -85,7 +85,7 @@
       <!-- ALBUM DESCRIPTION -->
       {#if album.description}
         <p
-          class="whitespace-pre-line mb-12 mt-6 w-full pb-2 text-start font-medium text-base text-black dark:text-gray-300"
+          class="mt-6 mb-12 w-full pb-2 text-start text-base font-medium whitespace-pre-line text-black dark:text-gray-300"
         >
           {album.description}
         </p>
diff --git a/web/src/lib/components/album-page/AlbumsTable.svelte b/web/src/lib/components/album-page/AlbumsTable.svelte
index b41b79ca16..e73b4a170f 100644
--- a/web/src/lib/components/album-page/AlbumsTable.svelte
+++ b/web/src/lib/components/album-page/AlbumsTable.svelte
@@ -45,20 +45,20 @@
       {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
       {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
       <tbody
-        class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4"
+        class="mt-4 block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
         <tr
-          class="flex w-full place-items-center p-2 md:ps-5 md:pe-5 md:pt-3 md:pb-3"
+          class="flex w-full place-items-center p-2 md:py-3 md:ps-5 md:pe-5"
           onclick={() => toggleAlbumGroupCollapsing(albumGroup.id)}
           aria-expanded={!isCollapsed}
         >
-          <td class="text-md text-start -mb-1">
+          <td class="text-md -mb-1 text-start">
             <Icon
               icon={mdiChevronRight}
               size="20"
-              class="inline-block -mt-2 transition-all duration-250 {iconRotation}"
+              class="-mt-2 inline-block transition-all duration-250 {iconRotation}"
             />
-            <span class="font-bold text-2xl">{albumGroup.name}</span>
+            <span class="text-2xl font-bold">{albumGroup.name}</span>
             <span class="ms-1.5">
               ({$t('albums_count', { values: { count: albumGroup.albums.length } })})
             </span>
@@ -67,7 +67,7 @@
       </tbody>
       {#if !isCollapsed}
         <tbody
-          class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4"
+          class="mt-4 block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
           transition:slide={{ duration: 300 }}
         >
           {#each albumGroup.albums as album (album.id)}
diff --git a/web/src/lib/components/album-page/AlbumsTableRow.svelte b/web/src/lib/components/album-page/AlbumsTableRow.svelte
index 0dde44511b..cb309c01df 100644
--- a/web/src/lib/components/album-page/AlbumsTableRow.svelte
+++ b/web/src/lib/components/album-page/AlbumsTableRow.svelte
@@ -32,17 +32,17 @@
 </script>
 
 <tr
-  class="flex 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:px-5 md:py-2"
+  class="flex w-full place-items-center border-3 border-transparent p-2 text-center odd:bg-subtle/80 even:bg-subtle/20 hover:cursor-pointer hover:border-immich-primary/75 md:px-5 md:py-2 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75"
   onclick={() => goto(Route.viewAlbum(album))}
   {oncontextmenu}
 >
-  <td class="text-md text-ellipsis text-start w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%] items-center">
+  <td class="text-md w-8/12 items-center text-start text-ellipsis sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]">
     {album.albumName}
     {#if album.shared}
       <Icon
         icon={mdiShareVariantOutline}
         size="16"
-        class="inline ms-1 opacity-70"
+        class="ms-1 inline opacity-70"
         title={album.albumUsers.find(({ user: { id } }) => id === authManager.user.id)?.role === AlbumUserRole.Owner
           ? $t('shared_by_you')
           : $t('shared_by_user', {
@@ -51,23 +51,23 @@
       />
     {/if}
   </td>
-  <td class="text-md text-ellipsis text-center sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md text-center text-ellipsis sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
     {$t('items_count', { values: { count: album.assetCount } })}
   </td>
-  <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden w-3/12 text-center text-ellipsis sm:block xl:w-[15%] 2xl:w-[12%]">
     {dateLocaleString(album.updatedAt)}
   </td>
-  <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden w-3/12 text-center text-ellipsis sm:block xl:w-[15%] 2xl:w-[12%]">
     {dateLocaleString(album.createdAt)}
   </td>
-  <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden text-center text-ellipsis xl:block xl:w-[15%] 2xl:w-[12%]">
     {#if album.endDate}
       {dateLocaleString(album.endDate)}
     {:else}
       -
     {/if}
   </td>
-  <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden text-center text-ellipsis xl:block xl:w-[15%] 2xl:w-[12%]">
     {#if album.startDate}
       {dateLocaleString(album.startDate)}
     {:else}
diff --git a/web/src/lib/components/asset-viewer/ActivityStatus.svelte b/web/src/lib/components/asset-viewer/ActivityStatus.svelte
index 617f89bc29..34e3c482af 100644
--- a/web/src/lib/components/asset-viewer/ActivityStatus.svelte
+++ b/web/src/lib/components/asset-viewer/ActivityStatus.svelte
@@ -16,7 +16,7 @@
   let { isLiked, numberOfComments, numberOfLikes, disabled, onFavorite }: Props = $props();
 </script>
 
-<div class="flex p-1 items-center justify-center rounded-full gap-1 bg-subtle/70 border">
+<div class="flex items-center justify-center gap-1 rounded-full border bg-subtle/70 p-1">
   <Button
     {disabled}
     onclick={onFavorite}
diff --git a/web/src/lib/components/asset-viewer/ActivityViewer.svelte b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
index b59bdafad8..cd952fe08b 100644
--- a/web/src/lib/components/asset-viewer/ActivityViewer.svelte
+++ b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
@@ -110,9 +110,9 @@
   };
 </script>
 
-<div class="overflow-y-hidden relative h-full border-l border-subtle bg-subtle" bind:offsetHeight={innerHeight}>
-  <div class="w-full h-full">
-    <div class="flex w-full h-fit dark:text-immich-dark-fg p-2 bg-subtle" bind:clientHeight={activityHeight}>
+<div class="relative h-full overflow-y-hidden border-l border-subtle bg-subtle" bind:offsetHeight={innerHeight}>
+  <div class="size-full">
+    <div class="flex h-fit w-full bg-subtle p-2 dark:text-immich-dark-fg" bind:clientHeight={activityHeight}>
       <div class="flex place-items-center gap-2">
         <IconButton
           shape="round"
@@ -128,21 +128,21 @@
     </div>
     {#if innerHeight}
       <div
-        class="overflow-y-auto immich-scrollbar relative w-full px-2"
+        class="relative w-full overflow-y-auto px-2 immich-scrollbar"
         style="height: {divHeight}px;padding-bottom: {chatHeight}px"
       >
         {#each activityManager.activities as reaction, index (reaction.id)}
           {#if reaction.type === ReactionType.Comment}
-            <div class="flex dark:bg-gray-800 bg-gray-200 py-3 ps-3 mt-3 rounded-lg gap-4 justify-start">
+            <div class="mt-3 flex justify-start gap-4 rounded-lg bg-gray-200 py-3 ps-3 dark:bg-gray-800">
               <div class="flex items-center">
                 <UserAvatar user={reaction.user} size="sm" />
               </div>
 
-              <div class="w-full leading-4 overflow-hidden self-center wrap-break-word text-sm">{reaction.comment}</div>
+              <div class="w-full self-center overflow-hidden text-sm/4 wrap-break-word">{reaction.comment}</div>
               {#if assetId === undefined && reaction.assetId}
-                <a class="aspect-square w-19 h-19" href={Route.viewAlbumAsset({ albumId, assetId: reaction.assetId })}>
+                <a class="aspect-square size-19" href={Route.viewAlbumAsset({ albumId, assetId: reaction.assetId })}>
                   <img
-                    class="rounded-lg w-19 h-19 object-cover"
+                    class="size-19 rounded-lg object-cover"
                     src={getAssetMediaUrl({ id: reaction.assetId })}
                     alt="Profile picture of {reaction.user.name}, who commented on this asset"
                   />
@@ -170,7 +170,7 @@
 
             {#if (index != activityManager.activities.length - 1 && !shouldGroup(activityManager.activities[index].createdAt, activityManager.activities[index + 1].createdAt)) || index === activityManager.activities.length - 1}
               <div
-                class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
+                class="w-full px-2 pt-1 text-right text-sm text-gray-500 dark:text-gray-300"
                 title={new Date(reaction.createdAt).toLocaleDateString(undefined, timeOptions)}
               >
                 {timeSince(luxon.DateTime.fromISO(reaction.createdAt, { locale: $locale }))}
@@ -178,7 +178,7 @@
             {/if}
           {:else if reaction.type === ReactionType.Like}
             <div class="relative">
-              <div class="flex py-3 ps-3 mt-3 gap-4 items-center text-sm">
+              <div class="mt-3 flex items-center gap-4 py-3 ps-3 text-sm">
                 <div class="text-primary"><Icon icon={mdiThumbUp} size="20" /></div>
 
                 <div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
@@ -190,12 +190,9 @@
                   })}
                 </div>
                 {#if assetId === undefined && reaction.assetId}
-                  <a
-                    class="aspect-square w-19 h-19"
-                    href={Route.viewAlbumAsset({ albumId, assetId: reaction.assetId })}
-                  >
+                  <a class="aspect-square size-19" href={Route.viewAlbumAsset({ albumId, assetId: reaction.assetId })}>
                     <img
-                      class="rounded-lg w-19 h-19 object-cover"
+                      class="size-19 rounded-lg object-cover"
                       src={getAssetMediaUrl({ id: reaction.assetId })}
                       alt="Profile picture of {reaction.user.name}, who liked this asset"
                     />
@@ -222,7 +219,7 @@
               </div>
               {#if (index != activityManager.activities.length - 1 && isTenMinutesApart(activityManager.activities[index].createdAt, activityManager.activities[index + 1].createdAt)) || index === activityManager.activities.length - 1}
                 <div
-                  class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
+                  class="w-full px-2 pt-1 text-right text-sm text-gray-500 dark:text-gray-300"
                   title={new Date(reaction.createdAt).toLocaleDateString(navigator.language, timeOptions)}
                 >
                   {timeSince(luxon.DateTime.fromISO(reaction.createdAt, { locale: $locale }))}
@@ -235,13 +232,13 @@
     {/if}
   </div>
 
-  <div class="absolute w-full bottom-0">
+  <div class="absolute bottom-0 w-full">
     <div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
-      <div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
+      <div class="flex h-fit w-full gap-4 rounded-3xl bg-gray-200 p-2 text-immich-dark-gray">
         <div>
           <UserAvatar user={authManager.user} size="md" noTitle />
         </div>
-        <form class="flex w-full items-center max-h-56 gap-1" {onsubmit}>
+        <form class="flex max-h-56 w-full items-center gap-1" {onsubmit}>
           <Textarea
             {disabled}
             bind:value={message}
@@ -254,16 +251,16 @@
             }))}
             class="{disabled
               ? 'cursor-not-allowed'
-              : ''} ring-0! w-full max-h-56 pe-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200 dark:bg-gray-200"
+              : ''} max-h-56 w-full resize-none items-center overflow-y-auto bg-gray-200 pe-2 leading-4 ring-0! outline-none dark:bg-gray-200"
           />
           {#if isSendingMessage}
-            <div class="flex place-items-center pb-2 ms-0">
+            <div class="ms-0 flex place-items-center pb-2">
               <div class="flex w-full place-items-center">
                 <LoadingSpinner size="large" />
               </div>
             </div>
           {:else if message}
-            <div class="flex items-center w-fit ms-0 light">
+            <div class="light ms-0 flex w-fit items-center">
               <IconButton
                 shape="round"
                 aria-label={$t('send_message')}
diff --git a/web/src/lib/components/asset-viewer/AlbumListItem.svelte b/web/src/lib/components/asset-viewer/AlbumListItem.svelte
index 4cc35baacf..403fdd98ca 100644
--- a/web/src/lib/components/asset-viewer/AlbumListItem.svelte
+++ b/web/src/lib/components/asset-viewer/AlbumListItem.svelte
@@ -116,7 +116,7 @@
 <div
   role="group"
   class={[
-    'relative flex w-full text-start justify-between transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl my-2 hover:cursor-pointer',
+    'relative my-2 flex w-full justify-between rounded-xl text-start transition-colors hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700',
     { 'bg-primary/10 hover:bg-primary/10': multiSelected },
   ]}
   onmouseenter={onMouseEnter}
@@ -126,26 +126,24 @@
     type="button"
     onclick={onAlbumClick}
     use:scrollIntoViewIfSelected
-    class="flex w-full gap-4 px-2 py-2 text-start"
+    class="flex w-full gap-4 p-2 text-start"
     class:bg-gray-200={selected}
     class:dark:bg-gray-700={selected}
     use:longPress={{ onLongPress: () => handleMultiSelectClicked() }}
   >
-    <span class="h-16 w-16 shrink-0 rounded-xl bg-slate-300">
+    <span class="size-16 shrink-0 rounded-xl bg-slate-300">
       {#if album.albumThumbnailAssetId}
         <img
           src={getAssetMediaUrl({ id: album.albumThumbnailAssetId })}
           alt={album.albumName}
-          class={['h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg']}
+          class={['size-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg']}
           data-testid="album-image"
           draggable="false"
         />
       {/if}
     </span>
     <span class="flex h-full flex-col items-start justify-center overflow-hidden">
-      <span class="w-full shrink overflow-hidden text-ellipsis whitespace-nowrap"
-        >{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span
-      >
+      <span class="w-full shrink truncate">{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
       <span class="flex gap-1 text-sm">
         <AlbumListItemDetails {album} />
       </span>
@@ -156,7 +154,7 @@
     <button
       type="button"
       onclick={handleMultiSelectClicked}
-      class="absolute right-0 top-4 p-3 focus:outline-none hover:cursor-pointer"
+      class="absolute top-4 right-0 p-3 hover:cursor-pointer focus:outline-none"
       role="checkbox"
       tabindex={-1}
       aria-checked={selected}
diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
index 834b22e299..656d67dea8 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewer.svelte
@@ -457,7 +457,7 @@
 
 <section
   id="immich-asset-viewer"
-  class="fixed start-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  class="fixed inset-s-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
   use:focusTrap
   bind:this={assetViewerHtmlElement}
 >
@@ -496,13 +496,13 @@
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && previousAsset}
-    <div class="my-auto col-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
+    <div class="col-span-1 col-start-1 row-span-full row-start-1 my-auto justify-self-start">
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
   {/if}
 
   <!-- Asset Viewer -->
-  <div data-viewer-content class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full">
+  <div data-viewer-content class="relative z-[-1] col-span-4 col-start-1 row-span-full row-start-1">
     {#if viewerKind === 'StackVideoViewer'}
       <VideoViewer
         asset={previewStackedAsset!}
@@ -550,7 +550,7 @@
     {/if}
 
     {#if showActivityStatus}
-      <div class="absolute bottom-0 end-0 mb-20 me-8">
+      <div class="absolute inset-e-0 bottom-0 me-8 mb-20">
         <ActivityStatus
           disabled={!album?.isActivityEnabled}
           isLiked={activityManager.isLiked}
@@ -562,14 +562,14 @@
     {/if}
 
     {#if showOcrButton}
-      <div class="absolute bottom-0 end-0 mb-6 me-6 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]">
+      <div class="absolute inset-e-0 bottom-0 me-6 mb-6 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]">
         <OcrButton />
       </div>
     {/if}
   </div>
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && nextAsset}
-    <div class="my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
+    <div class="col-span-1 col-start-4 row-span-full row-start-1 my-auto justify-self-end">
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
   {/if}
@@ -579,7 +579,7 @@
       transition:fly={{ duration: 150 }}
       id="detail-panel"
       class={[
-        'row-start-1 row-span-4 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light',
+        'row-span-4 row-start-1 overflow-y-auto bg-light transition-all dark:border-l dark:border-s-immich-dark-gray',
         showDetailPanel ? 'w-90' : 'w-100',
       ]}
       translate="yes"
@@ -594,11 +594,11 @@
 
   {#if stack && withStacked && !assetViewerManager.isShowEditor}
     {@const stackedAssets = stack.assets}
-    <div id="stack-slideshow" class="absolute bottom-0 w-full col-span-4 col-start-1 pointer-events-none">
-      <div class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar">
+    <div id="stack-slideshow" class="pointer-events-none absolute bottom-0 col-span-4 col-start-1 w-full">
+      <div class="no-wrap horizontal-scrollbar relative flex flex-row overflow-x-auto overflow-y-hidden">
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
-            class={['inline-block px-1 relative transition-all pb-2 pointer-events-auto']}
+            class={['pointer-events-auto relative inline-block px-1 pb-2 transition-all']}
             style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
           >
             <Thumbnail
@@ -618,8 +618,8 @@
             />
 
             {#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-0.5"></div>
+              <div class="flex w-full place-content-center place-items-center">
+                <div class="mt-0.5 flex size-2 rounded-full bg-white"></div>
               </div>
             {/if}
           </div>
@@ -632,7 +632,7 @@
     <div
       transition:fly={{ duration: 150 }}
       id="activity-panel"
-      class="row-start-1 row-span-5 w-90 md:w-115 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
+      class="row-span-5 row-start-1 w-90 overflow-y-auto transition-all md:w-115 dark:border-l dark:border-s-immich-dark-gray"
       translate="yes"
     >
       <ActivityViewer
diff --git a/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
index 5098a78619..75504765e2 100644
--- a/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
@@ -103,14 +103,14 @@
 <CommandPaletteDefaultProvider name={$t('assets')} actions={withoutIcons([Close, Cast, ...Object.values(Actions)])} />
 
 <div
-  class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 transition-transform duration-200 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]"
+  class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)] transition-transform duration-200"
 >
   <div class="dark">
     <ActionButton action={Close} />
   </div>
 
   <div
-    class="flex p-1 -m-1 items-center gap-2 overflow-x-auto *:shrink-0 dark"
+    class="dark -m-1 flex items-center gap-2 overflow-x-auto p-1 *:shrink-0"
     data-testid="asset-viewer-navbar-actions"
   >
     {#if assetViewerManager.isImageLoading}
diff --git a/web/src/lib/components/asset-viewer/DetailPanel.svelte b/web/src/lib/components/asset-viewer/DetailPanel.svelte
index 8f627a87b5..aa32f825a0 100644
--- a/web/src/lib/components/asset-viewer/DetailPanel.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanel.svelte
@@ -126,7 +126,7 @@
     </div>
 
     {#if asset.isOffline}
-      <section class="px-4 py-4">
+      <section class="p-4">
         <div role="alert">
           <div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">
             {$t('asset_offline')}
@@ -140,7 +140,7 @@
               {/if}
             </p>
           </div>
-          <div class="rounded-b bg-red-500 px-4 py-2 text-white text-sm">
+          <div class="rounded-b bg-red-500 px-4 py-2 text-sm text-white">
             <p>{asset.originalPath}</p>
           </div>
         </div>
@@ -151,7 +151,7 @@
     <DetailPanelRating {asset} {isOwner} />
     <DetailPanelPeople {asset} {isOwner} {previousRoute} />
 
-    <div class="px-4 py-4">
+    <div class="p-4">
       {#if asset.exifInfo}
         <div class="flex h-10 w-full items-center justify-between text-sm">
           <Text size="small" color="muted">{$t('details')}</Text>
@@ -166,7 +166,7 @@
         <div><Icon icon={mdiImageOutline} size="24" /></div>
 
         <div>
-          <p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
+          <p class="flex place-items-center gap-2 break-all whitespace-pre-wrap">
             {asset.originalFileName}
             {#if isOwner}
               <IconButton
@@ -181,7 +181,7 @@
             {/if}
           </p>
           {#if assetViewerManager.isShowAssetPath}
-            <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
+            <p class="pb-2 text-xs break-all opacity-50 hover:text-primary" transition:slide={{ duration: 250 }}>
               <!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
               <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
                 {asset.originalPath}
@@ -251,7 +251,7 @@
                 <a
                   href={Route.search({ lensModel: asset.exifInfo.lensModel })}
                   title="{$t('search_for')} {asset.exifInfo.lensModel}"
-                  class="hover:text-primary line-clamp-1"
+                  class="line-clamp-1 hover:text-primary"
                 >
                   {asset.exifInfo.lensModel}
                 </a>
@@ -280,7 +280,7 @@
       {#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 -->
-          <div class="flex items-center justify-center h-full w-full">
+          <div class="flex size-full items-center justify-center">
             <LoadingSpinner />
           </div>
         {/await}
@@ -323,14 +323,14 @@
   {/if}
 
   {#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
-    <section class="px-6 dark:text-immich-dark-fg mt-4">
+    <section class="mt-4 px-6 dark:text-immich-dark-fg">
       <Text size="small" color="muted">{$t('shared_by')}</Text>
       <div class="flex gap-4 pt-4">
         <div>
           <UserAvatar user={asset.owner} size="md" />
         </div>
 
-        <div class="mb-auto mt-auto">
+        <div class="my-auto">
           <p>
             {asset.owner.name}
           </p>
@@ -341,24 +341,24 @@
 
   {#await albums then albums}
     {#if albums.length > 0}
-      <section class="px-6 py-6 dark:text-immich-dark-fg">
+      <section class="p-6 dark:text-immich-dark-fg">
         <div class="pb-4">
           <Text size="small" color="muted">{$t('appears_in')}</Text>
         </div>
         {#each albums as album (album.id)}
           <a href={Route.viewAlbum(album)}>
-            <div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
+            <div class="flex items-center gap-4 pt-2 hover:cursor-pointer">
               <div>
                 <img
                   alt={album.albumName}
-                  class="h-12.5 w-12.5 rounded object-cover"
+                  class="size-12.5 rounded-sm object-cover"
                   src={album.albumThumbnailAssetId &&
                     getAssetMediaUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
                   draggable="false"
                 />
               </div>
 
-              <div class="mb-auto mt-auto">
+              <div class="my-auto">
                 <p class="dark:text-immich-dark-primary">{album.albumName}</p>
                 <div class="flex flex-col gap-0 text-sm">
                   <div>
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDate.svelte b/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
index f5e85112bc..65578735ef 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
@@ -38,7 +38,7 @@
 {#if dateTime}
   <button
     type="button"
-    class="flex w-full text-start justify-between place-items-start gap-4 py-4"
+    class="flex w-full place-items-start justify-between gap-4 py-4 text-start"
     onclick={handleChangeDate}
     title={isOwner ? $t('edit_date') : ''}
     class:hover:text-primary={isOwner}
@@ -75,7 +75,7 @@
     {/if}
   </button>
 {:else if !dateTime && isOwner}
-  <div class="flex justify-between place-items-start gap-4 py-4">
+  <div class="flex place-items-start justify-between gap-4 py-4">
     <div class="flex gap-4">
       <Icon icon={mdiCalendar} size="24" />
     </div>
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
index e766975b8c..d8aea0f9eb 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
@@ -30,10 +30,10 @@
 </script>
 
 {#if isOwner}
-  <section class="px-4 mt-10">
+  <section class="mt-10 px-4">
     <Textarea
       bind:value={description}
-      class="max-h-40 pl-0 outline-none border-b border-gray-500 bg-transparent ring-0 focus:ring-0 resize-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary dark:bg-transparent"
+      class="max-h-40 resize-none border-b border-gray-500 bg-transparent pl-0 ring-0 outline-none focus:border-b-2 focus:border-immich-primary focus:ring-0 dark:bg-transparent dark:focus:border-immich-dark-primary"
       rows={1}
       grow
       shape="rectangle"
@@ -47,7 +47,7 @@
     />
   </section>
 {:else if description}
-  <section class="px-4 mt-6">
-    <p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
+  <section class="mt-6 px-4">
+    <p class="w-full text-base wrap-break-word whitespace-pre-line text-black dark:text-white">{description}</p>
   </section>
 {/if}
diff --git a/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte b/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
index 15ea4d94ca..cb97e33e6d 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
@@ -33,7 +33,7 @@
 {#if asset.exifInfo?.country}
   <button
     type="button"
-    class="flex w-full text-start justify-between place-items-start gap-4 py-4"
+    class="flex w-full place-items-start justify-between gap-4 py-4 text-start"
     onclick={isOwner ? onAction : undefined}
     title={isOwner ? $t('edit_location') : ''}
     class:hover:text-primary={isOwner}
@@ -67,7 +67,7 @@
 {:else if !asset.exifInfo?.city && isOwner}
   <button
     type="button"
-    class="flex w-full text-start justify-between place-items-start gap-4 py-4 rounded-lg hover:text-primary"
+    class="flex w-full place-items-start justify-between gap-4 rounded-lg py-4 text-start hover:text-primary"
     onclick={onAction}
     title={$t('add_location')}
   >
@@ -75,7 +75,7 @@
       <div><Icon icon={mdiMapMarkerOutline} size="24" /></div>
       <p>{$t('add_a_location')}</p>
     </div>
-    <div class="focus:outline-none p-1">
+    <div class="p-1 focus:outline-none">
       <Icon icon={mdiPencil} size="20" />
     </div>
   </button>
diff --git a/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte b/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte
index 2848e7292a..9a7c6215ec 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte
@@ -60,7 +60,7 @@
   <section class="px-4 pt-4 text-sm">
     <div class="flex h-10 w-full items-center justify-between">
       <Text size="small" color="muted">{$t('people')}</Text>
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         {#if people.some((person) => person.isHidden)}
           <IconButton
             aria-label={$t('show_hidden_people')}
@@ -118,7 +118,7 @@
             widthStyle="100%"
             hidden={person.isHidden}
             highlighted={isHighlighted}
-            class="group-focus-visible:outline-2 outline-offset-2 outline-immich-primary dark:outline-immich-dark-primary"
+            class="outline-offset-2 outline-immich-primary group-focus-visible:outline-2 dark:outline-immich-dark-primary"
           />
           <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
           {#if person.birthDate && person.formattedAge}
diff --git a/web/src/lib/components/asset-viewer/DetailPanelTags.svelte b/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
index 27e5dd8556..78fde05d7f 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
@@ -37,11 +37,11 @@
 <OnEvents {onAssetsTag} />
 
 {#if isOwner && !authManager.isSharedLink}
-  <section class="px-4 mt-4">
+  <section class="mt-4 px-4">
     <div class="flex h-10 w-full items-center justify-between text-sm">
       <Text color="muted">{$t('tags')}</Text>
     </div>
-    <section class="flex flex-wrap pt-2 gap-1" data-testid="detail-panel-tags">
+    <section class="flex flex-wrap gap-1 pt-2" data-testid="detail-panel-tags">
       {#each tags as tag (tag.id)}
         <Badge
           onClose={() => handleRemove(tag.id)}
diff --git a/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte b/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
index 81d8c8c436..2708bf7dbd 100644
--- a/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
+++ b/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
@@ -20,7 +20,7 @@
   };
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+<div transition:fade={{ duration: 150 }} class="flex h-full place-content-center place-items-center select-none">
   {#await Promise.all([loadAssetData(assetId), import('./PhotoSphereViewerAdapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}
diff --git a/web/src/lib/components/asset-viewer/NavigationArea.svelte b/web/src/lib/components/asset-viewer/NavigationArea.svelte
index 88f0baf0bc..cb07f4ae1c 100644
--- a/web/src/lib/components/asset-viewer/NavigationArea.svelte
+++ b/web/src/lib/components/asset-viewer/NavigationArea.svelte
@@ -12,7 +12,7 @@
 
 <button
   type="button"
-  class="my-auto mx-4 rounded-full p-3 text-gray-500 transition hover:bg-gray-500 hover:text-white"
+  class="mx-4 my-auto rounded-full p-3 text-gray-500 transition hover:bg-gray-500 hover:text-white"
   aria-label={label}
   onclick={onClick}
 >
diff --git a/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte b/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
index c2ee1ba193..34bde374e6 100644
--- a/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
+++ b/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
@@ -44,12 +44,12 @@
 
 <div
   class={[
-    'absolute left-0 top-0 flex items-center justify-center',
-    'border-2 border-blue-500 pointer-events-auto cursor-text',
-    'focus:z-1 focus:border-blue-600 focus:border-3 focus:outline-none',
+    'absolute top-0 left-0 flex items-center justify-center',
+    'pointer-events-auto cursor-text border-2 border-blue-500',
+    'focus:z-1 focus:border-3 focus:border-blue-600 focus:outline-none',
     isTouch
-      ? 'text-white bg-black/60 select-all'
-      : 'select-text text-transparent bg-blue-500/10 transition-colors hover:z-1 hover:text-white hover:bg-black/60 hover:border-blue-600 hover:border-3',
+      ? 'bg-black/60 text-white select-all'
+      : 'bg-blue-500/10 text-transparent transition-colors select-text hover:z-1 hover:border-3 hover:border-blue-600 hover:bg-black/60 hover:text-white',
     ocrBox.verticalMode === 'none' ? 'px-2 py-1 whitespace-nowrap' : 'px-1 py-2',
   ]}
   style="font-size: {fontSize}; width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: 0 0; touch-action: none; {verticalStyle}"
diff --git a/web/src/lib/components/asset-viewer/OcrButton.svelte b/web/src/lib/components/asset-viewer/OcrButton.svelte
index 9f8966e64a..a772f6bf79 100644
--- a/web/src/lib/components/asset-viewer/OcrButton.svelte
+++ b/web/src/lib/components/asset-viewer/OcrButton.svelte
@@ -8,7 +8,7 @@
 <IconButton
   title={ocrManager.showOverlay ? $t('hide_text_recognition') : $t('show_text_recognition')}
   icon={mdiTextRecognition}
-  class={"dark {ocrStore.showOverlay ? 'bg-immich-primary text-white dark' : 'dark'}"}
+  class={"dark {ocrStore.showOverlay ? 'bg-immich-primary dark' : 'dark'} text-white"}
   color="secondary"
   variant="ghost"
   shape="round"
diff --git a/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte b/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
index 150b6e4f6b..a98418d65a 100644
--- a/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
@@ -250,7 +250,7 @@
 <AssetViewerEvents {onZoom} />
 
 <svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: onZoom, preventDefault: true }]} />
-<div class="h-full w-full mb-0" bind:this={container}></div>
+<div class="mb-0 size-full" bind:this={container}></div>
 
 <style>
   /* Reset the default tooltip styling */
diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index 894ee875e3..cbef26317c 100644
--- a/web/src/lib/components/asset-viewer/PhotoViewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -210,7 +210,7 @@
 
 <div
   bind:this={element}
-  class="relative h-full w-full select-none"
+  class="relative size-full select-none"
   bind:clientWidth={containerWidth}
   bind:clientHeight={containerHeight}
   role="presentation"
@@ -237,15 +237,15 @@
   >
     {#snippet backdrop()}
       {#if blurredSlideshow}
-        <Thumbhash base64ThumbHash={asset.thumbhash!} class="absolute top-0 left-0 inset-s-0 h-dvh w-dvw" />
+        <Thumbhash base64ThumbHash={asset.thumbhash!} class="absolute inset-s-0 top-0 left-0 h-dvh w-dvw" />
       {/if}
     {/snippet}
     {#snippet overlays()}
       <div
-        class="absolute inset-0 pointer-events-none transition-opacity duration-150"
+        class="pointer-events-none absolute inset-0 transition-opacity duration-150"
         style:opacity={isHighlighting ? 1 : 0}
       >
-        <svg class="absolute inset-0 w-full h-full">
+        <svg class="absolute inset-0 size-full">
           <defs>
             <mask id="face-dim-mask">
               <rect width="100%" height="100%" fill="white" />
@@ -261,7 +261,7 @@
         {@const isActive = assetViewerManager.highlightedFaces.some((f) => f.id === boundingbox.id)}
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
-          class="absolute pointer-events-auto rounded-lg {isActive && 'border-solid border-white border-3'}"
+          class="pointer-events-auto absolute rounded-lg {isActive && 'border-3 border-solid border-white'}"
           style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
           onpointerenter={() => assetViewerManager.setHighlightedFaces([boundingbox.face])}
           onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
@@ -269,7 +269,7 @@
           {#if isActive && boundingbox.name}
             <div
               aria-hidden="true"
-              class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap shadow-lg"
+              class="absolute rounded-sm bg-white/90 px-2 py-1 text-sm font-medium whitespace-nowrap text-black shadow-lg"
               style="top: {boundingbox.height + 4}px; right: 0;"
             >
               {boundingbox.name}
diff --git a/web/src/lib/components/asset-viewer/SlideshowBar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
index e8c1c4a4b6..8065b6b276 100644
--- a/web/src/lib/components/asset-viewer/SlideshowBar.svelte
+++ b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
@@ -172,7 +172,7 @@
 
 {#if showControls}
   <div
-    class="m-4 flex gap-2 dark"
+    class="dark m-4 flex gap-2"
     onmouseenter={() => (isOverControls = true)}
     onmouseleave={() => (isOverControls = false)}
     transition:fly={{ duration: 150 }}
diff --git a/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte b/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
index 9403d99f3a..5ae768d4d4 100644
--- a/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
@@ -124,12 +124,12 @@
 {#if showVideo}
   <div
     transition:fade={{ duration: assetViewerFadeDuration }}
-    class="flex h-full select-none place-content-center place-items-center"
+    class="flex h-full place-content-center place-items-center select-none"
     bind:clientWidth={containerWidth}
     bind:clientHeight={containerHeight}
   >
     {#if castManager.isCasting}
-      <div class="place-content-center h-full place-items-center">
+      <div class="h-full place-content-center place-items-center">
         <VideoRemoteViewer
           poster={getAssetMediaUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
           {onVideoStarted}
diff --git a/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte b/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
index b97538ee35..08b6058d21 100644
--- a/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
@@ -19,7 +19,7 @@
   ]);
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+<div transition:fade={{ duration: 150 }} class="flex h-full place-content-center place-items-center select-none">
   {#await modules}
     <LoadingSpinner />
   {:then [PhotoSphereViewer, adapter, videoPlugin]}
diff --git a/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte b/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
index 94a7e748c5..851cd05f78 100644
--- a/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
@@ -68,12 +68,12 @@
   }
 </script>
 
-<span class="flex items-center space-x-2 text-gray-200 text-2xl font-bold">
+<span class="flex items-center space-x-2 text-2xl font-bold text-gray-200">
   <Icon icon={mdiCastConnected} class="text-primary" size="36" />
   <span>{$t('connected_to')} {castManager.receiverName}</span>
 </span>
 
-<img src={poster} alt="poster" class="rounded-xl m-4" />
+<img src={poster} alt="poster" class="m-4 rounded-xl" />
 
 <div class="flex place-content-center place-items-center">
   {#if castManager.castState == CastState.BUFFERING}
@@ -97,6 +97,6 @@
     max={castManager.duration}
     value={castManager.currentTime ?? 0}
     onchange={handleSeek}
-    class="w-full h-4 bg-primary"
+    class="h-4 w-full bg-primary"
   />
 </div>
diff --git a/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte b/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
index 2ed519da4d..d048375a11 100644
--- a/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
@@ -54,8 +54,8 @@
   ]}
 />
 
-<section class="relative flex flex-col h-full p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg dark pt-3">
-  <HStack class="justify-between me-4">
+<section class="dark relative flex h-full flex-col p-2 pt-3 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
+  <HStack class="me-4 justify-between">
     <HStack>
       <IconButton
         shape="round"
@@ -65,7 +65,7 @@
         aria-label={$t('close')}
         onclick={closeEditor}
       />
-      <p class="text-lg text-immich-fg dark:text-immich-dark-fg capitalize">{$t('editor')}</p>
+      <p class="text-lg text-immich-fg capitalize dark:text-immich-dark-fg">{$t('editor')}</p>
     </HStack>
     <Button shape="round" size="small" onclick={applyEdits} loading={editManager.isApplyingEdits}>{$t('save')}</Button>
   </HStack>
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
index 011f30d445..9bb9f81904 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
@@ -60,9 +60,9 @@
   });
 </script>
 
-<div class="flex flex-col items-center justify-center w-full h-full p-8" bind:this={canvasContainer}>
+<div class="flex size-full flex-col items-center justify-center p-8" bind:this={canvasContainer}>
   <div
-    class="crop-area max-w-full max-h-full transition-transform motion-reduce:transition-none"
+    class="crop-area max-h-full max-w-full transition-transform motion-reduce:transition-none"
     class:rotated={transformManager.normalizedRotation % 180 > 0}
     style:rotate={transformManager.imageRotation + 'deg'}
     bind:this={transformManager.cropAreaEl}
@@ -72,12 +72,12 @@
       draggable="false"
       src={imageSrc}
       alt={$getAltText(toTimelineAsset(asset))}
-      class="h-full select-none transition-transform motion-reduce:transition-none"
+      class="h-full transition-transform select-none motion-reduce:transition-none"
       style:transform={imageTransform}
     />
     <div
       class={[
-        'overlay w-full h-full absolute top-0 transition-colors motion-reduce:transition-none pointer-events-none',
+        'overlay pointer-events-none absolute top-0 size-full transition-colors motion-reduce:transition-none',
         transformManager.isInteracting ? 'bg-black/30' : 'bg-black/56',
       ]}
       bind:this={transformManager.overlayEl}
@@ -86,7 +86,7 @@
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         class={[
-          'grid w-full h-full cursor-move transition-opacity motion-reduce:transition-none',
+          'grid size-full cursor-move transition-opacity motion-reduce:transition-none',
           transformManager.isInteracting ? 'opacity-100' : 'opacity-0',
         ]}
         onmousedown={(e) => transformManager.handleMouseDownOn(e, ResizeBoundary.None)}
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
index 54ab126dfa..29e4e09506 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
@@ -77,7 +77,7 @@
 />
 
 <div class="mt-3 px-4">
-  <div class="flex h-10 w-full items-center justify-between text-sm mt-2">
+  <div class="mt-2 flex h-10 w-full items-center justify-between text-sm">
     <h2>{$t('editor_orientation')}</h2>
   </div>
   <HStack>
@@ -111,16 +111,16 @@
     />
   </HStack>
 
-  <div class="flex h-10 w-full items-center justify-between text-sm mt-6">
+  <div class="mt-6 flex h-10 w-full items-center justify-between text-sm">
     <h2>{$t('crop')}</h2>
   </div>
 
   <!-- Aspect Ratio Grid -->
-  <div class="grid grid-cols-2 mb-4">
+  <div class="mb-4 grid grid-cols-2">
     {#each aspectRatios as ratio (ratio.value)}
       <HStack>
         <Button
-          class="w-14 h-14 m-2"
+          class="m-2 size-14"
           shape="round"
           onclick={() => selectAspectRatio(ratio)}
           aria-label={ratio.label}
@@ -130,14 +130,14 @@
           {#if ratio.isFree}
             <!-- Free crop icon with dashed border -->
             <div
-              class="w-6 h-6 border-2 border-dashed rounded-xs flex-shrink-0 {ratioSelected(ratio)
+              class="size-6 shrink-0 rounded-xs border-2 border-dashed {ratioSelected(ratio)
                 ? 'border-black'
                 : 'border-white'}"
             ></div>
           {:else}
             <!-- Aspect ratio box -->
             <div
-              class="border-2 rounded-xs flex-shrink-0 {ratioSelected(ratio) ? 'border-black' : 'border-white'}"
+              class="shrink-0 rounded-xs border-2 {ratioSelected(ratio) ? 'border-black' : 'border-white'}"
               style="width: {ratio.width}px; height: {ratio.height}px;"
             ></div>
           {/if}
diff --git a/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte b/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
index 051fe1c370..5ec423a9c4 100644
--- a/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
+++ b/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
@@ -364,34 +364,34 @@
 
 <div
   id="face-editor-data"
-  class="absolute inset-s-0 top-0 z-5 h-full w-full overflow-hidden"
+  class="absolute inset-s-0 top-0 z-5 size-full overflow-hidden"
   data-overlay-interactive
   data-face-left={faceBoxPosition.left}
   data-face-top={faceBoxPosition.top}
   data-face-width={faceBoxPosition.width}
   data-face-height={faceBoxPosition.height}
 >
-  <canvas bind:this={canvasEl} id="face-editor" class="absolute top-0 inset-s-0"></canvas>
+  <canvas bind:this={canvasEl} id="face-editor" class="absolute inset-s-0 top-0"></canvas>
 
   <div
     id="face-selector"
     bind:this={faceSelectorEl}
-    class="absolute top-[calc(50%-250px)] inset-s-[calc(50%-125px)] max-w-62.5 w-62.5 bg-white dark:bg-immich-dark-gray dark:text-immich-dark-fg backdrop-blur-sm px-2 py-4 rounded-xl border border-gray-200 dark:border-gray-800 transition-[top,left] duration-200 ease-out"
+    class="absolute inset-s-[calc(50%-125px)] top-[calc(50%-250px)] w-62.5 max-w-62.5 rounded-xl border border-gray-200 bg-white px-2 py-4 backdrop-blur-sm transition-[top,left] duration-200 ease-out dark:border-gray-800 dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   >
     <p class="text-center text-sm">{$t('select_person_to_tag')}</p>
 
-    <div class="my-3 relative">
+    <div class="relative my-3">
       <Input placeholder={$t('search_people')} bind:value={searchTerm} bind:ref={searchInputEl} size="tiny" />
     </div>
 
-    <div bind:this={scrollableListEl} class="h-62.5 overflow-y-auto mt-2">
+    <div bind:this={scrollableListEl} class="mt-2 h-62.5 overflow-y-auto">
       {#if filteredCandidates.length > 0}
         <div class="mt-2 rounded-lg">
           {#each filteredCandidates as person (person.id)}
             <button
               onclick={() => tagFace(person)}
               type="button"
-              class="w-full flex place-items-center gap-2 rounded-lg ps-1 pe-4 py-2 hover:bg-immich-primary/25"
+              class="flex w-full place-items-center gap-2 rounded-lg py-2 ps-1 pe-4 hover:bg-immich-primary/25"
             >
               <ImageThumbnail
                 curve
diff --git a/web/src/lib/components/assets/BrokenAsset.svelte b/web/src/lib/components/assets/BrokenAsset.svelte
index bb67de390e..0854c105e6 100644
--- a/web/src/lib/components/assets/BrokenAsset.svelte
+++ b/web/src/lib/components/assets/BrokenAsset.svelte
@@ -25,7 +25,7 @@
   style:height
 >
   <div class="hidden @min-[75px]:block">
-    <Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full min-w-6 min-h-6" />
+    <Icon icon={mdiImageBrokenVariant} size="7em" class="min-h-6 max-w-full min-w-6" />
   </div>
   {#if !hideMessage}
     <span class="text-center text-xs @min-[100px]:text-sm @min-[150px]:text-base">{$t('error_loading_image')}</span>
diff --git a/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
index 1e55ebb411..617669c91e 100644
--- a/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
@@ -78,7 +78,7 @@
     src={url}
     onLoad={setLoaded}
     onError={setErrored}
-    class={['object-cover bg-gray-300 dark:bg-gray-700', sharedClasses, imageClass]}
+    class={['bg-gray-300 object-cover dark:bg-gray-700', sharedClasses, imageClass]}
     {style}
     alt={loaded || errored ? altText : ''}
     draggable={false}
@@ -88,7 +88,7 @@
 {/if}
 
 {#if hidden}
-  <div class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
+  <div class="absolute inset-s-1/2 top-1/2 translate-[-50%] transform">
     <!-- TODO fix `title` type -->
     <Icon title={title ?? undefined} icon={mdiEyeOffOutline} size="2em" class={hiddenIconClass} />
   </div>
diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index 63e93169bb..a087aaf809 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -206,7 +206,7 @@
 
 <div
   class={[
-    'group focus-visible:outline-none flex overflow-hidden transition-[background-color,border-radius]',
+    'group flex overflow-hidden transition-[background-color,border-radius] focus-visible:outline-none',
     backgroundColorClass,
     { 'rounded-xl': selected },
   ]}
@@ -237,20 +237,20 @@
   role="link"
 >
   <div
-    class={['group absolute top-0 bottom-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
+    class={['group absolute inset-y-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
     style:width="inherit"
     style:height="inherit"
   >
     <div
       class={[
-        'absolute h-full w-full select-none bg-transparent transition-transform',
+        'absolute size-full bg-transparent transition-transform select-none',
         { 'scale-[0.85]': selected },
         { 'rounded-xl': selected },
       ]}
     >
       <ImageThumbnail
         class={[
-          'absolute group-focus-visible:rounded-lg transition-[border-radius]',
+          'absolute transition-[border-radius] group-focus-visible:rounded-lg',
           { 'rounded-xl': selected },
           imageClass,
         ]}
@@ -267,7 +267,7 @@
         onComplete={(errored) => ((loaded = true), (thumbError = errored))}
       />
       {#if asset.isVideo}
-        <div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
+        <div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg">
           <VideoThumbnail
             class="group-focus-visible:rounded-lg"
             url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
@@ -278,7 +278,7 @@
           />
         </div>
       {:else if asset.isImage && asset.livePhotoVideoId}
-        <div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
+        <div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg">
           <VideoThumbnail
             class="group-focus-visible:rounded-lg"
             url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
@@ -292,7 +292,7 @@
         </div>
       {:else if asset.isImage && asset.duration && mouseOver}
         <!-- GIF -->
-        <div class="absolute h-full w-full pointer-events-none">
+        <div class="pointer-events-none absolute size-full">
           <ImageThumbnail
             class={imageClass}
             {brokenAssetClass}
@@ -317,12 +317,12 @@
       {/if}
 
       <!-- icon overlay -->
-      <div class="z-2 absolute inset-0">
+      <div class="absolute inset-0 z-2">
         <!-- Gradient overlay on hover -->
         {#if !usingMobileDevice && !disabled && !asset.isVideo}
           <div
             class={[
-              'absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100 ',
+              'absolute size-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100',
               { 'rounded-xl group-focus-visible:rounded-lg': selected },
             ]}
           ></div>
@@ -332,36 +332,33 @@
         {#if dimmed && !mouseOver}
           <div
             id="a"
-            class={[
-              'z-2  absolute h-full w-full bg-gray-700/40 group-focus-visible:rounded-lg',
-              { 'rounded-xl': selected },
-            ]}
+            class={['absolute z-2 size-full bg-gray-700/40 group-focus-visible:rounded-lg', { 'rounded-xl': selected }]}
           ></div>
         {/if}
 
         <!-- Favorite asset star -->
         {#if !authManager.isSharedLink && asset.isFavorite}
-          <div class="z-2 absolute bottom-2 inset-s-2">
+          <div class="absolute inset-s-2 bottom-2 z-2">
             <Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if !!assetOwner}
-          <div class="z-2 absolute bottom-1 inset-e-2 max-w-[50%]">
-            <p class="text-xs font-medium text-white drop-shadow-lg max-w-full truncate">
+          <div class="absolute inset-e-2 bottom-1 z-2 max-w-[50%]">
+            <p class="max-w-full truncate text-xs font-medium text-white drop-shadow-lg">
               {assetOwner.name}
             </p>
           </div>
         {/if}
 
         {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
-          <div class={['z-2 absolute inset-s-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
+          <div class={['absolute inset-s-2 z-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
-          <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+          <div class="absolute inset-e-0 top-0 z-2 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon icon={mdiRotate360} size="24" />
             </span>
@@ -369,7 +366,7 @@
         {/if}
 
         {#if asset.isImage && asset.duration}
-          <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+          <div class="absolute inset-e-0 top-0 z-2 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon icon={mouseOver ? mdiMotionPauseOutline : mdiFileGifBox} size="24" />
             </span>
@@ -380,11 +377,11 @@
         {#if asset.stack && showStackedIcon}
           <div
             class={[
-              'z-2 absolute flex place-items-center gap-1 text-xs font-medium text-white',
-              asset.isImage && !asset.livePhotoVideoId ? 'top-0 inset-e-0' : 'top-7 inset-e-1',
+              'absolute z-2 flex place-items-center gap-1 text-xs font-medium text-white',
+              asset.isImage && !asset.livePhotoVideoId ? 'inset-e-0 top-0' : 'inset-e-1 top-7',
             ]}
           >
-            <span class="pe-2 pt-2 flex place-items-center gap-1">
+            <span class="flex place-items-center gap-1 pe-2 pt-2">
               <p>{asset.stack.assetCount.toLocaleString($locale)}</p>
               <Icon icon={mdiCameraBurst} size="24" />
             </span>
@@ -395,7 +392,7 @@
       <!-- lazy show the url on mouse over-->
       {#if !usingMobileDevice && mouseOver && !disableLinkMouseOver}
         <a
-          class="z-2 absolute w-full top-0 bottom-0"
+          class="absolute inset-y-0 z-2 w-full"
           style:cursor="unset"
           href={currentUrlReplaceAssetId(asset.id)}
           onclick={(evt) => evt.preventDefault()}
@@ -408,7 +405,7 @@
 
     {#if selectionCandidate}
       <div
-        class={['z-2 absolute top-0 h-full w-full bg-immich-primary opacity-40', { 'rounded-xl': selected }]}
+        class={['absolute top-0 z-2 size-full bg-immich-primary opacity-40', { 'rounded-xl': selected }]}
         in:fade={{ duration: 100 }}
         out:fade={{ duration: 100 }}
       ></div>
@@ -446,7 +443,7 @@
           e.preventDefault();
           onPreview?.($state.snapshot(asset));
         }}
-        class="absolute z-2 bottom-1 end-1 rounded-full bg-black/25 p-1.5 hover:bg-black/50 focus:outline-none transition-colors"
+        class="absolute inset-e-1 bottom-1 z-2 rounded-full bg-black/25 p-1.5 transition-colors hover:bg-black/50 focus:outline-none"
         in:fade={{ duration: 100 }}
         tabindex={-1}
         aria-label="Preview asset"
@@ -458,7 +455,7 @@
     <!-- Outline on focus -->
     <div
       class={[
-        'pointer-events-none absolute z-1 size-full outline-immich-primary dark:outline-immich-dark-primary group-focus-visible:outline-4 group-focus-visible:-outline-offset-4',
+        'pointer-events-none absolute z-1 size-full outline-immich-primary group-focus-visible:outline-4 group-focus-visible:-outline-offset-4 dark:outline-immich-dark-primary',
         { 'rounded-xl': selected },
       ]}
       data-outline
diff --git a/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
index db5ecdefa7..c62abac3c2 100644
--- a/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
@@ -94,10 +94,10 @@
 {/if}
 
 <div
-  class="@container absolute inset-x-0 top-0 flex justify-end place-items-center gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
+  class="@container absolute inset-x-0 top-0 flex place-items-center justify-end gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
 >
   {#if showTime}
-    <span class="hidden @min-[100px]:inline pt-2">
+    <span class="hidden pt-2 @min-[100px]:inline">
       {#if remainingSeconds < 60}
         {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
       {:else if remainingSeconds < 3600}
@@ -110,7 +110,7 @@
 
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <span
-    class="pe-2 pt-2 @max-[99px]:scale-75 @max-[99px]:pe-1 @max-[99px]:pt-1 drop-shadow-[1px_1px_6px_rgb(0_0_0)]"
+    class="pe-2 pt-2 drop-shadow-[1px_1px_6px_rgb(0_0_0)] @max-[99px]:scale-75 @max-[99px]:pe-1 @max-[99px]:pt-1"
     onmouseenter={onMouseEnter}
     onmouseleave={onMouseLeave}
   >
diff --git a/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
index 477d62cf67..23f17948b1 100644
--- a/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
+++ b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
@@ -73,7 +73,7 @@
 
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
+  class="absolute top-0 h-full w-90 overflow-x-hidden bg-light p-2 dark:text-immich-dark-fg"
 >
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}
@@ -123,7 +123,7 @@
         aria-label={$t('back')}
         onclick={onClose}
       />
-      <div class="w-full flex">
+      <div class="flex w-full">
         <SearchPeople
           type="input"
           bind:searchName
@@ -146,14 +146,14 @@
       />
     {/if}
   </div>
-  <div class="px-4 py-4 text-sm">
-    <h2 class="mb-8 mt-4">{$t('all_people')}</h2>
+  <div class="p-4 text-sm">
+    <h2 class="mt-4 mb-8">{$t('all_people')}</h2>
     {#if isShowLoadingPeople}
       <div class="flex w-full justify-center">
         <LoadingSpinner />
       </div>
     {:else}
-      <div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
+      <div class="mt-4 flex flex-wrap gap-2 overflow-y-auto immich-scrollbar">
         {#each showPeople as person (person.id)}
           {#if !editedFace.person || person.id !== editedFace.person.id}
             <div class="w-fit">
diff --git a/web/src/lib/components/faces-page/PersonSidePanel.svelte b/web/src/lib/components/faces-page/PersonSidePanel.svelte
index 657be179c6..eedd6766eb 100644
--- a/web/src/lib/components/faces-page/PersonSidePanel.svelte
+++ b/web/src/lib/components/faces-page/PersonSidePanel.svelte
@@ -202,7 +202,7 @@
 
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
+  class="absolute top-0 h-full w-90 overflow-x-hidden bg-light p-2 dark:text-immich-dark-fg"
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">
@@ -229,7 +229,7 @@
     {/if}
   </div>
 
-  <div class="px-4 py-4 text-sm">
+  <div class="p-4 text-sm">
     <div class="mt-4 flex flex-wrap gap-2">
       {#if isShowLoadingPeople}
         <div class="flex w-full justify-center">
@@ -243,7 +243,7 @@
             <div
               role="button"
               tabindex={index}
-              class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
+              class="absolute inset-s-0 top-0 size-22.5 cursor-default"
               onfocus={() => assetViewerManager.setHighlightedFaces([peopleWithFaces[index]])}
               onpointerenter={() => assetViewerManager.setHighlightedFaces([peopleWithFaces[index]])}
               onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
@@ -324,7 +324,7 @@
                 </p>
               {/if}
 
-              <div class="absolute -end-[3px] -top-[3px] h-5 w-5 rounded-full">
+              <div class="absolute inset-e-[-3px] top-[-3px] size-5 rounded-full">
                 {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
                   <IconButton
                     shape="round"
@@ -333,7 +333,7 @@
                     icon={mdiRestart}
                     aria-label={$t('reset')}
                     size="small"
-                    class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
+                    class="absolute inset-s-1/2 top-1/2 translate-[-50%] transform"
                     onclick={() => handleReset(face.id)}
                   />
                 {:else}
@@ -343,29 +343,29 @@
                     icon={mdiPencil}
                     aria-label={$t('select_new_face')}
                     size="small"
-                    class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
+                    class="absolute inset-s-1/2 top-1/2 translate-[-50%] transform"
                     onclick={() => handleFacePicker(face)}
                   />
                 {/if}
               </div>
-              <div class="absolute end-8 -top-[3px] h-5 w-5 rounded-full">
+              <div class="absolute inset-e-8 top-[-3px] size-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"
+                    class="absolute inset-s-1/2 top-1/2 flex translate-[-50%] transform place-content-center place-items-center rounded-full bg-[#d3d3d3] p-1 transition-all"
                   >
                     <Icon color="primary" icon={mdiAccountOff} aria-hidden size="24" />
                   </div>
                 {/if}
               </div>
               {#if face.person != null}
-                <div class="absolute -end-[3px] top-8 h-5 w-5 rounded-full">
+                <div class="absolute inset-e-[-3px] top-8 size-5 rounded-full">
                   <IconButton
                     shape="round"
                     color="danger"
                     icon={mdiTrashCan}
                     aria-label={$t('delete_face')}
                     size="small"
-                    class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
+                    class="absolute inset-s-1/2 top-1/2 translate-[-50%] transform"
                     onclick={() => deleteAssetFace(face)}
                   />
                 </div>
diff --git a/web/src/lib/components/layouts/AdminPageLayout.svelte b/web/src/lib/components/layouts/AdminPageLayout.svelte
index 7f80e3911a..7d2003f225 100644
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -25,9 +25,9 @@
   </AppShellHeader>
   <AppShellSidebar
     bind:open={sidebarStore.isOpen}
-    class="border-none shadow-none h-full flex flex-col justify-between gap-2"
+    class="flex h-full flex-col justify-between gap-2 border-none shadow-none"
   >
-    <div class="flex flex-col pt-8 pe-4 gap-1">
+    <div class="flex flex-col gap-1 pe-4 pt-8">
       <NavbarItem title={$t('users')} href={Route.users()} icon={mdiAccountMultipleOutline} />
       <NavbarItem title={$t('external_libraries')} href={Route.libraries()} icon={mdiBookshelf} />
       <NavbarItem title={$t('admin.queues')} href={Route.queues()} icon={mdiTrayFull} />
@@ -36,7 +36,7 @@
       <NavbarItem title={$t('server_stats')} href={Route.systemStatistics()} icon={mdiServer} />
     </div>
 
-    <div class="mb-2 me-4">
+    <div class="me-4 mb-2">
       <BottomInfo />
     </div>
   </AppShellSidebar>
diff --git a/web/src/lib/components/layouts/AuthPageLayout.svelte b/web/src/lib/components/layouts/AuthPageLayout.svelte
index 63c2bedbe3..bdc3c5d9ef 100644
--- a/web/src/lib/components/layouts/AuthPageLayout.svelte
+++ b/web/src/lib/components/layouts/AuthPageLayout.svelte
@@ -11,21 +11,21 @@
   let { title, children, withHeader = true, withBackdrop = true }: Props = $props();
 </script>
 
-<section class="min-w-dvw flex min-h-dvh items-center justify-center relative isolate">
+<section class="relative isolate flex min-h-dvh min-w-dvw items-center justify-center">
   {#if withBackdrop}
-    <div class="absolute -z-10 w-full h-full flex place-items-center place-content-center">
+    <div class="absolute -z-10 flex size-full place-content-center place-items-center">
       <img
         src={immichLogo}
-        class="max-w-(--breakpoint-md) mx-auto h-full mb-2 antialiased overflow-hidden"
+        class="mx-auto mb-2 h-full max-w-(--breakpoint-md) overflow-hidden antialiased"
         alt="Immich logo"
       />
       <div
-        class="w-full h-[99%] absolute inset-s-0 top-0 backdrop-blur-[200px] bg-transparent dark:bg-immich-dark-bg/20"
+        class="absolute inset-s-0 top-0 h-[99%] w-full bg-transparent backdrop-blur-[200px] dark:bg-immich-dark-bg/20"
       ></div>
     </div>
   {/if}
 
-  <Card color="secondary" class="w-full max-w-xl border m-2">
+  <Card color="secondary" class="m-2 w-full max-w-xl border">
     {#if withHeader}
       <CardHeader class="mt-6">
         <VStack>
diff --git a/web/src/lib/components/layouts/UserPageLayout.svelte b/web/src/lib/components/layouts/UserPageLayout.svelte
index 17db326c56..9e0bb86d4e 100644
--- a/web/src/lib/components/layouts/UserPageLayout.svelte
+++ b/web/src/lib/components/layouts/UserPageLayout.svelte
@@ -71,9 +71,9 @@
 
     {#if title || buttons}
       <div class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 text-dark">
-        <div class="flex gap-2 items-center">
+        <div class="flex items-center gap-2">
           {#if title}
-            <div class="outline-none pe-8" tabindex="-1" id={headerId}>{title}</div>
+            <div class="pe-8 outline-none" tabindex="-1" id={headerId}>{title}</div>
           {/if}
           {#if description}
             <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
diff --git a/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte b/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
index 5aa00d210e..219956269d 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
+++ b/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
@@ -57,9 +57,9 @@
 <OnEvents {onBackupDeleteStatus} />
 
 <Card class="dark:bg-dark-900">
-  <CardBody class="pt-3 pb-4 px-6">
-    <Stack gap={3} class="grow min-w-0">
-      <div class="flex justify-between items-center gap-3">
+  <CardBody class="px-6 pt-3 pb-4">
+    <Stack gap={3} class="min-w-0 grow">
+      <div class="flex items-center justify-between gap-3">
         <HStack gap={2} class="min-w-0">
           {#if status === BackupFileStatus.OK}
             <Icon icon={mdiCheckCircle} size="18" class="text-success" />
@@ -76,7 +76,7 @@
           {/if}
           {#if relativeTime}
             <div class="flex items-center gap-2">
-              <div class="w-1 h-1 bg-light-500"></div>
+              <div class="size-1 bg-light-500"></div>
               <Text size="tiny" color="muted">{relativeTime}</Text>
             </div>
           {/if}
@@ -97,7 +97,7 @@
 
       <HStack>
         <Icon icon={mdiDatabaseRefreshOutline} size="16" color="gray" />
-        <Text size="small" class="break-all font-mono">{filename}</Text>
+        <Text size="small" class="font-mono break-all">{filename}</Text>
       </HStack>
 
       {#if status === BackupFileStatus.UnknownVersion}
diff --git a/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte b/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
index fbadcef31c..8582806c94 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
+++ b/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
@@ -91,8 +91,8 @@
   <Card color="info">
     <CardBody>
       {#if uploadProgress === -1}
-        <div class="flex justify-between items-center">
-          <div class="flex gap-2 items-end w-max">
+        <div class="flex items-center justify-between">
+          <div class="flex w-max items-end gap-2">
             <Icon icon={mdiTrayArrowUp} size="20" class="text-muted"></Icon>
             <Text class="grow">{$t('admin.maintenance_upload_backup')}</Text>
           </div>
@@ -118,7 +118,7 @@
   {#each [...groupedBackups.entries()] as [dateGroup, groupBackups] (dateGroup)}
     <Stack gap={2}>
       <div class="mt-5 mb-1">
-        <div class="bg-primary-50 flex gap-2 px-4 py-2 rounded-xl w-max place-items-center">
+        <div class="flex w-max place-items-center gap-2 rounded-xl bg-primary-50 px-4 py-2">
           <Icon icon={mdiCalendar} size="18" />
           <Text size="small" fontWeight="medium" color="muted">{dateGroup}</Text>
         </div>
diff --git a/web/src/lib/components/pages/SharedLinkErrorPage.svelte b/web/src/lib/components/pages/SharedLinkErrorPage.svelte
index 17087f0e06..9fc8f3be96 100644
--- a/web/src/lib/components/pages/SharedLinkErrorPage.svelte
+++ b/web/src/lib/components/pages/SharedLinkErrorPage.svelte
@@ -7,7 +7,7 @@
   <title>{$t('error')} - Immich</title>
 </svelte:head>
 
-<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
+<section class="flex h-dvh w-dvw flex-col place-content-center place-items-center px-4">
   <h1 class="py-10 text-4xl text-primary"><span>{$t('errors.page_not_found')}</span><span class="ps-3">:/</span></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/lib/components/pages/SharedLinkPage.svelte b/web/src/lib/components/pages/SharedLinkPage.svelte
index 35a56579d6..5f5a7e6783 100644
--- a/web/src/lib/components/pages/SharedLinkPage.svelte
+++ b/web/src/lib/components/pages/SharedLinkPage.svelte
@@ -71,9 +71,9 @@
 </svelte:head>
 {#if passwordRequired}
   <main
-    class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40"
+    class="relative h-dvh overflow-hidden px-6 pt-(--navbar-height) max-md:pt-(--navbar-height-md) sm:px-12 md:px-24 lg:px-40"
   >
-    <div class="flex flex-col items-center justify-center mt-20">
+    <div class="mt-20 flex flex-col items-center justify-center">
       <div class="text-2xl font-bold text-primary">{$t('password_required')}</div>
       <div class="mt-4 text-lg text-primary">
         {$t('sharing_enter_password')}
diff --git a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
index 6e45669b40..b9498b08c4 100644
--- a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
+++ b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
@@ -25,25 +25,25 @@
   };
 </script>
 
-<div class="flex h-35 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 p-5 text-primary">
   <div class="flex place-items-center gap-4">
     <Icon {icon} size="40" />
     <Text size="giant" fontWeight="medium">{title}</Text>
   </div>
 
   {#await valuePromise}
-    <div class="mx-auto font-mono text-2xl font-medium relative">
-      <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros()}</span>
+    <div class="relative mx-auto font-mono text-2xl font-medium">
+      <span class="shimmer-text text-gray-300 dark:text-gray-600">{zeros()}</span>
     </div>
   {:then data}
-    <div class="mx-auto font-mono text-2xl font-medium relative">
+    <div class="relative mx-auto font-mono text-2xl font-medium">
       <span class="text-gray-300 dark:text-gray-600">{zeros(data)}</span><span>{data.value}</span>
       {#if data.unit}
         <code class="font-mono text-base font-normal">{data.unit}</code>
       {/if}
     </div>
   {:catch _}
-    <div class="mx-auto font-mono text-2xl font-medium relative">
+    <div class="relative mx-auto font-mono text-2xl font-medium">
       <span class="text-gray-300 dark:text-gray-600">{zeros()}</span>
     </div>
   {/await}
diff --git a/web/src/lib/components/share-page/IndividualSharedViewer.svelte b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
index b294fa8158..86b716da40 100644
--- a/web/src/lib/components/share-page/IndividualSharedViewer.svelte
+++ b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
@@ -74,11 +74,11 @@
 </script>
 
 {#if sharedLink?.allowUpload || assets.length > 1}
-  <main class="mt-24 mb-40 mx-4 isolate" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
+  <main class="isolate mx-4 mt-24 mb-40" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
     <GalleryViewer {assets} assetInteraction={assetMultiSelectManager} {viewport} allowDeletion={false} />
   </main>
 
-  <header class="fixed top-0 inset-s-0 w-full">
+  <header class="fixed inset-s-0 top-0 w-full">
     {#if assetMultiSelectManager.selectionActive}
       <AssetSelectControlBar>
         <IconButton
diff --git a/web/src/lib/components/shared-components/Combobox.svelte b/web/src/lib/components/shared-components/Combobox.svelte
index 803087feef..7b0e867343 100644
--- a/web/src/lib/components/shared-components/Combobox.svelte
+++ b/web/src/lib/components/shared-components/Combobox.svelte
@@ -268,9 +268,9 @@
 </script>
 
 <svelte:window onresize={onPositionChange} />
-<Label class="block mb-1 {hideLabel ? 'sr-only' : ''} text-xs text-neutral-500 font-light" for={inputId}>{label}</Label>
+<Label class="mb-1 block {hideLabel ? 'sr-only' : ''} text-xs font-light text-neutral-500" for={inputId}>{label}</Label>
 <div
-  class="relative w-full dark:text-gray-300 text-gray-700 text-base"
+  class="relative w-full text-base text-gray-700 dark:text-gray-300"
   use:focusOutside={{ onFocusOut: deactivate }}
   use:shortcuts={[
     {
@@ -284,7 +284,7 @@
 >
   <div>
     {#if isActive}
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3">
+      <div class="absolute inset-y-0 inset-s-0 flex items-center ps-3">
         <div class="dark:text-immich-dark-fg/75">
           <Icon icon={mdiMagnify} aria-hidden />
         </div>
@@ -300,11 +300,11 @@
       aria-expanded={isOpen}
       autocomplete="off"
       bind:this={input}
-      class:!ps-8={isActive}
-      class:!rounded-b-none={isOpen && dropdownDirection === 'bottom'}
-      class:!rounded-t-none={isOpen && dropdownDirection === 'top'}
+      class:ps-8!={isActive}
+      class:rounded-b-none!={isOpen && dropdownDirection === 'bottom'}
+      class:rounded-t-none!={isOpen && dropdownDirection === 'top'}
       class:cursor-pointer={!isActive}
-      class="immich-form-input text-sm w-full pe-12! transition-all"
+      class="immich-form-input w-full pe-12! text-sm transition-all"
       id={inputId}
       onfocus={activate}
       oninput={onInput}
@@ -355,7 +355,7 @@
     />
 
     <div
-      class="absolute end-0 top-0 h-full flex px-4 justify-center items-center content-between"
+      class="absolute inset-e-0 top-0 flex h-full content-between items-center justify-center px-4"
       class:pe-2={selectedOption}
       class:pointer-events-none={!selectedOption}
     >
@@ -379,10 +379,10 @@
     role="listbox"
     id={listboxId}
     in:fly={{ duration: 250 }}
-    class="fixed z-1 text-start text-sm w-full overflow-y-auto bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-900"
+    class="fixed z-1 w-full overflow-y-auto border-gray-300 bg-white text-start text-sm dark:border-gray-900 dark:bg-gray-800"
     class:rounded-b-xl={dropdownDirection === 'bottom'}
     class:rounded-t-xl={dropdownDirection === 'top'}
-    class:shadow={dropdownDirection === 'bottom'}
+    class:shadow-sm={dropdownDirection === 'bottom'}
     class:border={isOpen}
     style:top={position?.top}
     style:bottom={position?.bottom}
@@ -398,7 +398,7 @@
           role="option"
           aria-selected={selectedIndex === 0}
           aria-disabled={true}
-          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700"
+          class="w-full cursor-default px-4 py-2 text-start hover:bg-gray-200 aria-selected:bg-gray-200 dark:hover:bg-gray-700 aria-selected:dark:bg-gray-700"
           id={`${listboxId}-${0}`}
           onclick={closeDropdown}
         >
@@ -410,7 +410,7 @@
         <li
           aria-selected={index === selectedIndex}
           bind:this={optionRefs[index]}
-          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 wrap-break-words"
+          class="wrap-break-words w-full cursor-pointer px-4 py-2 text-start transition-all hover:bg-gray-200 aria-selected:bg-gray-200 dark:hover:bg-gray-700 aria-selected:dark:bg-gray-700"
           id={`${listboxId}-${index}`}
           onclick={() => handleSelect(option)}
           role="option"
diff --git a/web/src/lib/components/shared-components/ControlAppBar.svelte b/web/src/lib/components/shared-components/ControlAppBar.svelte
index 7c844cb4d9..b515e9a165 100644
--- a/web/src/lib/components/shared-components/ControlAppBar.svelte
+++ b/web/src/lib/components/shared-components/ControlAppBar.svelte
@@ -66,12 +66,12 @@
       !multiRow && 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]',
       'justify-between lg:grid-cols-[25%_50%_25%]',
       appBarBorder,
-      'mx-2 my-2 place-items-center rounded-lg p-2 max-md:p-0 transition-all',
+      'm-2 place-items-center rounded-lg p-2 transition-all max-md:p-0',
       tailwindClasses,
       forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-subtle dark:bg-immich-dark-gray',
     ]}
   >
-    <div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg {forceDark ? 'dark' : ''}">
+    <div class="flex place-items-center justify-self-start sm:gap-6 dark:text-immich-dark-fg {forceDark ? 'dark' : ''}">
       {#if showBackButton}
         <IconButton
           aria-label={$t('close')}
@@ -90,7 +90,7 @@
       {@render children?.()}
     </div>
 
-    <div class="max-[350px]:me-0 max-[350px]:gap-0 me-4 flex place-items-center gap-1 justify-self-end">
+    <div class="me-4 flex place-items-center gap-1 justify-self-end max-[350px]:me-0 max-[350px]:gap-0">
       {@render trailing?.()}
     </div>
   </nav>
diff --git a/web/src/lib/components/shared-components/EmptyPlaceholder.svelte b/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
index 78c675c93b..c7598829d9 100644
--- a/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
+++ b/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
@@ -28,7 +28,7 @@
   <img {src} alt="" width="500" draggable="false" />
 
   {#if title}
-    <h2 class="text-xl font-medium my-4">{title}</h2>
+    <h2 class="my-4 text-xl font-medium">{title}</h2>
   {/if}
-  <p class="text-immich-text-gray-500 dark:text-immich-dark-fg font-light text-center">{text}</p>
+  <p class="text-immich-text-gray-500 text-center font-light dark:text-immich-dark-fg">{text}</p>
 </svelte:element>
diff --git a/web/src/lib/components/shared-components/Qrcode.svelte b/web/src/lib/components/shared-components/Qrcode.svelte
index 7ac23f8a34..f9fed03f59 100644
--- a/web/src/lib/components/shared-components/Qrcode.svelte
+++ b/web/src/lib/components/shared-components/Qrcode.svelte
@@ -15,6 +15,6 @@
 
 <div style="width: {width}px; height: {width}px">
   {#await promise then url}
-    <img src={url} {alt} class="h-full w-full" />
+    <img src={url} {alt} class="size-full" />
   {/await}
 </div>
diff --git a/web/src/lib/components/shared-components/TagPill.svelte b/web/src/lib/components/shared-components/TagPill.svelte
index 43148c5954..b1eacafa21 100644
--- a/web/src/lib/components/shared-components/TagPill.svelte
+++ b/web/src/lib/components/shared-components/TagPill.svelte
@@ -11,9 +11,9 @@
   let { label, onRemove }: Props = $props();
 </script>
 
-<div class="flex group transition-all">
+<div class="group flex transition-all">
   <span
-    class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary rounded-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+    class="inline-block h-min rounded-s-full bg-primary py-1 ps-3 pe-1 text-center align-baseline leading-none whitespace-nowrap text-gray-100 transition-all group-hover:ps-3 hover:bg-immich-primary/80 dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80"
   >
     <p class="text-sm">
       {label}
@@ -22,7 +22,7 @@
 
   <button
     type="button"
-    class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+    class="place-content-center place-items-center rounded-e-full bg-immich-primary/95 py-1 ps-1 pe-2 text-gray-100 transition-all hover:bg-immich-primary/80 dark:bg-immich-dark-primary/95 dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80"
     title={$t('remove_tag')}
     onclick={onRemove}
   >
diff --git a/web/src/lib/components/shared-components/UserAvatar.svelte b/web/src/lib/components/shared-components/UserAvatar.svelte
index 290a6144c2..0791df13d0 100644
--- a/web/src/lib/components/shared-components/UserAvatar.svelte
+++ b/web/src/lib/components/shared-components/UserAvatar.svelte
@@ -78,7 +78,7 @@
 </script>
 
 <figure
-  class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md rounded-full"
+  class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden rounded-full shadow-md"
   title={noTitle ? undefined : title}
 >
   {#if user.profileImagePath}
@@ -86,14 +86,14 @@
       bind:this={img}
       src={getProfileImageUrl(user)}
       alt={$t('profile_image_of_user', { values: { user: title } })}
-      class="h-full w-full object-cover"
+      class="size-full object-cover"
       class:hidden={showFallback}
       draggable="false"
     />
   {/if}
   {#if showFallback}
     <span
-      class="uppercase flex h-full w-full select-none items-center justify-center font-medium"
+      class="flex size-full items-center justify-center font-medium uppercase select-none"
       class:text-xs={size === 'sm'}
       class:text-lg={size === 'lg'}
       class:text-xl={size === 'xl'}
diff --git a/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte b/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
index f2450ebdbc..82e1185cad 100644
--- a/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
+++ b/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
@@ -26,11 +26,11 @@
   type="button"
   onclick={() => onNewAlbum(searchQuery)}
   use:scrollIntoViewIfSelected
-  class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
+  class="flex w-full items-center gap-4 rounded-xl px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
   class:bg-gray-200={selected}
   class:dark:bg-gray-700={selected}
 >
-  <div class="flex h-12 w-12 items-center justify-center">
+  <div class="flex size-12 items-center justify-center">
     <Icon icon={mdiPlus} size="30" />
   </div>
   <p class="">
diff --git a/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte b/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
index 58ae508320..9d849cfbfc 100644
--- a/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
@@ -64,7 +64,7 @@
 <div
   bind:this={menuScrollView}
   class={[
-    'duration-250 ease-in-out fixed min-w-50 w-max max-w-75 rounded-lg shadow-lg bg-slate-100 z-1 immich-scrollbar',
+    'fixed z-1 w-max max-w-75 min-w-50 rounded-lg bg-slate-100 shadow-lg duration-250 ease-in-out immich-scrollbar',
     position.needScrollBar ? 'overflow-auto' : 'overflow-hidden',
   ]}
   style:left="{position.left}px"
diff --git a/web/src/lib/components/shared-components/context-menu/MenuOption.svelte b/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
index dc5a2d7c0f..b4a6f060a0 100644
--- a/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
+++ b/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
@@ -53,7 +53,7 @@
   onclick={handleClick}
   onmouseover={() => ($selectedIdStore = id)}
   onmouseleave={() => ($selectedIdStore = undefined)}
-  class="w-full p-4 text-start text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
+  class="w-full p-4 text-start text-sm font-medium {textColor} flex cursor-pointer items-center gap-2 border-gray-200 focus:ring-2 focus:outline-none focus:ring-inset {isActive
     ? activeColor
     : 'bg-slate-100'}"
   role="menuitem"
@@ -65,7 +65,7 @@
     <div class="flex justify-between">
       {text}
       {#if shortcutLabel}
-        <span class="text-gray-500 ps-4">
+        <span class="ps-4 text-gray-500">
           {shortcutLabel}
         </span>
       {/if}
diff --git a/web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte b/web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte
index 6e0a974792..6b685f6d2d 100644
--- a/web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte
@@ -91,7 +91,7 @@
         },
       ]}
     >
-      <section class="fixed start-0 top-0 flex h-dvh w-dvw" {oncontextmenu} role="presentation">
+      <section class="fixed inset-s-0 top-0 flex h-dvh w-dvw" {oncontextmenu} role="presentation">
         <ContextMenu
           {direction}
           {x}
diff --git a/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
index 552954ddf3..fc2131310a 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
@@ -387,7 +387,7 @@
           />
           {#if showAssetName && !isTimelineAsset(asset)}
             <div
-              class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-linear-to-t bg-slate-50/75 dark:bg-slate-800/75 overflow-clip text-ellipsis whitespace-pre-wrap"
+              class="absolute bottom-0 w-full overflow-clip bg-slate-50/75 bg-linear-to-t p-1 text-center font-mono text-xs font-semibold text-ellipsis whitespace-pre-wrap dark:bg-slate-800/75"
             >
               {asset.originalFileName}
             </div>
diff --git a/web/src/lib/components/shared-components/map/Map.svelte b/web/src/lib/components/shared-components/map/Map.svelte
index 226a99cd1e..52686bdd41 100644
--- a/web/src/lib/components/shared-components/map/Map.svelte
+++ b/web/src/lib/components/shared-components/map/Map.svelte
@@ -390,7 +390,7 @@
       >
         {#snippet children({ feature })}
           <div
-            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"
+            class="flex size-10 items-center justify-center rounded-full bg-immich-primary font-mono font-bold text-white opacity-90 shadow-lg transition-all duration-200 hover:bg-immich-dark-primary hover:text-immich-dark-bg"
           >
             {feature.properties?.point_count?.toLocaleString()}
           </div>
@@ -407,11 +407,11 @@
       >
         {#snippet children({ feature }: { feature: Feature })}
           {#if useLocationPin}
-            <Icon icon={mdiMapMarker} size="50px" class="text-primary -translate-y-[50%]" />
+            <Icon icon={mdiMapMarker} size="50px" class="translate-y-[-50%] text-primary" />
           {:else}
             <img
               src={getAssetMediaUrl({ id: feature.properties?.id })}
-              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"
+              class="size-15 rounded-full border-2 border-immich-primary bg-immich-primary object-cover shadow-lg transition-all duration-200 hover:scale-150 hover:border-immich-dark-primary"
               alt={feature.properties?.city && feature.properties.country
                 ? $t('map_marker_for_images', {
                     values: { city: feature.properties.city, country: feature.properties.country },
diff --git a/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte b/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
index b661837c69..6242309622 100644
--- a/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
@@ -31,7 +31,7 @@
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
   id="account-info-panel"
-  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"
+  class="absolute inset-e-6 top-19 z-1 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
@@ -39,7 +39,7 @@
   >
     <div class="relative">
       <UserAvatar user={authManager.user} size="xl" />
-      <div class="absolute bottom-0 end-0 rounded-full w-6 h-6">
+      <div class="absolute inset-e-0 bottom-0 size-6 rounded-full">
         <IconButton
           color="primary"
           icon={mdiPencil}
@@ -68,9 +68,9 @@
         color="secondary"
         variant="ghost"
         shape="round"
-        class="border dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white"
+        class="border hover:bg-immich-primary/10 dark:border-immich-dark-gray dark:bg-gray-500 dark:text-white dark:hover:bg-immich-dark-primary/50"
       >
-        <div class="flex place-content-center place-items-center text-center gap-2 px-2">
+        <div class="flex place-content-center place-items-center gap-2 px-2 text-center">
           <Icon icon={mdiCog} size="18" aria-hidden />
           {$t('account_settings')}
         </div>
@@ -84,9 +84,9 @@
           size="small"
           color="secondary"
           aria-current={page.url.pathname.includes('/admin') ? 'page' : undefined}
-          class="border dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white"
+          class="border hover:bg-immich-primary/10 dark:border-immich-dark-gray dark:bg-gray-500 dark:text-white dark:hover:bg-immich-dark-primary/50"
         >
-          <div class="flex place-content-center place-items-center text-center gap-2 px-2">
+          <div class="flex place-content-center place-items-center gap-2 px-2 text-center">
             <Icon icon={mdiWrench} size="18" aria-hidden />
             {$t('administration')}
           </div>
@@ -106,7 +106,7 @@
 
     <button
       type="button"
-      class="text-center mt-4 underline text-xs text-primary"
+      class="mt-4 text-center text-xs text-primary underline"
       onclick={async () => {
         onClose?.();
         if (info) {
diff --git a/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte b/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
index 705f1455a1..ac7c30d2cc 100644
--- a/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
@@ -49,14 +49,14 @@
 
 <svelte:window bind:innerWidth />
 
-<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm">
+<nav id="dashboard-navbar" class="h-(--navbar-height) w-dvw text-sm max-md:h-(--navbar-height-md)">
   <SkipLink text={$t('skip_to_content')} />
   <div
     class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder
       ? ''
       : 'border-b'}"
   >
-    <div class="flex flex-row gap-1 mx-4 items-center">
+    <div class="mx-4 flex flex-row items-center gap-1">
       <IconButton
         id={menuButtonId}
         shape="round"
@@ -80,14 +80,14 @@
         <Logo variant={mediaQueryManager.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
       </a>
     </div>
-    <div class="flex justify-between gap-4 lg:gap-8 pe-6">
-      <div class="hidden w-full max-w-5xl flex-1 tall:ps-0 sm:block">
+    <div class="flex justify-between gap-4 pe-6 lg:gap-8">
+      <div class="hidden w-full max-w-5xl flex-1 sm:block tall:ps-0">
         {#if featureFlagsManager.value.search}
           <SearchBar grayTheme={true} />
         {/if}
       </div>
 
-      <section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
+      <section class="flex w-full place-items-center justify-end gap-1 sm:w-auto md:gap-2">
         {#if featureFlagsManager.value.search}
           <IconButton
             color="secondary"
@@ -146,7 +146,7 @@
 
             {#if hasUnreadNotifications}
               <div
-                class="pointer-events-none absolute border top-0 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-light"
+                class="pointer-events-none absolute top-0 right-1 flex size-5 items-center justify-center rounded-full border bg-primary text-[10px] font-bold text-light"
               >
                 {notificationManager.notifications.length}
               </div>
diff --git a/web/src/lib/components/shared-components/navigation-bar/NotificationItem.svelte b/web/src/lib/components/shared-components/navigation-bar/NotificationItem.svelte
index 412ba47cf1..cea3717878 100644
--- a/web/src/lib/components/shared-components/navigation-bar/NotificationItem.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NotificationItem.svelte
@@ -100,13 +100,13 @@
 </script>
 
 <button
-  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"
+  class="min-h-20 w-full border-b border-gray-200 p-2 py-3 hover:bg-immich-primary/10 dark:border-immich-dark-gray dark:hover:bg-immich-dark-primary/10"
   type="button"
   onclick={() => onclick(notification)}
   title={notification.createdAt}
 >
   <div class="grid grid-cols-[56px_1fr_32px] items-center gap-2">
-    <div class="flex place-items-center place-content-center">
+    <div class="flex place-content-center place-items-center">
       <IconButton
         icon={getIconType(notification.type)}
         color={getAlertColor(notification.level)}
@@ -118,7 +118,7 @@
     </div>
 
     <Stack class="text-left" gap={1}>
-      <Text size="tiny" class="text-black dark:text-white text-base" fontWeight="semi-bold">{notification.title}</Text>
+      <Text size="tiny" class="text-base text-black dark:text-white" fontWeight="semi-bold">{notification.title}</Text>
       {#if notification.description}
         <Text class="overflow-hidden text-gray-600 dark:text-gray-300">{notification.description}</Text>
       {/if}
@@ -127,7 +127,7 @@
     </Stack>
 
     {#if !notification.readAt}
-      <div class="w-2 h-2 rounded-full bg-primary text-right justify-self-center"></div>
+      <div class="size-2 justify-self-center rounded-full bg-primary text-right"></div>
     {/if}
   </div>
 </button>
diff --git a/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte b/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
index 42456151ef..79cfff858a 100644
--- a/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
@@ -66,11 +66,11 @@
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
   id="notification-panel"
-  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"
+  class="absolute top-17.5 right-6 z-1 w-[min(360px,100vw-50px)] rounded-3xl border border-gray-200 bg-gray-100 text-light shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray"
   use:focusTrap
 >
   <Stack class="max-h-125">
-    <div class="flex justify-between items-center mt-4 mx-4">
+    <div class="mx-4 mt-4 flex items-center justify-between">
       <Text size="medium" color="secondary" fontWeight="semi-bold">{$t('notifications')}</Text>
       <div>
         <Button
@@ -88,7 +88,7 @@
 
     {#if noUnreadNotifications}
       <Stack
-        class="py-12 flex flex-col place-items-center place-content-center text-gray-700 dark:text-gray-300"
+        class="flex flex-col place-content-center place-items-center py-12 text-gray-700 dark:text-gray-300"
         gap={1}
       >
         <Icon icon={mdiBellOutline} size="20"></Icon>
diff --git a/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte b/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
index 1ed0cdf9ac..05b15eea7f 100644
--- a/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
+++ b/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
@@ -91,5 +91,5 @@
 </script>
 
 {#if !hidden}
-  <span class="absolute start-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`}></span>
+  <span class="absolute inset-s-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`}></span>
 {/if}
diff --git a/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte b/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
index 205324aecf..4f309519fb 100644
--- a/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
+++ b/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
@@ -8,11 +8,11 @@
 
 <!-- Individual Purchase Option -->
 <div
-  class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
+  class="w-[min(375px,100%)] rounded-3xl border border-gray-300 bg-gray-100 p-8 dark:border-gray-800 dark:bg-gray-900"
 >
   <div class="text-primary">
     <Icon icon={mdiAccount} size="56" />
-    <p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
+    <p class="mt-1 text-lg font-semibold">{$t('purchase_individual_title')}</p>
   </div>
 
   <div class="mt-4 dark:text-immich-gray">
@@ -20,20 +20,20 @@
     <p>{$t('purchase_per_user')}</p>
   </div>
 
-  <div class="flex flex-col justify-between h-50 dark:text-immich-gray">
+  <div class="flex h-50 flex-col justify-between 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" />
+        <Icon icon={mdiCheckCircleOutline} size="24" class="self-center text-green-500" />
         <p class="self-center">{$t('purchase_individual_description_1')}</p>
       </div>
 
       <div class="grid grid-cols-[36px_auto]">
-        <Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <Icon icon={mdiCheckCircleOutline} size="24" class="self-center text-green-500" />
         <p class="self-center">{$t('purchase_lifetime_description')}</p>
       </div>
 
       <div class="grid grid-cols-[36px_auto]">
-        <Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <Icon icon={mdiCheckCircleOutline} size="24" class="self-center text-green-500" />
         <p class="self-center">{$t('purchase_individual_description_2')}</p>
       </div>
     </div>
diff --git a/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte b/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
index 46c2b91491..c70c2dfe8e 100644
--- a/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
+++ b/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
@@ -13,12 +13,12 @@
   let { onDone }: Props = $props();
 </script>
 
-<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6">
+<div class="m-auto my-6 flex w-3/4 flex-col place-content-center place-items-center text-center">
   <Icon icon={mdiPartyPopper} class="text-primary" size="96" />
-  <p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
-  <p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>
+  <p class="mt-8 text-4xl font-bold">{$t('purchase_activated_title')}</p>
+  <p class="mt-6 text-lg">{$t('purchase_activated_subtitle')}</p>
 
-  <div class="mb-4 w-full mt-6 border rounded-xl p-4 bg-gray-50 dark:bg-gray-900 dark:border-gray-600">
+  <div class="mt-6 mb-4 w-full rounded-xl border bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-900">
     <SettingSwitch
       title={$t('show_supporter_badge')}
       subtitle={$t('show_supporter_badge_description')}
diff --git a/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte b/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
index 6f651a0f0b..d4ae68e2b6 100644
--- a/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
+++ b/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
@@ -55,7 +55,7 @@
     </div>
   {/if}
 
-  <div class="flex flex-col sm:flex-row gap-6 mt-4 justify-between">
+  <div class="mt-4 flex flex-col justify-between gap-6 sm:flex-row">
     <ServerPurchaseOptionCard />
     <UserPurchaseOptionCard />
   </div>
diff --git a/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte b/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
index ca12d17ae0..d0ef5988a6 100644
--- a/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
+++ b/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
@@ -8,11 +8,11 @@
 
 <!-- SERVER Purchase Options -->
 <div
-  class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
+  class="w-[min(375px,100%)] rounded-3xl border border-gray-300 bg-gray-100 p-8 dark:border-gray-800 dark:bg-gray-900"
 >
   <div class="text-primary">
     <Icon icon={mdiServer} size="56" />
-    <p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
+    <p class="mt-1 text-lg font-semibold">{$t('purchase_server_title')}</p>
   </div>
 
   <div class="mt-4 dark:text-immich-gray">
@@ -20,20 +20,20 @@
     <p>{$t('purchase_per_server')}</p>
   </div>
 
-  <div class="flex flex-col justify-between h-50 dark:text-immich-gray">
+  <div class="flex h-50 flex-col justify-between 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" />
+        <Icon icon={mdiCheckCircleOutline} size="24" class="self-center text-green-500" />
         <p class="self-center">{$t('purchase_server_description_1')}</p>
       </div>
 
       <div class="grid grid-cols-[36px_auto]">
-        <Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <Icon icon={mdiCheckCircleOutline} size="24" class="self-center text-green-500" />
         <p class="self-center">{$t('purchase_lifetime_description')}</p>
       </div>
 
       <div class="grid grid-cols-[36px_auto]">
-        <Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <Icon icon={mdiCheckCircleOutline} size="24" class="self-center text-green-500" />
         <p class="self-center">{$t('purchase_server_description_2')}</p>
       </div>
     </div>
diff --git a/web/src/lib/components/shared-components/search-bar/SearchBar.svelte b/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
index 80f847fbcd..da61081e59 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
@@ -248,11 +248,11 @@
   ]}
 />
 
-<div class="w-full relative z-auto" use:focusOutside={{ onFocusOut }} tabindex="-1">
+<div class="relative z-auto w-full" use:focusOutside={{ onFocusOut }} tabindex="-1">
   <form
     draggable="false"
     autocomplete="off"
-    class="select-text text-sm"
+    class="text-sm select-text"
     action={Route.search()}
     onreset={() => (value = '')}
     {onsubmit}
@@ -265,11 +265,11 @@
         type="text"
         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
+        class="w-full border-2 py-4 ps-14 text-immich-fg/75 transition-all max-md:py-2 dark:text-immich-dark-fg
         {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'}"
+        {searchStore.isSearchEnabled ? 'border-gray-200 bg-white dark:border-gray-700' : 'border-transparent'}"
         placeholder={$t('search_your_photos')}
         required
         pattern="^(?!m:$).*$"
@@ -309,9 +309,9 @@
 
     <div
       id={searchTypeId}
-      class="absolute inset-y-0 flex items-center end-16"
+      class="absolute inset-y-0 inset-e-16 flex items-center"
       class:max-md:hidden={value}
-      class:end-28={value.length > 0}
+      class:inset-e-28={value.length > 0}
     >
       <div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
         <Button
@@ -320,7 +320,7 @@
           color={searchStore.isSearchEnabled ? 'primary' : 'secondary'}
           class="px-3 py-1 text-xs {searchStore.isSearchEnabled
             ? 'border border-transparent'
-            : 'border border-secondary/5 text-muted hover:text-dark font-light'}"
+            : 'border-secondary/5 border font-light text-muted hover:text-dark'}"
           onclick={toggleSearchTypeDropdown}
           aria-expanded={showSearchTypeDropdown}
           aria-haspopup="listbox"
@@ -330,13 +330,13 @@
 
         {#if showSearchTypeDropdown}
           <div
-            class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
+            class="absolute top-full right-0 z-9999 mt-1 min-w-32 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-600 dark:bg-immich-dark-gray"
           >
             {#each searchTypes as searchType (searchType.value)}
               <button
                 type="button"
                 tabindex="0"
-                class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
+                class="w-full px-3 py-2 text-left text-xs transition-colors hover:bg-gray-100 dark:hover:bg-gray-700
                          {currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}"
                 onclick={() => selectSearchType(searchType.value)}
               >
@@ -349,7 +349,7 @@
     </div>
 
     {#if showClearIcon}
-      <div class="absolute inset-y-0 end-0 flex items-center pe-2">
+      <div class="absolute inset-y-0 inset-e-0 flex items-center pe-2">
         <IconButton
           onclick={onClear}
           icon={mdiClose}
@@ -361,7 +361,7 @@
         />
       </div>
     {/if}
-    <div class="absolute inset-y-0 start-0 flex items-center ps-2">
+    <div class="absolute inset-y-0 inset-s-0 flex items-center ps-2">
       <IconButton
         type="submit"
         aria-label={$t('search')}
@@ -375,7 +375,7 @@
     </div>
   </form>
 
-  <div class="absolute inset-y-0 {showClearIcon ? 'end-14' : 'end-2'} flex items-center ps-6 transition-all">
+  <div class="absolute inset-y-0 {showClearIcon ? 'inset-e-14' : 'inset-e-2'} flex items-center ps-6 transition-all">
     <IconButton
       aria-label={$t('show_search_options')}
       shape="round"
diff --git a/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
index 1820354acd..b1d93210cf 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
@@ -76,7 +76,7 @@
 
 <div id="camera-selection">
   <Text fontWeight="medium">{$t('camera')}</Text>
-  <div class="grid grid-auto-fit-40 gap-5 mt-1">
+  <div class="mt-1 grid grid-auto-fit-40 gap-5">
     <div class="w-full">
       <Combobox
         label={$t('make')}
diff --git a/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte b/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
index 68aee7a133..c011d6a975 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
@@ -14,7 +14,7 @@
   <fieldset>
     <Text class="mb-2" fontWeight="medium">{$t('display_options')}</Text>
 
-    <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
+    <div class="mt-1 flex flex-wrap gap-x-5 gap-y-2">
       <div class="flex items-center gap-2">
         <Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
         <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" class="text-sm font-normal" />
diff --git a/web/src/lib/components/shared-components/search-bar/SearchHistoryBox.svelte b/web/src/lib/components/shared-components/search-bar/SearchHistoryBox.svelte
index d3cd155e69..24ceaeb380 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchHistoryBox.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchHistoryBox.svelte
@@ -94,7 +94,7 @@
   {#if isOpen && isSearchSuggestions}
     <div
       transition:fly={{ y: 25, duration: 150 }}
-      class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300 z-1"
+      class="absolute z-1 w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
     >
       <div class="flex items-center justify-between px-5 pt-5 text-xs">
         <Text class="py-2" color="muted" aria-hidden={true}>{$t('recent_searches')}</Text>
@@ -102,7 +102,7 @@
           <button
             id={getId(0)}
             type="button"
-            class="rounded-lg p-2 font-semibold text-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25"
+            class="rounded-lg p-2 font-semibold text-primary hover:bg-immich-primary/25 aria-selected:bg-immich-primary/25"
             role="option"
             onclick={() => handleClearAll()}
             tabindex="-1"
@@ -121,7 +121,7 @@
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <div
               id={getId(index)}
-              class="relative flex w-full cursor-pointer gap-3 py-3 ps-5 hover:bg-gray-100 aria-selected:bg-gray-100 dark:aria-selected:bg-gray-500/30 dark:hover:bg-gray-500/30"
+              class="relative flex w-full cursor-pointer gap-3 py-3 ps-5 hover:bg-gray-100 aria-selected:bg-gray-100 dark:hover:bg-gray-500/30 dark:aria-selected:bg-gray-500/30"
               onclick={() => handleSelect(savedSearchTerm)}
               role="option"
               tabindex="-1"
@@ -131,7 +131,7 @@
               <Icon icon={mdiMagnify} size="1.5em" aria-hidden />
               {savedSearchTerm}
             </div>
-            <div aria-hidden={true} class="absolute end-5 top-0 items-center justify-center py-3">
+            <div aria-hidden={true} class="absolute inset-e-5 top-0 items-center justify-center py-3">
               <IconButton
                 shape="round"
                 color="secondary"
diff --git a/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
index 8158385ef7..0f0e1ce4ed 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
@@ -70,7 +70,7 @@
 <div id="location-selection">
   <Text fontWeight="medium">{$t('place')}</Text>
 
-  <div class="grid grid-auto-fit-40 gap-5 mt-1">
+  <div class="mt-1 grid grid-auto-fit-40 gap-5">
     <div class="w-full">
       <Combobox
         label={$t('country')}
diff --git a/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
index 297d13033b..249d3511c9 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
@@ -15,7 +15,7 @@
   <fieldset>
     <Text class="mb-2" fontWeight="medium">{$t('media_type')}</Text>
 
-    <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
+    <div class="mt-1 flex flex-wrap gap-x-5 gap-y-2">
       <RadioButton name="media-type" id="type-all" bind:group={filteredMedia} label={$t('all')} value={MediaType.All} />
       <RadioButton
         name="media-type"
diff --git a/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
index 101f324a6a..68e959325f 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
@@ -52,10 +52,10 @@
   };
 
   const styles = tv({
-    base: 'flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all',
+    base: 'flex flex-col items-center rounded-3xl border-2 p-2 transition-all hover:bg-subtle dark:hover:bg-immich-dark-primary/20',
     variants: {
       selected: {
-        true: 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white',
+        true: 'border-slate-400 bg-slate-200 dark:border-slate-500 dark:bg-slate-800 dark:text-white',
         false: 'border-transparent',
       },
     },
@@ -63,7 +63,7 @@
 </script>
 
 {#await peoplePromise}
-  <div id="spinner" class="flex h-54 items-center justify-center -mb-4">
+  <div id="spinner" class="-mb-4 flex h-54 items-center justify-center">
     <LoadingSpinner size="large" />
   </div>
 {:then people}
@@ -72,14 +72,14 @@
       ? filterPeople(people, name)
       : filterPeople(people, name).slice(0, numberOfPeople)}
 
-    <div id="people-selection" class="max-h-60 -mb-4 overflow-y-auto immich-scrollbar">
-      <div class="flex items-center w-full justify-between gap-6">
+    <div id="people-selection" class="-mb-4 max-h-60 overflow-y-auto immich-scrollbar">
+      <div class="flex w-full items-center justify-between gap-6">
         <Text class="py-3" fontWeight="medium">{$t('people')}</Text>
         <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
       </div>
 
       <SingleGridRow
-        class="grid grid-auto-fill-20 gap-1 mt-2 overflow-y-auto immich-scrollbar space-between"
+        class="space-between mt-2 grid grid-auto-fill-20 gap-1 overflow-y-auto immich-scrollbar"
         bind:itemCount={numberOfPeople}
       >
         {#each peopleList as person (person.id)}
@@ -95,13 +95,13 @@
       </SingleGridRow>
 
       {#if showAllPeople || people.length > peopleList.length}
-        <div class="flex justify-center mt-2">
+        <div class="mt-2 flex justify-center">
           <Button
             color="primary"
             variant="ghost"
             shape="round"
             leadingIcon={showAllPeople ? mdiClose : mdiArrowRight}
-            class="flex gap-2 place-items-center"
+            class="flex place-items-center gap-2"
             onclick={() => (showAllPeople = !showAllPeople)}
           >
             {showAllPeople ? $t('collapse') : $t('see_all_people')}
diff --git a/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
index 90ad7e7312..1869a5751e 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
@@ -69,7 +69,7 @@
       </div>
     </form>
 
-    <section class="flex flex-wrap pt-2 gap-1">
+    <section class="flex flex-wrap gap-1 pt-2">
       {#each selectedTags ?? [] as tagId (tagId)}
         {@const tag = tagMap[tagId]}
         {#if tag}
diff --git a/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
index d16734e13c..9e78531ac3 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
@@ -15,7 +15,7 @@
 <section>
   <fieldset>
     <Text class="mb-2" fontWeight="medium">{$t('search_type')}</Text>
-    <div class="flex flex-wrap gap-x-5 gap-y-2 my-2">
+    <div class="my-2 flex flex-wrap gap-x-5 gap-y-2">
       {#if featureFlagsManager.value.smartSearch}
         <RadioButton name="query-type" id="context-radio" label={$t('context')} bind:group={queryType} value="smart" />
       {/if}
diff --git a/web/src/lib/components/shared-components/settings/SettingAccordion.svelte b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
index bd450ff585..d4b46b93c6 100755
--- a/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
@@ -64,7 +64,7 @@
 </script>
 
 <div
-  class="border-2 rounded-2xl border-primary/20 mt-4 px-6 py-4 transition-all {isOpen
+  class="mt-4 rounded-2xl border-2 border-primary/20 px-6 py-4 transition-all {isOpen
     ? 'border-primary/60 shadow-md'
     : ''}"
   bind:this={accordionElement}
@@ -76,7 +76,7 @@
     class="flex w-full place-items-center justify-between text-start"
   >
     <div>
-      <div class="flex gap-2 place-items-center">
+      <div class="flex place-items-center gap-2">
         {#if icon}
           <Icon {icon} class="text-primary" size="24" aria-hidden />
         {/if}
@@ -86,7 +86,7 @@
       </div>
 
       {#if subtitleSnippet}{@render subtitleSnippet()}{:else}
-        <p class="text-sm dark:text-immich-dark-fg mt-1">{subtitle}</p>
+        <p class="mt-1 text-sm dark:text-immich-dark-fg">{subtitle}</p>
       {/if}
     </div>
 
@@ -110,7 +110,7 @@
   </button>
 
   {#if isOpen}
-    <ul transition:slide={{ duration: 150 }} class="mb-2 ms-4">
+    <ul transition:slide={{ duration: 150 }} class="ms-4 mb-2">
       {@render children?.()}
     </ul>
   {/if}
diff --git a/web/src/lib/components/shared-components/settings/SettingDropdown.svelte b/web/src/lib/components/shared-components/settings/SettingDropdown.svelte
index 77d45dcb01..e65cf8e479 100644
--- a/web/src/lib/components/shared-components/settings/SettingDropdown.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingDropdown.svelte
@@ -29,7 +29,7 @@
 <div class="flex place-items-center justify-between">
   <div>
     <div class="flex h-6.5 place-items-center gap-1">
-      <label class="font-medium text-sm" for={title}>
+      <label class="text-sm font-medium" for={title}>
         {title}
       </label>
       {#if isEdited}
diff --git a/web/src/lib/components/shared-components/settings/SettingInputField.svelte b/web/src/lib/components/shared-components/settings/SettingInputField.svelte
index e1c5c2b74a..8668d71d8b 100644
--- a/web/src/lib/components/shared-components/settings/SettingInputField.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingInputField.svelte
@@ -81,7 +81,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex place-items-center gap-1">
-    <label class="font-medium text-primary text-sm min-h-6" for={label}>{label}</label>
+    <label class="min-h-6 text-sm font-medium text-primary" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}
@@ -97,7 +97,7 @@
   </div>
 
   {#if description}
-    <p class="immich-form-label pb-2 text-sm" id="{label}-desc">
+    <p class="pb-2 text-sm immich-form-label" id="{label}-desc">
       {description}
     </p>
   {:else}
@@ -105,11 +105,11 @@
   {/if}
 
   {#if inputType !== SettingInputFieldType.PASSWORD}
-    <div class="flex place-items-center place-content-center gap-2">
+    <div class="flex place-content-center place-items-center gap-2">
       {#if inputType === SettingInputFieldType.COLOR}
         <input
           bind:this={input}
-          class="immich-form-input w-full pb-2 rounded-none me-1"
+          class="me-1 immich-form-input w-full rounded-none pb-2"
           aria-describedby={description ? `${label}-desc` : undefined}
           aria-labelledby="{label}-label"
           id={label}
@@ -128,7 +128,7 @@
 
       <input
         bind:this={input}
-        class="immich-form-input w-full pb-2 min-w-[50px]"
+        class="immich-form-input w-full min-w-[50px] pb-2"
         class:color-picker={inputType === SettingInputFieldType.COLOR}
         aria-describedby={description ? `${label}-desc` : undefined}
         aria-labelledby="{label}-label"
diff --git a/web/src/lib/components/shared-components/settings/SettingSwitch.svelte b/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
index 4062c60b77..c208393339 100644
--- a/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
@@ -35,7 +35,7 @@
 <div class="flex place-items-center justify-between">
   <div class="me-2">
     <div class="flex h-6.5 place-items-center gap-1">
-      <label class="font-medium text-primary text-sm" for={switchId}>
+      <label class="text-sm font-medium text-primary" for={switchId}>
         {title}
       </label>
       {#if isEdited}
diff --git a/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte b/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte
index 561cbda0f2..6d966e21a6 100644
--- a/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte
+++ b/web/src/lib/components/shared-components/side-bar/BottomInfo.svelte
@@ -10,6 +10,6 @@
 
 <PurchaseInfo />
 
-<div class="mb-6 mt-2">
+<div class="mt-2 mb-6">
   <ServerStatus />
 </div>
diff --git a/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte b/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
index dd59ebdf8d..740338ffb2 100644
--- a/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
+++ b/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
@@ -73,7 +73,7 @@
   {#if authManager.isPurchased && authManager.preferences.purchase.showSupportBadge}
     <button
       onclick={() => goto(Route.userSettings({ isOpen: OpenQueryParam.PURCHASE_SETTINGS }))}
-      class="w-full mt-2"
+      class="mt-2 w-full"
       type="button"
     >
       <SupporterBadge size="small" effect="always" />
@@ -86,18 +86,18 @@
       onmouseleave={() => (hoverButton = false)}
       onfocus={onButtonHover}
       onblur={() => (hoverButton = false)}
-      class="p-2 flex justify-between place-items-center place-content-center border border-immich-primary/20 dark:border-immich-dark-primary/10 mt-2 rounded-lg shadow-md dark:bg-immich-dark-primary/10 min-w-52 w-full"
+      class="mt-2 flex w-full min-w-52 place-content-center place-items-center justify-between rounded-lg border border-immich-primary/20 p-2 shadow-md dark:border-immich-dark-primary/10 dark:bg-immich-dark-primary/10"
     >
-      <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="flex w-full place-content-center place-items-center justify-between">
+        <div class="flex place-content-center place-items-center gap-1">
           <Logo variant="icon" size="tiny" />
-          <p class="flex text-primary font-medium">
+          <p class="flex font-medium text-primary">
             {$t('purchase_button_buy_immich')}
           </p>
         </div>
 
         <div>
-          <Icon icon={mdiInformationOutline} class="hidden sidebar:flex text-primary font-medium" size="18" />
+          <Icon icon={mdiInformationOutline} class="hidden font-medium text-primary sidebar:flex" size="18" />
         </div>
       </div>
     </button>
@@ -108,15 +108,15 @@
   {#if showMessage}
     <dialog
       open
-      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"
+      class="absolute inset-s-64 bottom-19 hidden w-125 rounded-3xl border border-gray-200 bg-gray-50 px-8 py-6 text-black shadow-2xl sidebar:block dark:border-gray-800 dark:bg-immich-dark-gray dark:text-white"
       transition:fade={{ duration: 150 }}
       onmouseover={() => (hoverMessage = true)}
       onmouseleave={() => (hoverMessage = false)}
       onfocus={() => (hoverMessage = true)}
       onblur={() => (hoverMessage = false)}
     >
-      <div class="flex justify-between place-items-center">
-        <div class="h-10 w-10">
+      <div class="flex place-items-center justify-between">
+        <div class="size-10">
           <Logo variant="icon" size="small" />
         </div>
         <IconButton
@@ -133,11 +133,11 @@
         />
       </div>
 
-      <h1 class="text-lg font-medium my-3 text-primary">
+      <h1 class="my-3 text-lg font-medium text-primary">
         {$t('purchase_panel_title')}
       </h1>
 
-      <div class="text-gray-800 dark:text-white my-4">
+      <div class="my-4 text-gray-800 dark:text-white">
         <p>
           {$t('purchase_panel_info_1')}
         </p>
diff --git a/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte b/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
index 825e5b1fa9..2d4be43a00 100644
--- a/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
+++ b/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
@@ -29,17 +29,17 @@
   <a
     href={Route.viewAlbum(album)}
     title={album.albumName}
-    class="flex w-full place-items-center justify-between gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary ps-10 group-hover:sm:px-10 md:px-10"
+    class="flex w-full place-items-center justify-between gap-4 rounded-e-full py-3 ps-10 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary group-hover:sm:px-10 md:px-10 dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary"
   >
     <div>
       <div
-        class="h-6 w-6 bg-cover rounded bg-gray-200 dark:bg-gray-600"
+        class="size-6 rounded-sm bg-gray-200 bg-cover dark:bg-gray-600"
         style={album.albumThumbnailAssetId
           ? `background-image:url('${getAssetMediaUrl({ id: album.albumThumbnailAssetId })}')`
           : ''}
       ></div>
     </div>
-    <div class="grow text-sm font-medium truncate">
+    <div class="grow truncate text-sm font-medium">
       {album.albumName}
     </div>
   </a>
diff --git a/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte b/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
index 0811b5ec8b..47b30e8454 100644
--- a/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
+++ b/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
@@ -58,16 +58,16 @@
 </script>
 
 <div
-  class="text-sm flex md:flex ps-5 pe-1 place-items-center place-content-center justify-between min-w-52 overflow-hidden dark:text-immich-dark-fg"
+  class="flex min-w-52 place-content-center place-items-center justify-between overflow-hidden ps-5 pe-1 text-sm md:flex dark:text-immich-dark-fg"
 >
   {#if $connected}
-    <div class="flex gap-2 place-items-center place-content-center">
-      <div class="w-1.75 h-1.75 bg-green-500 rounded-full"></div>
+    <div class="flex place-content-center place-items-center gap-2">
+      <div class="size-1.75 rounded-full bg-green-500"></div>
       <p class="dark:text-immich-gray">{$t('server_online')}</p>
     </div>
   {:else}
-    <div class="flex gap-2 place-items-center place-content-center">
-      <div class="w-1.75 h-1.75 bg-red-500 rounded-full"></div>
+    <div class="flex place-content-center place-items-center gap-2">
+      <div class="size-1.75 rounded-full bg-red-500"></div>
       <p class="text-red-500">{$t('server_offline')}</p>
     </div>
   {/if}
@@ -77,7 +77,7 @@
       <button
         type="button"
         onclick={() => info && modalManager.show(ServerAboutModal, { versions, info })}
-        class="dark:text-immich-gray flex gap-1 place-items-center place-content-center"
+        class="flex place-content-center place-items-center gap-1 dark:text-immich-gray"
       >
         {#if isMain}
           <Icon icon={mdiAlert} size="1.5em" color="#ffcc4d" /> {info?.sourceRef}
@@ -96,17 +96,17 @@
     href={releaseInfo.releaseUrl}
     target="_blank"
     rel="noopener noreferrer"
-    class="mt-3 p-2.5 ms-4 rounded-lg text-sm min-w-52 border border-gray-200/50 dark:border-gray-700/50 bg-white/50 dark:bg-gray-800/50 hover:border-immich-primary/40 dark:hover:border-immich-dark-primary/40 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/5 transition-all duration-200 group block"
+    class="group ms-4 mt-3 block min-w-52 rounded-lg border border-gray-200/50 bg-white/50 p-2.5 text-sm transition-all duration-200 hover:border-immich-primary/40 hover:bg-immich-primary/5 dark:border-gray-700/50 dark:bg-gray-800/50 dark:hover:border-immich-dark-primary/40 dark:hover:bg-immich-dark-primary/5"
   >
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
-        <Icon icon={mdiNewBox} size="16" class="text-immich-primary dark:text-immich-dark-primary opacity-80" />
+        <Icon icon={mdiNewBox} size="16" class="text-immich-primary opacity-80 dark:text-immich-dark-primary" />
         <Text size="tiny" fontWeight="medium" class="text-gray-700 dark:text-gray-300">
           {releaseInfo.availableVersion}
         </Text>
       </div>
       <span
-        class="text-[11px] text-gray-500 dark:text-gray-400 group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary transition-colors opacity-70 group-hover:opacity-100"
+        class="text-[11px] text-gray-500 opacity-70 transition-colors group-hover:text-immich-primary group-hover:opacity-100 dark:text-gray-400 dark:group-hover:text-immich-dark-primary"
       >
         {$t('new_update')}!
       </span>
diff --git a/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte b/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
index ae75dea92e..45c40f6c2d 100644
--- a/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
+++ b/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <div
-  class="p-4 bg-light-100 ms-4 rounded-lg text-sm min-w-52"
+  class="ms-4 min-w-52 rounded-lg bg-light-100 p-4 text-sm"
   title={$t('storage_usage', {
     values: {
       used: getByteUnitString(usedBytes, $locale, 3),
@@ -58,7 +58,7 @@
       {thresholds}
     />
   {:else}
-    <p class="font-medium text-immich-dark-gray dark:text-white mb-4">{$t('storage')}</p>
+    <p class="mb-4 font-medium text-immich-dark-gray dark:text-white">{$t('storage')}</p>
     <LoadingSpinner />
   {/if}
 </div>
diff --git a/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte b/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
index 20380f60ef..1c58e8feb1 100644
--- a/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
+++ b/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
@@ -35,9 +35,9 @@
   {/if}
 
   <div
-    class="bg-gray-50 dark:bg-immich-dark-gray/50 w-full p-2 rounded-2xl border border-gray-100 dark:border-gray-900 overflow-y-auto immich-scrollbar"
+    class="w-full overflow-y-auto rounded-2xl border border-gray-100 bg-gray-50 p-2 immich-scrollbar dark:border-gray-900 dark:bg-immich-dark-gray/50"
   >
-    <ol class="flex gap-2 items-center">
+    <ol class="flex items-center gap-2">
       <li>
         <IconButton
           shape="round"
@@ -51,15 +51,15 @@
         />
       </li>
       {#each parents as parent (parent)}
-        <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
+        <li class="flex items-center gap-2 font-mono text-sm text-nowrap text-primary">
           <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
-          <a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
+          <a class="whitespace-pre-wrap underline hover:font-semibold" href={getLink(parent.path)}>
             {parent.value}
           </a>
         </li>
       {/each}
 
-      <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
+      <li class="flex items-center gap-2 font-mono text-sm text-nowrap text-primary">
         <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
         <p class="cursor-default whitespace-pre-wrap">{node.value}</p>
       </li>
diff --git a/web/src/lib/components/shared-components/tree/Tree.svelte b/web/src/lib/components/shared-components/tree/Tree.svelte
index 8f58982790..b51d64e4fa 100644
--- a/web/src/lib/components/shared-components/tree/Tree.svelte
+++ b/web/src/lib/components/shared-components/tree/Tree.svelte
@@ -26,7 +26,7 @@
 <a
   href={getLink(node.path)}
   title={node.value}
-  class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-primary' : 'dark:text-gray-200'}`}
+  class={`flex grow place-items-center rounded-lg py-1 ps-2 text-sm hover:bg-slate-200 hover:font-semibold dark:hover:bg-slate-800 ${isTarget ? 'bg-slate-100 font-semibold text-primary dark:bg-slate-700' : 'dark:text-gray-200'}`}
   data-sveltekit-keepfocus
 >
   {#if node.size > 0}
@@ -34,7 +34,7 @@
       <Icon icon={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size="20" />
     </button>
   {/if}
-  <div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
+  <div class={node.size === 0 ? 'ml-[1.5em]' : ''}>
     <Icon
       icon={isActive ? icons.active : icons.default}
       class={isActive ? 'text-primary' : 'text-gray-400'}
@@ -42,7 +42,7 @@
       size="20"
     />
   </div>
-  <span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{node.value}</span>
+  <span class="overflow-hidden ps-1 pt-1 font-mono text-nowrap text-ellipsis whitespace-pre-wrap">{node.value}</span>
 </a>
 
 {#if isOpen}
diff --git a/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte b/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
index b7e67e85a4..546c56ce70 100644
--- a/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
+++ b/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
@@ -13,18 +13,18 @@
 
 {#if items.length > 0}
   <div
-    class="w-full grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 rounded-2xl border border-gray-100 dark:border-gray-900"
+    class="grid w-full grid-cols-2 gap-2 rounded-2xl border border-gray-100 bg-gray-50 sm:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 dark:border-gray-900 dark:bg-immich-dark-gray/50"
   >
     <!-- eslint-disable-next-line svelte/require-each-key -->
     {#each items as item}
       <button
-        class="flex flex-col place-items-center gap-2 py-2 px-4 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/40 rounded-xl"
+        class="flex flex-col place-items-center gap-2 rounded-xl px-4 py-2 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/40"
         onclick={() => onClick(item.value)}
         title={item.value}
         type="button"
       >
         <Icon {icon} class="text-primary" size="64" />
-        <p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
+        <p class="w-full overflow-clip text-sm text-nowrap text-ellipsis whitespace-pre-wrap dark:text-gray-200">
           {item.value}
         </p>
       </button>
diff --git a/web/src/lib/components/shared-components/tree/TreeItems.svelte b/web/src/lib/components/shared-components/tree/TreeItems.svelte
index 3952a32b52..2474e01eb5 100644
--- a/web/src/lib/components/shared-components/tree/TreeItems.svelte
+++ b/web/src/lib/components/shared-components/tree/TreeItems.svelte
@@ -12,7 +12,7 @@
   let { tree, active, icons, getLink }: Props = $props();
 </script>
 
-<ul class="list-none ms-2">
+<ul class="ms-2 list-none">
   {#each tree.children as node (node.color ? node.path + node.color : node.path)}
     <li>
       <Tree {node} {icons} {active} {getLink} />
diff --git a/web/src/lib/components/sidebar/Sidebar.svelte b/web/src/lib/components/sidebar/Sidebar.svelte
index f7376df8cb..fa7560e314 100644
--- a/web/src/lib/components/sidebar/Sidebar.svelte
+++ b/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-64 overflow-y-auto overflow-x-hidden pt-8 transition-all duration-200 bg-light"
+  class="relative z-1 w-0 overflow-x-hidden overflow-y-auto bg-light pt-8 transition-all duration-200 immich-scrollbar sidebar:w-64"
   class:shadow-2xl={isExpanded}
   class:dark:border-e-immich-dark-gray={isExpanded}
   class:border-r={isExpanded}
@@ -45,7 +45,7 @@
   use:clickOutside={{ onOutclick: closeSidebar, onEscape: closeSidebar }}
   use:focusTrap={{ active: isExpanded }}
 >
-  <div class="pe-6 flex flex-col gap-1 h-max min-h-full">
+  <div class="flex h-max min-h-full flex-col gap-1 pe-6">
     {@render children?.()}
   </div>
 </nav>
diff --git a/web/src/lib/components/timeline/Month.svelte b/web/src/lib/components/timeline/Month.svelte
index 28996b204a..3f4b9b0661 100644
--- a/web/src/lib/components/timeline/Month.svelte
+++ b/web/src/lib/components/timeline/Month.svelte
@@ -74,12 +74,12 @@
   >
     <!-- Day title -->
     <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
+      class="flex h-6 place-items-center pt-7 pb-5 text-xs font-medium text-immich-fg max-md:pt-5 max-md:pb-3 md:text-sm dark:text-immich-dark-fg"
       style:width={timelineDay.width + 'px'}
     >
       {#if !singleSelect}
         <div
-          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
+          class="w-0 overflow-hidden transition-all duration-200 ease-out hover:cursor-pointer"
           class:w-8={hoveredTimelineDay === timelineDay.groupTitle ||
             assetInteraction.selectedGroup.has(timelineDay.groupTitle)}
           onclick={() => onTimelineDaySelect(timelineDay, assetsSnapshot(timelineDay.getAssets()))}
diff --git a/web/src/lib/components/timeline/Scrubber.svelte b/web/src/lib/components/timeline/Scrubber.svelte
index 99aec0e429..03a3e43d8e 100644
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -508,7 +508,7 @@
   aria-valuemax={toScrollY(1)}
   aria-valuemin={toScrollY(0)}
   data-id="scrubber"
-  class="absolute end-0 z-1 select-none hover:cursor-row-resize"
+  class="absolute inset-e-0 z-1 select-none hover:cursor-row-resize"
   style:padding-top={PADDING_TOP + 'px'}
   style:padding-bottom={PADDING_BOTTOM + 'px'}
   style:width
@@ -526,7 +526,7 @@
       class={[
         { 'border-b-2': isDragging },
         { 'rounded-bl-md': !isDragging },
-        'bg-light truncate opacity-85 pointer-events-none absolute end-0 min-w-20 max-w-64 w-fit rounded-ss-md border-b-2 border-primary py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] z-1',
+        'pointer-events-none absolute inset-e-0 z-1 w-fit max-w-64 min-w-20 truncate rounded-ss-md border-b-2 border-primary bg-light p-1 text-sm font-medium opacity-85 shadow-[0_0_8px_rgba(0,0,0,0.25)]',
       ]}
       style:top="{hoverY + 2}px"
     >
@@ -536,7 +536,7 @@
   {#if usingMobileDevice && ((timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging)}
     <div
       id="time-label"
-      class="rounded-s-full w-8 ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
+      class="w-8 rounded-s-full bg-immich-primary ps-2 text-white select-none hover:cursor-pointer dark:bg-gray-600"
       style:top="{PADDING_TOP + (scrollY - 50 / 2)}px"
       style:height="50px"
       style:right="0"
@@ -544,15 +544,15 @@
       in:fade={{ duration: 200 }}
       out:fade={{ duration: 200 }}
     >
-      <Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-2.25 -end-0.5" />
-      <Icon icon={mdiPlay} size="20" class="rotate-90 relative top-px -end-0.5" />
+      <Icon icon={mdiPlay} size="20" class="relative -inset-e-0.5 top-2.25 -rotate-90" />
+      <Icon icon={mdiPlay} size="20" class="relative -inset-e-0.5 top-px rotate-90" />
       {#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-8 py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
+          class="pointer-events-none absolute w-8 truncate rounded-full bg-immich-primary/90 px-4 py-2 text-sm font-semibold text-white select-none hover:cursor-pointer dark:bg-gray-500"
         >
           {scrollHoverLabel}
         </p>
@@ -561,11 +561,11 @@
   {/if}
   <!-- Scroll Position Indicator Line -->
   {#if !usingMobileDevice && !isDragging}
-    <div class="absolute end-0 h-0.5 w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
+    <div class="absolute inset-e-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 }}
-          class="truncate pointer-events-none absolute end-0 bottom-0 min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-subtle/90 z-1 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
+          class="pointer-events-none absolute inset-e-0 bottom-0 z-1 w-fit max-w-64 min-w-20 truncate rounded-tl-md border-b-2 border-immich-primary bg-subtle/90 p-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
         >
           {scrollHoverLabel}
         </p>
@@ -589,12 +589,12 @@
     >
       {#if !usingMobileDevice}
         {#if segment.hasLabel}
-          <div class="absolute end-5 text-[13px] dark:text-immich-dark-fg font-mono bottom-0">
+          <div class="absolute inset-e-5 bottom-0 font-mono text-[13px] dark:text-immich-dark-fg">
             {segment.year}
           </div>
         {/if}
         {#if segment.hasDot}
-          <div class="absolute end-3 bottom-0 h-1 w-1 rounded-full bg-gray-300"></div>
+          <div class="absolute inset-e-3 bottom-0 size-1 rounded-full bg-gray-300"></div>
         {/if}
       {/if}
     </div>
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index 37dfc20e97..646feee7b9 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -616,7 +616,7 @@
 <!-- Right margin MUST be equal to the width of scrubber -->
 <section
   id="asset-grid"
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
+  class={['h-full overflow-y-auto outline-none scrollbar-hidden', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
   style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
diff --git a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
index 3bf2c93e92..4692453a06 100644
--- a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <form autocomplete="off" onsubmit={handleSubmit}>
-  <div class="flex flex-col gap-6 place-items-center place-content-center">
+  <div class="flex flex-col place-content-center place-items-center gap-6">
     {#if showLabel}
       <Heading>{$t('setup_pin_code')}</Heading>
     {/if}
@@ -54,7 +54,7 @@
     </Field>
   </div>
 
-  <div class="flex justify-end gap-2 mt-4">
+  <div class="mt-4 flex justify-end gap-2">
     <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
       {$t('clear')}
     </Button>
diff --git a/web/src/lib/components/user-settings-page/UserApiKeyGrid.svelte b/web/src/lib/components/user-settings-page/UserApiKeyGrid.svelte
index 7b89d21d33..9759227bd1 100644
--- a/web/src/lib/components/user-settings-page/UserApiKeyGrid.svelte
+++ b/web/src/lib/components/user-settings-page/UserApiKeyGrid.svelte
@@ -31,7 +31,7 @@
   };
 </script>
 
-<div class="border bg-subtle dark:bg-black/30 dark:border-black p-4 rounded-2xl">
+<div class="rounded-2xl border bg-subtle p-4 dark:border-black dark:bg-black/30">
   <div class="flex items-center gap-2">
     <Checkbox
       id="permission-{title}"
@@ -39,9 +39,9 @@
       checked={selectAllSubItems}
       onCheckedChange={handleSelectAllSubItems}
     />
-    <Label label={title} for="permission-{title}" class="font-mono text-primary text-lg" />
+    <Label label={title} for="permission-{title}" class="font-mono text-lg text-primary" />
   </div>
-  <div class="mx-6 mt-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+  <div class="mx-6 mt-3 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
     {#each subItems as item (item)}
       <div class="flex items-center gap-2">
         <Checkbox
@@ -50,7 +50,7 @@
           checked={selectedItems.includes(item)}
           onCheckedChange={() => handleToggleItem(item)}
         />
-        <Label label={item} for="permission-{item}" class="text-sm font-mono" />
+        <Label label={item} for="permission-{item}" class="font-mono text-sm" />
       </div>
     {/each}
   </div>
diff --git a/web/src/lib/elements/Badge.svelte b/web/src/lib/elements/Badge.svelte
index b19136aab5..3313d59778 100644
--- a/web/src/lib/elements/Badge.svelte
+++ b/web/src/lib/elements/Badge.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <span
-  class="bg-primary text-subtle inline-block h-min whitespace-nowrap px-3 py-1 text-center align-baseline text-xs leading-none"
+  class="inline-block h-min bg-primary px-3 py-1 text-center align-baseline text-xs leading-none whitespace-nowrap text-subtle"
   class:rounded-md={rounded === true}
   class:rounded-full={rounded === 'full'}
 >
diff --git a/web/src/lib/elements/Dropdown.svelte b/web/src/lib/elements/Dropdown.svelte
index 513f7dc5a3..c34a3297e9 100644
--- a/web/src/lib/elements/Dropdown.svelte
+++ b/web/src/lib/elements/Dropdown.svelte
@@ -81,10 +81,10 @@
   const getAlignClass = (position: 'bottom-left' | 'bottom-right') => {
     switch (position) {
       case 'bottom-left': {
-        return 'start-0';
+        return 'inset-s-0';
       }
       case 'bottom-right': {
-        return 'end-0';
+        return 'inset-e-0';
       }
 
       default: {
@@ -107,7 +107,7 @@
   {#if showMenu}
     <div
       transition:fly={{ y: -30, duration: 250 }}
-      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(
+      class="absolute z-1 flex max-h-[70vh] min-w-75 flex-col overflow-y-auto rounded-2xl bg-gray-100 py-2 text-sm font-medium text-black shadow-lg immich-scrollbar dark:bg-gray-700 dark:text-white {className} {getAlignClass(
         position,
       )}"
     >
diff --git a/web/src/lib/elements/DurationInput.svelte b/web/src/lib/elements/DurationInput.svelte
index 1aebe17640..85316c51de 100644
--- a/web/src/lib/elements/DurationInput.svelte
+++ b/web/src/lib/elements/DurationInput.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <div class={`flex gap-2 ${className}`} {...rest}>
-  <button type="button" class="w-8 text-xl font-bold leading-none" onclick={toggleSign} title="Toggle sign">
+  <button type="button" class="w-8 text-xl leading-none font-bold" onclick={toggleSign} title="Toggle sign">
     {sign >= 0 ? '+' : '-'}
   </button>
   <input type="number" min="0" placeholder={$t('days')} class="w-1/3" bind:value={days} />
diff --git a/web/src/lib/elements/GroupTab.svelte b/web/src/lib/elements/GroupTab.svelte
index 2bc3480df6..ac34694296 100644
--- a/web/src/lib/elements/GroupTab.svelte
+++ b/web/src/lib/elements/GroupTab.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <fieldset
-  class="dark:bg-immich-dark-gray flex h-full rounded-2xl bg-gray-200 ring-gray-400 has-focus-visible:ring dark:ring-gray-600"
+  class="flex h-full rounded-2xl bg-gray-200 ring-gray-400 has-focus-visible:ring dark:bg-immich-dark-gray dark:ring-gray-600"
 >
   <legend class="sr-only">{label}</legend>
   {#each filters as filter, index (`${id}-${index}`)}
@@ -31,7 +31,7 @@
       />
       <label
         for="{id}-{index}"
-        class="flex h-full cursor-pointer items-center px-4 text-sm hover:bg-gray-300 group-first-of-type:rounded-s-2xl group-last-of-type:rounded-e-2xl peer-checked:bg-gray-300 dark:hover:bg-gray-800 peer-checked:dark:bg-gray-700"
+        class="flex h-full cursor-pointer items-center px-4 text-sm group-first-of-type:rounded-s-2xl group-last-of-type:rounded-e-2xl peer-checked:bg-gray-300 hover:bg-gray-300 peer-checked:dark:bg-gray-700 dark:hover:bg-gray-800"
       >
         {labels?.[index] ?? filter}
       </label>
diff --git a/web/src/lib/elements/SearchBar.svelte b/web/src/lib/elements/SearchBar.svelte
index 7df121b65b..4e8f49755e 100644
--- a/web/src/lib/elements/SearchBar.svelte
+++ b/web/src/lib/elements/SearchBar.svelte
@@ -40,7 +40,7 @@
 <div
   class="flex items-center text-sm {roundedBottom
     ? 'rounded-2xl'
-    : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
+    : 'rounded-t-lg'} h-full place-items-center gap-2 bg-gray-200 p-2 dark:bg-immich-dark-gray"
 >
   <IconButton
     shape="round"
diff --git a/web/src/lib/elements/Skeleton.svelte b/web/src/lib/elements/Skeleton.svelte
index d381403126..8030a26279 100644
--- a/web/src/lib/elements/Skeleton.svelte
+++ b/web/src/lib/elements/Skeleton.svelte
@@ -11,12 +11,12 @@
 <div class={['overflow-clip', { invisible }]} style:height={height + 'px'}>
   {#if title}
     <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
+      class="flex h-6 place-items-center pt-7 pb-5 text-xs font-medium text-immich-fg max-md:pt-5 max-md:pb-3 md:text-sm dark:text-immich-dark-fg"
     >
       {title}
     </div>
   {/if}
-  <div class="animate-pulse h-full w-full" data-skeleton="true"></div>
+  <div class="size-full animate-pulse" data-skeleton="true"></div>
 </div>
 
 <style>
diff --git a/web/src/lib/elements/SkipLink.svelte b/web/src/lib/elements/SkipLink.svelte
index 65e5001f8a..ec3327b0c3 100644
--- a/web/src/lib/elements/SkipLink.svelte
+++ b/web/src/lib/elements/SkipLink.svelte
@@ -56,7 +56,7 @@
   };
 </script>
 
-<div class="absolute top-2 start-2 transition-transform {isFocused ? 'translate-y-0' : '-translate-y-10 sr-only'}">
+<div class="absolute inset-s-2 top-2 transition-transform {isFocused ? 'translate-y-0' : 'sr-only -translate-y-10'}">
   <Button
     size="small"
     onclick={moveFocus}
diff --git a/web/src/lib/elements/StarRating.svelte b/web/src/lib/elements/StarRating.svelte
index 803e408ec1..3acde1dc79 100644
--- a/web/src/lib/elements/StarRating.svelte
+++ b/web/src/lib/elements/StarRating.svelte
@@ -58,7 +58,7 @@
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <fieldset
-  class="text-primary w-fit cursor-default"
+  class="w-fit cursor-default text-primary"
   onmouseleave={() => setHoverRating(null)}
   use:focusOutside={{ onFocusOut: reset }}
   use:shortcuts={[
diff --git a/web/src/lib/modals/AddWorkflowStepModal.svelte b/web/src/lib/modals/AddWorkflowStepModal.svelte
index e99058f98a..980a7fcaae 100644
--- a/web/src/lib/modals/AddWorkflowStepModal.svelte
+++ b/web/src/lib/modals/AddWorkflowStepModal.svelte
@@ -44,7 +44,7 @@
   <button
     type="button"
     {onclick}
-    class="flex items-start gap-3 p-3 rounded-lg text-left bg-light-100 hover:border-primary border text-dark"
+    class="flex items-start gap-3 rounded-lg border bg-light-100 p-3 text-left text-dark hover:border-primary"
   >
     <div class="flex-1">
       <Text color="primary" fontWeight="medium">{title}</Text>
diff --git a/web/src/lib/modals/AlbumAddUsersModal.svelte b/web/src/lib/modals/AlbumAddUsersModal.svelte
index 54bc0d0b4e..5b66bd7363 100644
--- a/web/src/lib/modals/AlbumAddUsersModal.svelte
+++ b/web/src/lib/modals/AlbumAddUsersModal.svelte
@@ -64,7 +64,7 @@
   {onClose}
 >
   {#if loading}
-    <div class="w-full flex place-items-center place-content-center">
+    <div class="flex w-full place-content-center place-items-center">
       <LoadingSpinner />
     </div>
   {:else}
@@ -78,7 +78,7 @@
       {#each filteredUsers as user (user.id)}
         <ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}>
           <UserAvatar {user} size="md" />
-          <div class="text-start grow">
+          <div class="grow text-start">
             <Text fontWeight="medium">{user.name}</Text>
             <Text size="tiny" color="muted">{user.email}</Text>
           </div>
diff --git a/web/src/lib/modals/AlbumEditModal.svelte b/web/src/lib/modals/AlbumEditModal.svelte
index 386bf93084..7c4ee9b626 100644
--- a/web/src/lib/modals/AlbumEditModal.svelte
+++ b/web/src/lib/modals/AlbumEditModal.svelte
@@ -25,10 +25,10 @@
 </script>
 
 <FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit}>
-  <div class="flex items-center gap-8 m-4">
-    <AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />
+  <div class="m-4 flex items-center gap-8">
+    <AlbumCover {album} class="hidden size-50 shadow-lg sm:flex" />
 
-    <div class="grow flex flex-col gap-4">
+    <div class="flex grow flex-col gap-4">
       <Field label={$t('name')}>
         <Input bind:value={albumName} />
       </Field>
diff --git a/web/src/lib/modals/AlbumOptionsModal.svelte b/web/src/lib/modals/AlbumOptionsModal.svelte
index 8d7088266c..cc832453fc 100644
--- a/web/src/lib/modals/AlbumOptionsModal.svelte
+++ b/web/src/lib/modals/AlbumOptionsModal.svelte
@@ -77,7 +77,7 @@
     <Stack gap={6}>
       <div>
         <Text size="medium" fontWeight="semi-bold">{$t('settings')}</Text>
-        <div class="grid gap-y-3 ps-2 mt-2">
+        <div class="mt-2 grid gap-y-3 ps-2">
           {#if album.order}
             <Field label={$t('display_order')}>
               <Select
@@ -100,7 +100,7 @@
       </div>
 
       <div>
-        <HStack fullWidth class="justify-between mb-2">
+        <HStack fullWidth class="mb-2 justify-between">
           <Text size="medium" fontWeight="semi-bold">{$t('people')}</Text>
           <HeaderActionButton action={AddUsers} />
         </HStack>
@@ -130,7 +130,7 @@
         </div>
       </div>
       <div class="mb-4">
-        <HStack class="justify-between mb-2">
+        <HStack class="mb-2 justify-between">
           <Text size="medium" fontWeight="semi-bold">{$t('shared_links')}</Text>
           <HeaderActionButton action={CreateSharedLink} />
         </HStack>
diff --git a/web/src/lib/modals/AlbumPickerModal.svelte b/web/src/lib/modals/AlbumPickerModal.svelte
index 3456a9c192..34bf3c0490 100644
--- a/web/src/lib/modals/AlbumPickerModal.svelte
+++ b/web/src/lib/modals/AlbumPickerModal.svelte
@@ -157,7 +157,7 @@
         <!-- eslint-disable-next-line svelte/require-each-key -->
         {#each { length: 3 } as _}
           <div class="flex animate-pulse gap-4 px-6 py-2">
-            <div class="h-12 w-12 rounded-xl bg-slate-200"></div>
+            <div class="size-12 rounded-xl bg-slate-200"></div>
             <div class="flex flex-col items-start justify-center gap-2">
               <span class="h-4 w-36 animate-pulse bg-slate-200"></span>
               <div class="flex animate-pulse gap-1">
@@ -175,7 +175,7 @@
           bind:value={search}
           use:initInput
         />
-        <div class="immich-scrollbar overflow-y-auto">
+        <div class="overflow-y-auto immich-scrollbar">
           <!-- eslint-disable-next-line svelte/require-each-key -->
           {#each albumModalRows as row}
             {#if row.type === AlbumModalRowType.NEW_ALBUM}
@@ -205,16 +205,16 @@
     {/if}
   </ModalBody>
   <ModalFooter>
-    <div class="flex justify-around w-full">
+    <div class="flex w-full justify-around">
       <div class="flex gap-4">
-        <div class="flex gap-1 place-items-center">
-          <span class="bg-gray-300 dark:bg-gray-500 rounded p-1">
+        <div class="flex place-items-center gap-1">
+          <span class="rounded-sm bg-gray-300 p-1 dark:bg-gray-500">
             <Icon icon={mdiKeyboardReturn} size="1rem" />
           </span>
           <Text size="tiny">{$t('to_select')}</Text>
         </div>
-        <div class="flex gap-1 place-items-center">
-          <span class="bg-gray-300 dark:bg-gray-500 rounded p-1">
+        <div class="flex place-items-center gap-1">
+          <span class="rounded-sm bg-gray-300 p-1 dark:bg-gray-500">
             <Text size="tiny">CTRL</Text>
           </span>
           <Text size="tiny">{$t('to_multi_select')}</Text>
diff --git a/web/src/lib/modals/AppDownloadModal.svelte b/web/src/lib/modals/AppDownloadModal.svelte
index 9041def7be..84d7630909 100644
--- a/web/src/lib/modals/AppDownloadModal.svelte
+++ b/web/src/lib/modals/AppDownloadModal.svelte
@@ -8,17 +8,17 @@
 </script>
 
 <BasicModal title={$t('app_download_links')} size="tiny" {onClose}>
-  <div class="flex flex-col gap-4 max-w-50 mx-auto">
+  <div class="mx-auto flex max-w-50 flex-col gap-4">
     <a href="https://play.google.com/store/apps/details?id=app.alextran.immich" target="_blank" id="play-store-link">
-      <img class="w-full mt-2" alt="Get it on Google Play" src={playStoreBadge} />
+      <img class="mt-2 w-full" alt="Get it on Google Play" src={playStoreBadge} />
     </a>
 
     <a href="https://apps.apple.com/us/app/immich/id1613945652" target="_blank" id="app-store-link">
-      <img class="w-full mt-2" alt="Download on the App Store" src={appStoreBadge} />
+      <img class="mt-2 w-full" alt="Download on the App Store" src={appStoreBadge} />
     </a>
 
     <a href="https://f-droid.org/packages/app.alextran.immich/" target="_blank" id="fdroid-link">
-      <img class="w-full mt-2" alt="Get it on F-Droid" src={fdroidBadge} />
+      <img class="mt-2 w-full" alt="Get it on F-Droid" src={fdroidBadge} />
     </a>
   </div>
 </BasicModal>
diff --git a/web/src/lib/modals/AssetChangeDateModal.svelte b/web/src/lib/modals/AssetChangeDateModal.svelte
index e35c7d3ac1..53d0769796 100644
--- a/web/src/lib/modals/AssetChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetChangeDateModal.svelte
@@ -61,9 +61,9 @@
   disabled={!date.isValid || !selectedOption}
   size="small"
 >
-  <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
+  <Label for="datetime" class="mb-1 block">{$t('date_and_time')}</Label>
   <DateInput
-    class="immich-form-input w-full mb-2"
+    class="mb-2 immich-form-input w-full"
     id="datetime"
     type="datetime-local"
     bind:value={() => selectedDate, updateSelectedDate}
diff --git a/web/src/lib/modals/AssetDeleteConfirmModal.svelte b/web/src/lib/modals/AssetDeleteConfirmModal.svelte
index aba1d59e34..51f6c01e58 100644
--- a/web/src/lib/modals/AssetDeleteConfirmModal.svelte
+++ b/web/src/lib/modals/AssetDeleteConfirmModal.svelte
@@ -39,7 +39,7 @@
     </p>
     <p><b>{$t('cannot_undo_this_action')}</b></p>
 
-    <div class="pt-4 flex justify-center items-center gap-2">
+    <div class="flex items-center justify-center gap-2 pt-4">
       <Checkbox id="confirm-deletion-input" bind:checked color="secondary" />
       <Label label={$t('do_not_show_again')} for="confirm-deletion-input" />
     </div>
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
index a9eb6692e2..c281eace30 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
@@ -76,11 +76,11 @@
     <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
   </Field>
   {#if showRelative}
-    <Label for="relativedatetime" class="block mb-1">{$t('offset')}</Label>
-    <DurationInput class="immich-form-input w-full mb-2" id="relativedatetime" bind:value={selectedDuration} />
+    <Label for="relativedatetime" class="mb-1 block">{$t('offset')}</Label>
+    <DurationInput class="mb-2 immich-form-input w-full" id="relativedatetime" bind:value={selectedDuration} />
   {:else}
-    <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
-    <DateInput class="immich-form-input w-full mb-2" id="datetime" type="datetime-local" bind:value={selectedDate} />
+    <Label for="datetime" class="mb-1 block">{$t('date_and_time')}</Label>
+    <DateInput class="mb-2 immich-form-input w-full" id="datetime" type="datetime-local" bind:value={selectedDate} />
   {/if}
   <div class="w-full">
     <Combobox
diff --git a/web/src/lib/modals/AssetTagModal.svelte b/web/src/lib/modals/AssetTagModal.svelte
index 4db551bac1..67f855ac52 100644
--- a/web/src/lib/modals/AssetTagModal.svelte
+++ b/web/src/lib/modals/AssetTagModal.svelte
@@ -78,7 +78,7 @@
     />
   </div>
 
-  <section class="flex flex-wrap pt-2 gap-1">
+  <section class="flex flex-wrap gap-1 pt-2">
     {#each selectedIds as tagId (tagId)}
       {@const tag = tagMap[tagId]}
       {#if tag}
diff --git a/web/src/lib/modals/AvatarEditModal.svelte b/web/src/lib/modals/AvatarEditModal.svelte
index 41e6cc4f37..5582c4bc14 100644
--- a/web/src/lib/modals/AvatarEditModal.svelte
+++ b/web/src/lib/modals/AvatarEditModal.svelte
@@ -33,7 +33,7 @@
 
 <Modal title={$t('select_avatar_color')} size="small" {onClose}>
   <ModalBody>
-    <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 place-items-center">
+    <div class="grid grid-cols-2 place-items-center gap-4 sm:grid-cols-5">
       {#each colors as color (color)}
         <button type="button" onclick={() => onSave(color)}>
           <UserAvatar
diff --git a/web/src/lib/modals/CreateFaceModal.svelte b/web/src/lib/modals/CreateFaceModal.svelte
index fa845cba2d..24466d0cc4 100644
--- a/web/src/lib/modals/CreateFaceModal.svelte
+++ b/web/src/lib/modals/CreateFaceModal.svelte
@@ -74,10 +74,10 @@
   <Text size="tiny" class="mb-4" color="muted">{$t('create_person_subtitle')}</Text>
   {#if previewUrl}
     <Field label={$t('preview')}>
-      <div class="flex justify-center rounded-xl bg-gray-50 p-3 dark:border-gray-700 dark:bg-black/20 relative">
+      <div class="relative flex justify-center rounded-xl bg-gray-50 p-3 dark:border-gray-700 dark:bg-black/20">
         <img src={previewUrl} alt={$t('preview')} class="max-h-48 rounded-lg object-contain shadow-sm" />
         {#if isSubmitting}
-          <div class="flex place-items-center place-content-center absolute inset-0 bg-black/20 rounded-lg">
+          <div class="absolute inset-0 flex place-content-center place-items-center rounded-lg bg-black/20">
             <LoadingSpinner />
           </div>
         {/if}
diff --git a/web/src/lib/modals/EmailTemplatePreviewModal.svelte b/web/src/lib/modals/EmailTemplatePreviewModal.svelte
index 3165c654da..faad6e8f03 100644
--- a/web/src/lib/modals/EmailTemplatePreviewModal.svelte
+++ b/web/src/lib/modals/EmailTemplatePreviewModal.svelte
@@ -12,11 +12,11 @@
 
 <Modal title={$t('admin.template_email_preview')} {onClose} size="giant">
   <ModalBody>
-    <div class="relative w-full h-240 overflow-hidden">
+    <div class="relative h-240 w-full overflow-hidden">
       <iframe
         title={$t('admin.template_email_preview')}
         srcdoc={html}
-        class="absolute top-0 left-0 w-full h-full border-none"
+        class="absolute top-0 left-0 size-full border-none"
       ></iframe>
     </div>
   </ModalBody>
diff --git a/web/src/lib/modals/GeolocationPointPickerModal.svelte b/web/src/lib/modals/GeolocationPointPickerModal.svelte
index 2d9fb5e7a2..069f62d3ac 100644
--- a/web/src/lib/modals/GeolocationPointPickerModal.svelte
+++ b/web/src/lib/modals/GeolocationPointPickerModal.svelte
@@ -143,8 +143,8 @@
   onClose={handleConfirm}
 >
   {#snippet prompt()}
-    <div class="flex flex-col w-full h-full gap-2">
-      <div class="relative w-64 sm:w-96 z-1" use:clickOutside={{ onOutclick: () => (hideSuggestion = true) }}>
+    <div class="flex size-full flex-col gap-2">
+      <div class="relative z-1 w-64 sm:w-96" use:clickOutside={{ onOutclick: () => (hideSuggestion = true) }}>
         {#if suggestionContainer}
           <div use:listNavigation={suggestionContainer}>
             <button type="button" class="w-full" onclick={() => (hideSuggestion = false)}>
@@ -161,7 +161,7 @@
         {/if}
 
         <div
-          class="absolute w-full bg-gray-200 dark:bg-gray-700 rounded-b-lg"
+          class="absolute w-full rounded-b-lg bg-gray-200 dark:bg-gray-700"
           id="suggestion"
           bind:this={suggestionContainer}
         >
@@ -169,10 +169,10 @@
             {#each suggestedPlaces as place (place.latitude + place.longitude)}
               <button
                 type="button"
-                class="flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-12 place-items-center px-5 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] last:rounded-b-lg last:border-b"
+                class="flex h-12 w-full place-items-center border-t border-gray-400 px-5 last:rounded-b-lg last:border-b hover:bg-gray-300 focus:bg-gray-300 dark:border-immich-dark-gray hover:dark:bg-[#232932] focus:dark:bg-[#232932]"
                 onclick={() => handleUseSuggested(place.latitude, place.longitude)}
               >
-                <p class="text-sm text-gray-700 dark:text-gray-100 truncate">
+                <p class="truncate text-sm text-gray-700 dark:text-gray-100">
                   {getLocation(place.name, place.admin1name, place.admin2name)}
                 </p>
               </button>
@@ -182,11 +182,11 @@
       </div>
 
       <span>{$t('pick_a_location')}</span>
-      <div class="h-125 min-h-75 w-full z-0">
+      <div class="z-0 h-125 min-h-75 w-full">
         {#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 -->
-            <div class="flex items-center justify-center h-full w-full">
+            <div class="flex size-full items-center justify-center">
               <LoadingSpinner />
             </div>
           {/await}
@@ -216,7 +216,7 @@
         {/await}
       </div>
 
-      <div class="grid sm:grid-cols-2 gap-4 text-sm text-start mt-4">
+      <div class="mt-4 grid gap-4 text-start text-sm sm:grid-cols-2">
         <CoordinatesInput lat={point?.lat} lng={point?.lng} {onUpdate} />
       </div>
     </div>
diff --git a/web/src/lib/modals/HelpAndFeedbackModal.svelte b/web/src/lib/modals/HelpAndFeedbackModal.svelte
index 8b73978672..29ec65fd9a 100644
--- a/web/src/lib/modals/HelpAndFeedbackModal.svelte
+++ b/web/src/lib/modals/HelpAndFeedbackModal.svelte
@@ -17,7 +17,7 @@
   <div>
     <a href={url} target="_blank" rel="noreferrer">
       <Icon {icon} size="1.5em" class="inline-block" />
-      <p class="font-medium text-primary text-sm underline inline-block">
+      <p class="inline-block text-sm font-medium text-primary underline">
         {text}
       </p>
     </a>
@@ -27,7 +27,7 @@
 <Modal title={$t('support_and_feedback')} {onClose} size="small">
   <ModalBody>
     <p>{$t('official_immich_resources')}</p>
-    <div class="flex flex-col gap-2 mt-5">
+    <div class="mt-5 flex flex-col gap-2">
       {@render link(
         `https://docs.${info.version}.archive.immich.app/overview/introduction`,
         mdiInformationOutline,
@@ -46,10 +46,10 @@
     </div>
     {#if info.thirdPartyBugFeatureUrl || info.thirdPartySourceUrl || info.thirdPartyDocumentationUrl || info.thirdPartySupportUrl}
       <p class="mt-5">{$t('third_party_resources')}</p>
-      <p class="text-sm mt-1">
+      <p class="mt-1 text-sm">
         {$t('support_third_party_description')}
       </p>
-      <div class="flex flex-col gap-2 mt-5">
+      <div class="mt-5 flex flex-col gap-2">
         {#if info.thirdPartyDocumentationUrl}
           {@render link(info.thirdPartyDocumentationUrl, mdiInformationOutline, $t('documentation'))}
         {/if}
diff --git a/web/src/lib/modals/MapModal.svelte b/web/src/lib/modals/MapModal.svelte
index 9a59fb72a9..b019a472a3 100644
--- a/web/src/lib/modals/MapModal.svelte
+++ b/web/src/lib/modals/MapModal.svelte
@@ -15,12 +15,12 @@
 
 <Modal title={$t('map')} size="giant" {onClose}>
   <ModalBody>
-    <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
+    <div class="flex size-full flex-col gap-2 rounded-2xl border border-gray-300 dark:border-light">
       <div class="h-[75vh] min-h-[300px] w-full">
         {#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 -->
-            <div class="flex items-center justify-center h-full w-full">
+            <div class="flex size-full items-center justify-center">
               <LoadingSpinner />
             </div>
           {/await}
diff --git a/web/src/lib/modals/MapSettingsModal.svelte b/web/src/lib/modals/MapSettingsModal.svelte
index 1f08f37770..4b45def861 100644
--- a/web/src/lib/modals/MapSettingsModal.svelte
+++ b/web/src/lib/modals/MapSettingsModal.svelte
@@ -42,7 +42,7 @@
     {#if customDateRange}
       <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
         <div class="flex items-center justify-between gap-8">
-          <label class="immich-form-label shrink-0 text-sm" for="date-after">{$t('date_after')}</label>
+          <label class="shrink-0 text-sm immich-form-label" for="date-after">{$t('date_after')}</label>
           <DateInput
             class="immich-form-input w-40"
             type="date"
@@ -52,7 +52,7 @@
           />
         </div>
         <div class="flex items-center justify-between gap-8">
-          <label class="immich-form-label shrink-0 text-sm" for="date-before">{$t('date_before')}</label>
+          <label class="shrink-0 text-sm immich-form-label" for="date-before">{$t('date_before')}</label>
           <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
         </div>
         <div class="flex justify-center text-xs">
diff --git a/web/src/lib/modals/NavigateToDateModal.svelte b/web/src/lib/modals/NavigateToDateModal.svelte
index 51f968c6df..8ea1076db0 100644
--- a/web/src/lib/modals/NavigateToDateModal.svelte
+++ b/web/src/lib/modals/NavigateToDateModal.svelte
@@ -52,7 +52,7 @@
     </HStack>
     <HStack fullWidth>
       <DateInput
-        class="immich-form-input text-gray-700 w-full"
+        class="immich-form-input w-full text-gray-700"
         id="datetime"
         type="datetime-local"
         bind:value={selectedDate}
diff --git a/web/src/lib/modals/ObtainiumConfigModal.svelte b/web/src/lib/modals/ObtainiumConfigModal.svelte
index d8a1b0a54b..d283d54894 100644
--- a/web/src/lib/modals/ObtainiumConfigModal.svelte
+++ b/web/src/lib/modals/ObtainiumConfigModal.svelte
@@ -48,22 +48,22 @@
       <Input bind:value={inputApiKey} />
     </Field>
 
-    <div class="flex justify-end mt-2">
+    <div class="mt-2 flex justify-end">
       <Button size="small" onclick={handleCreate}>{$t('create_api_key')}</Button>
     </div>
 
     {#if inputUrl && inputApiKey && archVariant}
       <div class="content-center">
         <hr />
-        <div class="flex place-items-center place-content-center">
+        <div class="flex place-content-center place-items-center">
           <a
             href={obtainiumLink}
-            class="underline text-sm immich-form-label"
+            class="text-sm immich-form-label underline"
             target="_blank"
             rel="noreferrer"
             id="obtainium-link"
           >
-            <img class="pt-2 h-20" alt="Get it on Obtainium" src={obtainiumBadge} />
+            <img class="h-20 pt-2" alt="Get it on Obtainium" src={obtainiumBadge} />
           </a>
         </div>
       </div>
diff --git a/web/src/lib/modals/PartnerSelectionModal.svelte b/web/src/lib/modals/PartnerSelectionModal.svelte
index 17872dc721..fdebcfecb4 100644
--- a/web/src/lib/modals/PartnerSelectionModal.svelte
+++ b/web/src/lib/modals/PartnerSelectionModal.svelte
@@ -36,16 +36,16 @@
 <Modal title={$t('add_partner')} {onClose} size="small">
   <ModalBody>
     {#await loadUsers()}
-      <div class="w-full flex place-items-center place-content-center">
+      <div class="flex w-full place-content-center place-items-center">
         <LoadingSpinner />
       </div>
     {:then _}
       {#if availableUsers.length > 0}
-        <div class="immich-scrollbar max-h-75 overflow-y-auto gap-2 flex flex-col">
+        <div class="flex max-h-75 flex-col gap-2 overflow-y-auto immich-scrollbar">
           {#each availableUsers as user (user.id)}
             <ListButton onclick={() => selectUser(user)} selected={selectedUsers.includes(user)}>
               <UserAvatar {user} size="md" />
-              <div class="text-start grow">
+              <div class="grow text-start">
                 <Text fontWeight="medium">{user.name}</Text>
                 <Text size="tiny" color="muted">{user.email}</Text>
               </div>
diff --git a/web/src/lib/modals/PasswordResetSuccessModal.svelte b/web/src/lib/modals/PasswordResetSuccessModal.svelte
index ed950b0909..3cb1167173 100644
--- a/web/src/lib/modals/PasswordResetSuccessModal.svelte
+++ b/web/src/lib/modals/PasswordResetSuccessModal.svelte
@@ -16,7 +16,7 @@
   <div class="flex flex-col gap-4">
     <Text>{$t('admin.user_password_has_been_reset')}</Text>
 
-    <div class="flex justify-center gap-2 items-center">
+    <div class="flex items-center justify-center gap-2">
       <Code color="primary">{newPassword}</Code>
       <IconButton
         icon={mdiContentCopy}
diff --git a/web/src/lib/modals/PeoplePickerModal.svelte b/web/src/lib/modals/PeoplePickerModal.svelte
index fa72e92af5..0b6520105b 100644
--- a/web/src/lib/modals/PeoplePickerModal.svelte
+++ b/web/src/lib/modals/PeoplePickerModal.svelte
@@ -61,7 +61,7 @@
     <div class="flex flex-col gap-4">
       <SearchBar bind:name={searchName} placeholder={$t('search_people')} showLoadingSpinner={false} />
 
-      <div class="immich-scrollbar max-h-96 overflow-y-auto">
+      <div class="max-h-96 overflow-y-auto immich-scrollbar">
         {#if loading}
           <div class="flex justify-center p-8">
             <LoadingSpinner />
diff --git a/web/src/lib/modals/PersonMergeSuggestionModal.svelte b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
index 6bc2425eed..1471bc4a51 100644
--- a/web/src/lib/modals/PersonMergeSuggestionModal.svelte
+++ b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
@@ -61,7 +61,7 @@
 >
   <div class="flex items-center justify-center gap-2 py-4 md:h-36">
     {#if !choosePersonToMerge}
-      <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">
+      <div class="flex size-20 items-center px-1 md:size-24 md:px-2">
         <ImageThumbnail
           circle
           shadow
@@ -73,7 +73,7 @@
 
       <div class="grid grid-rows-3">
         <div></div>
-        <div class="flex flex-col h-full items-center justify-center">
+        <div class="flex h-full flex-col items-center justify-center">
           <div class="flex h-full items-center justify-center">
             <Icon icon={mdiCallMerge} size="48" class="rotate-90 dark:text-white" />
           </div>
@@ -93,7 +93,7 @@
       <button
         type="button"
         disabled={potentialMergePeople.length === 0}
-        class="flex h-28 w-28 items-center rounded-full border-2 border-immich-primary px-1 dark:border-immich-dark-primary md:h-32 md:w-32 md:px-2"
+        class="flex size-28 items-center rounded-full border-2 border-immich-primary px-1 md:size-32 md:px-2 dark:border-immich-dark-primary"
         onclick={() => {
           if (potentialMergePeople.length > 0) {
             choosePersonToMerge = !choosePersonToMerge;
@@ -117,8 +117,8 @@
         <div class="flex items-center justify-center">
           <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">
             {#each potentialMergePeople as person (person.id)}
-              <div class="h-24 w-24 md:h-28 md:w-28">
-                <button type="button" class="p-2 w-full" onclick={() => changePersonToMerge(person)}>
+              <div class="size-24 md:size-28">
+                <button type="button" class="w-full p-2" onclick={() => changePersonToMerge(person)}>
                   <ImageThumbnail
                     border={true}
                     circle
diff --git a/web/src/lib/modals/QrCodeModal.svelte b/web/src/lib/modals/QrCodeModal.svelte
index 6bd1ad6b31..aace4254f7 100644
--- a/web/src/lib/modals/QrCodeModal.svelte
+++ b/web/src/lib/modals/QrCodeModal.svelte
@@ -18,7 +18,7 @@
 
 <Modal {title} icon={mdiLink} {onClose} size="small">
   <ModalBody>
-    <div class="w-full py-2 px-10">
+    <div class="w-full px-10 py-2">
       <div bind:clientWidth={modalWidth} class="w-full">
         <Qrcode {value} width={modalWidth} />
       </div>
diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
index 61dd12ba14..0cb5276343 100644
--- a/web/src/lib/modals/SearchFilterModal.svelte
+++ b/web/src/lib/modals/SearchFilterModal.svelte
@@ -197,7 +197,7 @@
           <SearchRatingsSection bind:rating={filter.rating} />
         {/if}
 
-        <div class="grid md:grid-cols-2 gap-x-5 gap-y-10">
+        <div class="grid gap-x-5 gap-y-10 md:grid-cols-2">
           <!-- MEDIA TYPE -->
           <SearchMediaSection bind:filteredMedia={filter.mediaType} />
 
diff --git a/web/src/lib/modals/ServerAboutModal.svelte b/web/src/lib/modals/ServerAboutModal.svelte
index 92bbac3d67..412dbe4e20 100644
--- a/web/src/lib/modals/ServerAboutModal.svelte
+++ b/web/src/lib/modals/ServerAboutModal.svelte
@@ -17,7 +17,7 @@
 
 <Modal title={$t('about')} {onClose}>
   <ModalBody>
-    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-4">
+    <div class="flex flex-col gap-4 sm:grid sm:grid-cols-2">
       {#if info.sourceRef === 'main' && info.repository === 'immich-app/immich'}
         <Alert color="warning" title={$t('main_branch_warning')} class="col-span-full" size="small" />
       {/if}
@@ -77,7 +77,7 @@
             {@const createdAt = DateTime.fromISO(item.createdAt)}
             <li>
               <span
-                class="immich-form-label pb-2 text-xs"
+                class="pb-2 text-xs immich-form-label"
                 id="version-history"
                 title={createdAt.toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS, { locale: $locale })}
               >
diff --git a/web/src/lib/modals/ShortcutsModal.svelte b/web/src/lib/modals/ShortcutsModal.svelte
index 0e5626a6f7..899f70ed99 100644
--- a/web/src/lib/modals/ShortcutsModal.svelte
+++ b/web/src/lib/modals/ShortcutsModal.svelte
@@ -71,7 +71,7 @@
                     </p>
                   {/each}
                 </div>
-                <p class="mb-1 mt-1 flex">{shortcut.action}</p>
+                <p class="my-1 flex">{shortcut.action}</p>
               </div>
             {/each}
           </div>
@@ -93,7 +93,7 @@
                   {/each}
                 </div>
                 <div class="flex items-center gap-2">
-                  <p class="mb-1 mt-1 flex">{shortcut.action}</p>
+                  <p class="my-1 flex">{shortcut.action}</p>
                   {#if shortcut.info}
                     <Icon icon={mdiInformationOutline} title={shortcut.info} />
                   {/if}
diff --git a/web/src/routes/(user)/DragAndDropUploadOverlay.svelte b/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
index b37b8c0739..aced32dfe5 100644
--- a/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
+++ b/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
@@ -181,7 +181,7 @@
 {#if dragStartTarget}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 flex h-full w-full flex-col items-center justify-center bg-gray-100/90 text-immich-dark-gray dark:bg-immich-dark-bg/90 dark:text-immich-gray"
+    class="fixed inset-0 flex size-full flex-col items-center justify-center bg-gray-100/90 text-immich-dark-gray dark:bg-immich-dark-bg/90 dark:text-immich-gray"
     transition:fade={{ duration: 250 }}
     ondragover={onDragOver}
   >
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index b61ea49c39..0548d882ca 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -30,7 +30,7 @@
   {/snippet}
 
   <div class="xl:hidden">
-    <div class="w-fit h-14 dark:text-immich-dark-fg py-2">
+    <div class="h-14 w-fit py-2 dark:text-immich-dark-fg">
       <GroupTab
         label={$t('show_albums')}
         filters={Object.keys(AlbumFilter)}
@@ -52,7 +52,7 @@
     bind:albumGroupIds={albumGroups}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_albums_message')} onClick={() => createAlbumAndRedirect()} class="mt-10 mx-auto" />
+      <EmptyPlaceholder text={$t('no_albums_message')} onClick={() => createAlbumAndRedirect()} class="mx-auto mt-10" />
     {/snippet}
   </Albums>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/albums/AlbumsControls.svelte b/web/src/routes/(user)/albums/AlbumsControls.svelte
index 13677bb1f9..ca1bdf1eb7 100644
--- a/web/src/routes/(user)/albums/AlbumsControls.svelte
+++ b/web/src/routes/(user)/albums/AlbumsControls.svelte
@@ -113,7 +113,7 @@
 </script>
 
 <!-- Filter Albums by Sharing Status (All, Owned, Shared) -->
-<div class="hidden xl:block h-10">
+<div class="hidden h-10 xl:block">
   <GroupTab
     label={$t('show_albums')}
     filters={Object.values(albumFilterNames)}
@@ -123,7 +123,7 @@
 </div>
 
 <!-- Search Albums -->
-<div class="hidden xl:block h-10 xl:w-60 2xl:w-80">
+<div class="hidden h-10 xl:block xl:w-60 2xl:w-80">
   <SearchBar placeholder={$t('search_albums')} bind:name={searchQuery} showLoadingSpinner={false} />
 </div>
 
@@ -166,7 +166,7 @@
 {#if getSelectedAlbumGroupOption($albumViewSettings) !== AlbumGroupBy.None}
   <span in:fly={{ x: -50, duration: 250 }}>
     <!-- Expand Album Groups -->
-    <div class="hidden xl:flex gap-0">
+    <div class="hidden gap-0 xl:flex">
       <div class="block">
         <IconButton
           title={$t('expand_all')}
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 9a72417b74..4112cd4f27 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
@@ -339,7 +339,7 @@
 
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: Route.albums() }}>
   <div class="relative w-full shrink">
-    <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
+    <main class="relative h-dvh overflow-hidden px-2 pt-(--navbar-height) max-md:pt-(--navbar-height-md) md:px-6">
       <Timeline
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}
@@ -416,13 +416,13 @@
           {/if}
 
           {#if album.assetCount === 0}
-            <section id="empty-album" class=" mt-50 flex place-content-center place-items-center">
+            <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>
+                <p class="text-xs uppercase dark:text-immich-dark-fg">{$t('add_photos')}</p>
                 <button
                   type="button"
                   onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)}
-                  class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-2xl border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 dark:hover:bg-gray-500/20 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+                  class="mt-5 flex w-full place-items-center gap-6 rounded-2xl border bg-subtle p-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:bg-gray-500/20 dark:hover:text-immich-dark-primary"
                 >
                   <span class="text-primary">
                     <Icon icon={mdiPlus} size="24" />
@@ -436,7 +436,7 @@
       </Timeline>
 
       {#if showActivityStatus}
-        <div class="absolute z-2 bottom-0 end-0 mb-6 me-12">
+        <div class="absolute inset-e-0 bottom-0 z-2 me-12 mb-6">
           <ActivityStatus
             disabled={!album.isActivityEnabled}
             isLiked={activityManager.isLiked}
@@ -617,7 +617,7 @@
       <div
         transition:fly={{ duration: 150 }}
         id="activity-panel"
-        class="z-2 w-90 md:w-115 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
+        class="z-2 w-90 overflow-y-auto transition-all md:w-115 dark:border-l dark:border-s-immich-dark-gray"
         translate="yes"
       >
         <ActivityViewer disabled={!album.isActivityEnabled} albumUsers={album.albumUsers} albumId={album.id} />
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
index 9443392456..1d80fcb766 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
@@ -44,7 +44,7 @@
     }))}
   />
 {:else if description}
-  <p class="wrap-break-words whitespace-pre-line w-full text-black dark:text-white text-base">
+  <p class="wrap-break-words w-full text-base whitespace-pre-line text-black dark:text-white">
     {description}
   </p>
 {/if}
diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 45b59ed237..8d06d68758 100644
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -53,7 +53,7 @@
     onEscape={handleEscape}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_archived_assets_message')} class="mt-10 mx-auto" />
+      <EmptyPlaceholder text={$t('no_archived_assets_message')} class="mx-auto mt-10" />
     {/snippet}
   </Timeline>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/buy/SupporterBadge.svelte b/web/src/routes/(user)/buy/SupporterBadge.svelte
index 2dde2717c2..feb5538bd4 100644
--- a/web/src/routes/(user)/buy/SupporterBadge.svelte
+++ b/web/src/routes/(user)/buy/SupporterBadge.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div
-  class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 rounded-lg bg-clip-padding border border-transparent relative supporter-effect"
+  class="supporter-effect relative mt-2 flex place-items-center gap-1 rounded-lg border border-transparent bg-gray-200/50 bg-clip-padding p-2 dark:bg-immich-dark-primary/10"
   class:place-content-center={centered}
 >
   <Logo variant="icon" size={logoSize === 'sm' ? 'tiny' : 'small'} />
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 41ebd6b8ca..df2a6c0bfa 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -41,7 +41,7 @@
 
 <UserPageLayout title={data.meta.title}>
   {#if hasPeople}
-    <div class="mb-6 mt-2">
+    <div class="mt-2 mb-6">
       <div class="flex justify-between">
         <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('people')}</p>
         <a
@@ -50,10 +50,10 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <SingleGridRow class="grid grid-flow-col md:grid-auto-fill-28 grid-auto-fill-20 gap-x-4">
+      <SingleGridRow class="grid grid-flow-col grid-auto-fill-20 gap-x-4 md:grid-auto-fill-28">
         {#snippet children({ itemCount })}
           {#each people.slice(0, itemCount) as person (person.id)}
-            <a href={Route.viewPerson(person)} class="text-center relative">
+            <a href={Route.viewPerson(person)} class="relative text-center">
               <ImageThumbnail
                 circle
                 shadow
@@ -62,11 +62,11 @@
                 widthStyle="100%"
               />
               {#if person.isFavorite}
-                <div class="absolute top-2 start-2">
+                <div class="absolute inset-s-2 top-2">
                   <Icon icon={mdiHeart} size="24" class="text-white" />
                 </div>
               {/if}
-              <p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
+              <p class="mt-2 text-sm font-medium text-ellipsis dark:text-white">{person.name}</p>
             </a>
           {/each}
         {/snippet}
@@ -75,7 +75,7 @@
   {/if}
 
   {#if places.length > 0}
-    <div class="mb-6 mt-2">
+    <div class="mt-2 mb-6">
       <div class="flex justify-between">
         <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('places')}</p>
         <a
@@ -84,7 +84,7 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <SingleGridRow class="grid grid-flow-col md:grid-auto-fill-36 grid-auto-fill-28 gap-x-4">
+      <SingleGridRow class="grid grid-flow-col grid-auto-fill-28 gap-x-4 md:grid-auto-fill-36">
         {#snippet children({ itemCount })}
           {#each places.slice(0, itemCount) as item (item.data.id)}
             <a class="relative" href={Route.search({ city: item.value })} draggable="false">
@@ -92,11 +92,11 @@
                 <img
                   src={getAssetMediaUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
                   alt={item.value}
-                  class="object-cover aspect-square w-full"
+                  class="aspect-square w-full object-cover"
                 />
               </div>
               <span
-                class="absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
+                class="absolute bottom-2 w-full px-1 text-center text-sm font-medium text-ellipsis text-white capitalize backdrop-blur-[1px] hover:cursor-pointer"
               >
                 {item.value}
               </span>
@@ -108,6 +108,6 @@
   {/if}
 
   {#if !hasPeople && places.length === 0}
-    <EmptyPlaceholder text={$t('no_explore_results_message')} class="mt-10 mx-auto" />
+    <EmptyPlaceholder text={$t('no_explore_results_message')} class="mx-auto mt-10" />
   {/if}
 </UserPageLayout>
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
index e601faae4f..c69bd75ea9 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -56,7 +56,7 @@
     onEscape={handleEscape}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_favorites_message')} class="mt-10 mx-auto" />
+      <EmptyPlaceholder text={$t('no_favorites_message')} class="mx-auto mt-10" />
     {/snippet}
   </Timeline>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 144abcd544..da2b434379 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -79,7 +79,7 @@
     <Sidebar>
       <SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} breakpoint="md" />
       <section>
-        <Text class="ps-4 mb-4" size="small">{$t('explorer')}</Text>
+        <Text class="mb-4 ps-4" size="small">{$t('explorer')}</Text>
         <div class="h-full">
           <TreeItems
             icons={{ default: mdiFolderOutline, active: mdiFolder }}
@@ -114,7 +114,7 @@
 </UserPageLayout>
 
 {#if assetMultiSelectManager.selectionActive}
-  <div class="fixed top-0 start-0 w-full">
+  <div class="fixed inset-s-0 top-0 w-full">
     <AssetSelectControlBar>
       {@const Actions = getAssetBulkActions($t)}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
index dcaafe33d4..460f84f572 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -67,7 +67,7 @@
     removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
   >
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} class="mt-10 mx-auto" />
+      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} class="mx-auto mt-10" />
     {/snippet}
   </Timeline>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c5a514bd96..0519398da1 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -54,17 +54,17 @@
 
 {#if featureFlagsManager.value.map}
   <UserPageLayout title={data.meta.title}>
-    <div class="isolate flex h-full w-full flex-col sm:flex-row">
+    <div class="isolate flex size-full flex-col sm:flex-row">
       <div
         class={[
           'min-h-0',
-          isTimelinePanelVisible ? 'h-1/2 w-full pb-2 sm:h-full sm:w-2/3 sm:pe-2 sm:pb-0' : 'h-full w-full',
+          isTimelinePanelVisible ? 'h-1/2 w-full pb-2 sm:h-full sm:w-2/3 sm:pe-2 sm:pb-0' : 'size-full',
         ]}
       >
         {#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 -->
-            <div class="flex items-center justify-center h-full w-full">
+            <div class="flex size-full items-center justify-center">
               <LoadingSpinner />
             </div>
           {/await}
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
index 2a17c55c6d..9bec1be1f8 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
@@ -94,8 +94,8 @@
   });
 </script>
 
-<aside class="h-full w-full overflow-hidden bg-immich-bg dark:bg-immich-dark-bg flex flex-col contain-content">
-  <div class="flex items-center justify-between border-b border-gray-200 dark:border-immich-dark-gray pb-1 pe-1">
+<aside class="flex size-full flex-col overflow-hidden bg-immich-bg contain-content dark:bg-immich-dark-bg">
+  <div class="flex items-center justify-between border-b border-gray-200 pe-1 pb-1 dark:border-immich-dark-gray">
     <div class="flex items-center gap-2">
       <Icon icon={mdiImageMultiple} size="20" />
       <p class="text-sm font-medium text-immich-fg dark:text-immich-dark-fg">
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
index e69f31fbd0..49a8f2b341 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
@@ -46,9 +46,9 @@
 {#if !imageLoaded}
   <DelayedLoadingSpinner />
 {:else if imageLoaded}
-  <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
+  <div transition:fade={{ duration: assetViewerFadeDuration }} class="size-full">
     <img
-      class="h-full w-full rounded-2xl object-contain transition-all"
+      class="size-full rounded-2xl object-contain transition-all"
       src={assetFileUrl}
       alt={$getAltText(asset)}
       draggable="false"
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
index 45501aff0b..9aefa4f9f0 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
@@ -25,12 +25,12 @@
 </script>
 
 {#if showVideo}
-  <div class="h-full w-full bg-pink-9000" transition:fade={{ duration: assetViewerFadeDuration }}>
+  <div class="bg-pink-9000 size-full" transition:fade={{ duration: assetViewerFadeDuration }}>
     <video
       bind:this={videoPlayer}
       autoplay={$autoPlayVideo}
       playsinline
-      class="h-full w-full rounded-2xl object-contain transition-all"
+      class="size-full rounded-2xl object-contain transition-all"
       src={getAssetPlaybackUrl({ id: asset.id })}
       poster={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Preview })}
       draggable="false"
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
index f440207b26..63539a3e68 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
@@ -327,7 +327,7 @@
 />
 
 {#if assetMultiSelectManager.selectionActive}
-  <div class="sticky top-0 z-1 dark">
+  <div class="dark sticky top-0 z-1">
     <AssetSelectControlBar forceDark>
       {@const Actions = getAssetBulkActions($t)}
       <CreateSharedLink />
@@ -381,7 +381,7 @@
       {/snippet}
 
       <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-        <div class="w-12.5 dark">
+        <div class="dark w-12.5">
           <IconButton
             shape="round"
             variant="ghost"
@@ -394,8 +394,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-0.5 w-full bg-gray-500"></span>
-            <span class="absolute start-0 h-0.5 bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
+            <span class="absolute inset-s-0 h-0.5 w-full bg-gray-500"></span>
+            <span class="absolute inset-s-0 h-0.5 bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
           </a>
         {/each}
 
@@ -406,7 +406,7 @@
         </div>
 
         {#if currentTimelineAssets.some((asset) => asset.type === AssetTypeEnum.Video)}
-          <div class="w-12.5 dark">
+          <div class="dark w-12.5">
             <IconButton
               shape="round"
               variant="ghost"
@@ -422,7 +422,7 @@
 
     {#if galleryInView}
       <div
-        class="fixed top-10 start-1/2 -translate-x-1/2 transition-opacity dark z-1"
+        class="dark fixed inset-s-1/2 top-10 z-1 -translate-x-1/2 transition-opacity"
         class:opacity-0={!galleryInView}
         class:opacity-100={galleryInView}
       >
@@ -444,26 +444,26 @@
     <!-- Viewer -->
     <section class="overflow-hidden pt-32 md:pt-20" bind:clientHeight={viewerHeight}>
       <div
-        class="ms-[-100%] box-border flex h-[calc(100vh-224px)] md:h-[calc(100vh-180px)] w-[300%] items-center justify-center gap-10 overflow-hidden"
+        class="ms-[-100%] box-border flex h-[calc(100vh-224px)] w-[300%] items-center justify-center gap-10 overflow-hidden md:h-[calc(100vh-180px)]"
       >
         <!-- PREVIOUS MEMORY -->
         <div class="h-1/2 w-[20vw] rounded-2xl {current.previousMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
           <button
             type="button"
-            class="relative h-full w-full rounded-2xl"
+            class="relative size-full rounded-2xl"
             disabled={!current.previousMemory}
             onclick={handlePreviousMemory}
           >
             {#if current.previousMemory && current.previousMemory.assets.length > 0}
               <img
-                class="h-full w-full rounded-2xl object-cover"
+                class="size-full rounded-2xl object-cover"
                 src={getAssetMediaUrl({ id: current.previousMemory.assets[0].id, size: AssetMediaSize.Preview })}
                 alt={$t('previous_memory')}
                 draggable="false"
               />
             {:else}
               <enhanced:img
-                class="h-full w-full rounded-2xl object-cover"
+                class="size-full rounded-2xl object-cover"
                 src="$lib/assets/no-thumbnail.png"
                 sizes="min(271px,186px)"
                 alt={$t('previous_memory')}
@@ -472,8 +472,8 @@
             {/if}
 
             {#if current.previousMemory}
-              <div class="absolute bottom-4 end-4 text-start text-white">
-                <p class="uppercase text-xs font-semibold text-gray-200">{$t('previous')}</p>
+              <div class="absolute inset-e-4 bottom-4 text-start text-white">
+                <p class="text-xs font-semibold text-gray-200 uppercase">{$t('previous')}</p>
                 <p class="text-xl">{$memoryLaneTitle(current.previousMemory)}</p>
               </div>
             {/if}
@@ -484,7 +484,7 @@
         <div
           class="main-view relative flex h-full w-[70vw] place-content-center place-items-center rounded-2xl bg-black"
         >
-          <div class="relative h-full w-full rounded-2xl bg-black">
+          <div class="relative size-full rounded-2xl bg-black">
             {#key current.asset.id}
               {#if current.asset.isVideo}
                 <MemoryVideoViewer
@@ -499,7 +499,7 @@
             {/key}
 
             <div
-              class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2 dark"
+              class="dark absolute inset-e-0 bottom-0 flex h-full flex-col items-end justify-between gap-2 p-2 transition-all"
               class:opacity-0={galleryInView}
               class:opacity-100={!galleryInView}
             >
@@ -511,7 +511,7 @@
                   color="secondary"
                   aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
                   onclick={() => handleSaveMemory()}
-                  class="w-12 h-12"
+                  class="size-12"
                 />
                 <!-- <IconButton
                   icon={mdiShareVariantOutline}
@@ -556,7 +556,7 @@
             </div>
             <!-- CONTROL BUTTONS -->
             {#if current.previous}
-              <div class="absolute top-1/2 start-0 ms-4 dark">
+              <div class="dark absolute inset-s-0 top-1/2 ms-4">
                 <IconButton
                   shape="round"
                   aria-label={$t('previous_memory')}
@@ -570,7 +570,7 @@
             {/if}
 
             {#if current.next}
-              <div class="absolute top-1/2 end-0 me-4 dark">
+              <div class="dark absolute inset-e-0 top-1/2 me-4">
                 <IconButton
                   shape="round"
                   aria-label={$t('next_memory')}
@@ -583,7 +583,7 @@
               </div>
             {/if}
 
-            <div class="absolute start-8 top-4 text-sm font-medium text-white">
+            <div class="absolute inset-s-8 top-4 text-sm font-medium text-white">
               <p>
                 {fromISODateTimeUTC(current.memory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL, {
                   locale: $locale,
@@ -603,20 +603,20 @@
         <div class="h-1/2 w-[20vw] rounded-2xl {current.nextMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
           <button
             type="button"
-            class="relative h-full w-full rounded-2xl"
+            class="relative size-full rounded-2xl"
             onclick={handleNextMemory}
             disabled={!current.nextMemory}
           >
             {#if current.nextMemory && current.nextMemory.assets.length > 0}
               <img
-                class="h-full w-full rounded-2xl object-cover"
+                class="size-full rounded-2xl object-cover"
                 src={getAssetMediaUrl({ id: current.nextMemory.assets[0].id, size: AssetMediaSize.Preview })}
                 alt={$t('next_memory')}
                 draggable="false"
               />
             {:else}
               <enhanced:img
-                class="h-full w-full rounded-2xl object-cover"
+                class="size-full rounded-2xl object-cover"
                 src="$lib/assets/no-thumbnail.png"
                 sizes="min(271px,186px)"
                 alt={$t('next_memory')}
@@ -625,8 +625,8 @@
             {/if}
 
             {#if current.nextMemory}
-              <div class="absolute bottom-4 start-4 text-start text-white">
-                <p class="uppercase text-xs font-semibold text-gray-200">{$t('up_next')}</p>
+              <div class="absolute inset-s-4 bottom-4 text-start text-white">
+                <p class="text-xs font-semibold text-gray-200 uppercase">{$t('up_next')}</p>
                 <p class="text-xl">{$memoryLaneTitle(current.nextMemory)}</p>
               </div>
             {/if}
@@ -641,7 +641,7 @@
   <!-- GALLERY VIEWER -->
   <section class="bg-immich-dark-gray p-4">
     <div
-      class="sticky mb-10 flex place-content-center place-items-center transition-all dark"
+      class="dark sticky mb-10 flex place-content-center place-items-center transition-all"
       class:opacity-0={galleryInView}
       class:opacity-100={!galleryInView}
     >
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 8126c88137..6cb60bafbe 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="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
+<main class="relative h-dvh overflow-hidden px-2 pt-(--navbar-height) max-md:pt-(--navbar-height-md) md:px-6">
   <Timeline enableRouting={true} {options} assetInteraction={assetMultiSelectManager} onEscape={handleEscape} />
 </main>
 
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index eadc295773..20f4852799 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -315,9 +315,9 @@
 >
   {#snippet buttons()}
     {#if people.length > 0}
-      <div class="flex gap-2 items-center justify-center">
+      <div class="flex items-center justify-center gap-2">
         <div class="hidden sm:block">
-          <div class="w-40 lg:w-80 h-10">
+          <div class="h-10 w-40 lg:w-80">
             <SearchPeople
               bind:this={searchPeopleElement}
               type="searchBar"
@@ -344,7 +344,7 @@
     <PeopleInfiniteScroll people={showPeople} hasNextPage={!!nextPage && !searchName} {loadNextPage}>
       {#snippet children({ person })}
         <div
-          class="p-2 rounded-xl hover:bg-gray-200 border-2 hover:border-immich-primary/50 hover:shadow-sm dark:hover:bg-immich-dark-primary/20 hover:dark:border-immich-dark-primary/25 border-transparent transition-all"
+          class="rounded-xl border-2 border-transparent p-2 transition-all hover:border-immich-primary/50 hover:bg-gray-200 hover:shadow-sm hover:dark:border-immich-dark-primary/25 dark:hover:bg-immich-dark-primary/20"
         >
           <PeopleCard
             {person}
@@ -355,7 +355,7 @@
 
           <input
             type="text"
-            class=" bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 py-2 text-sm text-primary"
+            class="mt-2 w-full rounded-2xl border-gray-100 bg-white py-2 text-center text-sm text-primary placeholder-gray-400 dark:border-gray-900 dark:bg-immich-dark-gray"
             value={person.name}
             placeholder={$t('add_a_name')}
             use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
@@ -370,7 +370,7 @@
     <div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
       <div class="flex flex-col content-center items-center text-center">
         <Icon icon={mdiAccountOff} size="3.5em" />
-        <p class="mt-5 text-3xl font-medium max-w-lg line-clamp-2 overflow-hidden">
+        <p class="mt-5 line-clamp-2 max-w-lg overflow-hidden text-3xl font-medium">
           {$t(searchName ? 'search_no_people_named' : 'search_no_people', { values: { name: searchName } })}
         </p>
       </div>
@@ -381,7 +381,7 @@
 {#if selectHidden}
   <dialog
     transition:fly={{ y: innerHeight, duration: 150, easing: quintOut, opacity: 0 }}
-    class="fixed inset-0 h-full w-full max-w-none max-h-none bg-light"
+    class="fixed inset-0 size-full max-h-none max-w-none bg-light"
     aria-labelledby="manage-visibility-title"
     {@attach (dialog) => dialog.showModal()}
   >
diff --git a/web/src/routes/(user)/people/ManagePeopleVisibility.svelte b/web/src/routes/(user)/people/ManagePeopleVisibility.svelte
index 1a6e6a8307..2ae2a7fc8e 100644
--- a/web/src/routes/(user)/people/ManagePeopleVisibility.svelte
+++ b/web/src/routes/(user)/people/ManagePeopleVisibility.svelte
@@ -107,7 +107,7 @@
 
 <div class="h-full overflow-y-auto">
   <div
-    class="sticky top-0 z-1 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
+    class="sticky top-0 z-1 flex h-16 w-full items-center justify-between border-b bg-white p-1 md:p-8 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg"
   >
     <div class="flex items-center">
       <IconButton
@@ -118,7 +118,7 @@
         icon={mdiClose}
         onclick={onClose}
       />
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         <p id={titleId} class="ms-2">{$t('show_and_hide_people')}</p>
         <p class="text-sm text-gray-400 dark:text-gray-600">({totalPeopleCount.toLocaleString($locale)})</p>
       </div>
@@ -152,7 +152,7 @@
         {@const hidden = overrides.get(person.id) ?? person.isHidden}
         <button
           type="button"
-          class="group relative w-full h-full"
+          class="group relative size-full"
           onclick={() => setHiddenOverride(person, !hidden)}
           aria-pressed={hidden}
           aria-label={person.name ? $t('hide_named_person', { values: { name: person.name } }) : $t('hide_person')}
@@ -167,7 +167,7 @@
             preload={false}
           />
           {#if person.name}
-            <span class="absolute bottom-2 start-0 w-full select-text px-1 text-center font-medium text-white">
+            <span class="absolute inset-s-0 bottom-2 w-full px-1 text-center font-medium text-white select-text">
               {person.name}
             </span>
           {/if}
diff --git a/web/src/routes/(user)/people/PeopleCard.svelte b/web/src/routes/(user)/people/PeopleCard.svelte
index a9c81c7760..6ce353e190 100644
--- a/web/src/routes/(user)/people/PeopleCard.svelte
+++ b/web/src/routes/(user)/people/PeopleCard.svelte
@@ -46,7 +46,7 @@
     draggable="false"
     onfocus={() => (showVerticalDots = true)}
   >
-    <div class="w-full h-full rounded-xl brightness-95 filter">
+    <div class="size-full rounded-xl brightness-95 filter">
       <ImageThumbnail
         shadow
         url={getPeopleThumbnailUrl(person)}
@@ -57,7 +57,7 @@
         preload={false}
       />
       {#if person.isFavorite}
-        <div class="absolute top-4 start-4">
+        <div class="absolute inset-s-4 top-4">
           <Icon icon={mdiHeart} size="24" class="text-white" />
         </div>
       {/if}
@@ -65,7 +65,7 @@
   </a>
 
   {#if showVerticalDots}
-    <div class="absolute top-2 end-2 z-1">
+    <div class="absolute inset-e-2 top-2 z-1">
       <ButtonContextMenu
         buttonClass="icon-white-drop-shadow"
         color="secondary"
diff --git a/web/src/routes/(user)/people/PeopleInfiniteScroll.svelte b/web/src/routes/(user)/people/PeopleInfiniteScroll.svelte
index 173ca69cc1..54182018c4 100644
--- a/web/src/routes/(user)/people/PeopleInfiniteScroll.svelte
+++ b/web/src/routes/(user)/people/PeopleInfiniteScroll.svelte
@@ -27,7 +27,7 @@
   });
 </script>
 
-<div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-10 gap-1">
+<div class="grid w-full grid-cols-2 gap-1 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-10">
   {#each people as person, index (person.id)}
     {#if hasNextPage && index === people.length - 1}
       <div bind:this={lastPersonContainer}>
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 7f0665fa6e..1b12dfdedf 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
@@ -332,7 +332,7 @@
 />
 
 <main
-  class="relative z-0 h-dvh overflow-hidden px-2 md:px-6 md:pt-(--navbar-height-md) pt-(--navbar-height)"
+  class="relative z-0 h-dvh overflow-hidden px-2 pt-(--navbar-height) md:px-6 md:pt-(--navbar-height-md)"
   use:scrollMemoryClearer={{
     routeStartsWith: Route.people(),
     beforeClear: () => {
@@ -355,14 +355,14 @@
       {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
         <!-- Person information block -->
         <div
-          class="relative w-fit p-4 sm:px-6 pt-12"
+          class="relative w-fit p-4 pt-12 sm:px-6"
           use:clickOutside={{
             onOutclick: handleCancelEditName,
             onEscape: handleCancelEditName,
           }}
           use:listNavigation={suggestionContainer}
         >
-          <section class="flex w-64 sm:w-96 place-items-center border-black">
+          <section class="flex w-64 place-items-center border-black sm:w-96">
             {#if isEditingName}
               <EditNameInput
                 {person}
@@ -388,8 +388,8 @@
                     widthStyle="3.375rem"
                     heightStyle="3.375rem"
                   />
-                  <div class="flex flex-col justify-center text-start px-4 text-primary">
-                    <p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
+                  <div class="flex flex-col justify-center px-4 text-start text-primary">
+                    <p class="w-40 truncate font-medium sm:w-72">{person.name || $t('add_a_name')}</p>
                     <p class="text-sm text-gray-500 dark:text-gray-400">
                       {$t('assets_count', { values: { count: numberOfAssets } })}
                     </p>
@@ -415,10 +415,10 @@
             {/if}
           </section>
           {#if isEditingName}
-            <div class="absolute w-64 sm:w-96 z-1">
+            <div class="absolute z-1 w-64 sm:w-96">
               {#if isSearchingPeople}
                 <div
-                  class="flex border h-14 rounded-b-lg border-gray-400 dark:border-immich-dark-gray place-items-center bg-gray-200 p-2 dark:bg-gray-700"
+                  class="flex h-14 place-items-center rounded-b-lg border border-gray-400 bg-gray-200 p-2 dark:border-immich-dark-gray dark:bg-gray-700"
                 >
                   <div class="flex w-full place-items-center">
                     <LoadingSpinner />
@@ -429,7 +429,7 @@
                   {#each suggestedPeople as person, index (person.id)}
                     <button
                       type="button"
-                      class="flex w-full border border-gray-200 dark:border-immich-dark-gray h-14 place-items-center bg-gray-100 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
+                      class="flex h-14 w-full place-items-center border border-gray-200 bg-gray-100 p-2 hover:bg-gray-300 focus:bg-gray-300 dark:border-immich-dark-gray dark:bg-gray-700 hover:dark:bg-[#232932] focus:dark:bg-[#232932] {index ===
                       suggestedPeople.length - 1
                         ? 'rounded-b-lg border-b'
                         : ''}"
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
index a51debcc03..e5a64ac0a0 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
@@ -30,9 +30,9 @@
 </script>
 
 <div
-  class="flex w-full h-14 place-items-center {suggestedPeople.length > 0
+  class="flex h-14 w-full place-items-center {suggestedPeople.length > 0
     ? 'rounded-t-lg dark:border-immich-dark-gray'
-    : 'rounded-lg'}  bg-gray-100 p-2 dark:bg-gray-700 border border-gray-200 dark:border-immich-dark-gray"
+    : 'rounded-lg'} border border-gray-200 bg-gray-100 p-2 dark:border-immich-dark-gray dark:bg-gray-700"
 >
   <ImageThumbnail circle shadow url={thumbnailData} altText={person.name} widthStyle="2rem" heightStyle="2rem" />
   <form class="ms-4 flex w-full justify-between gap-16" autocomplete="off" {onsubmit}>
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
index f3ec5d9d51..4a594ddce1 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
@@ -33,7 +33,7 @@
   style:height={thumbnailSize ? thumbnailSize + 'px' : '100%'}
 >
   <div
-    class="h-full w-full border-2 brightness-90 filter"
+    class="size-full border-2 brightness-90 filter"
     class:rounded-full={circle}
     class:rounded-lg={!circle}
     class:border-transparent={!border}
@@ -44,7 +44,7 @@
   </div>
 
   <div
-    class="absolute start-0 top-0 h-full w-full bg-immich-primary/30 opacity-0"
+    class="absolute inset-s-0 top-0 size-full bg-immich-primary/30 opacity-0"
     class:hover:opacity-100={selectable}
     class:rounded-full={circle}
     class:rounded-lg={!circle}
@@ -52,7 +52,7 @@
 
   {#if selected}
     <div
-      class="absolute start-0 top-0 h-full w-full bg-blue-500/80"
+      class="absolute inset-s-0 top-0 size-full bg-blue-500/80"
       class:rounded-full={circle}
       class:rounded-lg={!circle}
     ></div>
@@ -60,7 +60,7 @@
 
   {#if person.name}
     <span
-      class="w-100 text-white-shadow absolute bottom-2 start-0 w-full text-ellipsis px-1 text-center font-medium text-white hover:cursor-pointer"
+      class="text-white-shadow absolute inset-s-0 bottom-2 w-full px-1 text-center font-medium text-ellipsis text-white hover:cursor-pointer"
     >
       {person.name}
     </span>
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
index 8539d7955f..2fac6d0d11 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
@@ -84,7 +84,7 @@
 
 <section
   transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-  class="absolute start-0 top-0 h-full w-full bg-light"
+  class="absolute inset-s-0 top-0 size-full bg-light"
 >
   <ControlAppBar onClose={onBack}>
     {#snippet leading()}
@@ -115,7 +115,7 @@
 
           {#if hasSelection}
             <div class="relative h-full">
-              <div class="flex flex-col h-full justify-between">
+              <div class="flex h-full flex-col justify-between">
                 <div class="flex h-full items-center justify-center">
                   <Icon icon={mdiCallMerge} size="48" class="rotate-90 dark:text-white" />
                 </div>
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
index f884544647..a7615b7033 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
@@ -26,7 +26,7 @@
   );
 </script>
 
-<div class="w-40 sm:w-48 md:w-full h-14 flex gap-4 place-items-center">
+<div class="flex h-14 w-40 place-items-center gap-4 sm:w-48 md:w-full">
   <div class="md:w-96">
     <SearchPeople type="searchBar" placeholder={$t('search_people')} bind:searchName={name} bind:searchedPeopleLocal />
   </div>
@@ -47,7 +47,7 @@
 </div>
 
 <div
-  class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray mt-6"
+  class="mt-6 overflow-y-auto rounded-3xl bg-gray-200 p-10 immich-scrollbar dark:bg-immich-dark-gray"
   style:max-height={screenHeight - 400 + 'px'}
 >
   <div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
index 4296ed7e5f..67a5114adb 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
@@ -112,7 +112,7 @@
 
 <section
   transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-  class="absolute start-0 top-0 h-full w-full bg-light"
+  class="absolute inset-s-0 top-0 size-full bg-light"
 >
   <ControlAppBar {onClose}>
     {#snippet leading()}
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 29d6887999..44c1ac4e65 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -106,7 +106,7 @@
       <ImageCarousel {items} />
     {/if}
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} class="mt-10 mx-auto" />
+      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} class="mx-auto mt-10" />
     {/snippet}
   </Timeline>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/places/PlacesCardGroup.svelte b/web/src/routes/(user)/places/PlacesCardGroup.svelte
index c50f2a0441..a8d8bced28 100644
--- a/web/src/routes/(user)/places/PlacesCardGroup.svelte
+++ b/web/src/routes/(user)/places/PlacesCardGroup.svelte
@@ -24,11 +24,11 @@
     <button
       type="button"
       onclick={() => togglePlacesGroupCollapsing(group.id)}
-      class="w-fit mt-2 pt-2 pe-2 mb-2 dark:text-immich-dark-fg"
+      class="my-2 w-fit pe-2 pt-2 dark:text-immich-dark-fg"
       aria-expanded={!isCollapsed}
     >
-      <Icon icon={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" />
-      <span class="font-bold text-3xl text-black dark:text-white">{group.name}</span>
+      <Icon icon={mdiChevronRight} size="24" class="-mt-2.5 inline-block transition-all duration-250 {iconRotation}" />
+      <span class="text-3xl font-bold text-black dark:text-white">{group.name}</span>
       <span class="ms-1.5">({$t('places_count', { values: { count: places.length } })})</span>
     </button>
     <hr class="dark:border-immich-dark-gray" />
@@ -47,12 +47,12 @@
             <img
               src={getAssetMediaUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
               alt={city}
-              class="object-cover w-39 h-39"
+              class="size-39 object-cover"
               loading="lazy"
             />
           </div>
           <span
-            class="absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
+            class="absolute bottom-2 w-full px-1 text-center text-sm font-medium text-ellipsis text-white capitalize backdrop-blur-[1px] hover:cursor-pointer"
           >
             {city}
           </span>
diff --git a/web/src/routes/(user)/places/PlacesControls.svelte b/web/src/routes/(user)/places/PlacesControls.svelte
index 2094661c11..ae1308fdd3 100644
--- a/web/src/routes/(user)/places/PlacesControls.svelte
+++ b/web/src/routes/(user)/places/PlacesControls.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <!-- Search Places -->
-<div class="hidden md:block h-10 xl:w-60 2xl:w-80">
+<div class="hidden h-10 md:block xl:w-60 2xl:w-80">
   <SearchBar placeholder={$t('search_places')} bind:name={searchQuery} showLoadingSpinner={false} />
 </div>
 
@@ -65,7 +65,7 @@
 {#if getSelectedPlacesGroupOption($placesViewSettings) !== PlacesGroupBy.None}
   <span in:fly={{ x: -50, duration: 250 }}>
     <!-- Expand Countries Groups -->
-    <div class="hidden xl:flex gap-0">
+    <div class="hidden gap-0 xl:flex">
       <div class="block">
         <IconButton
           title={$t('expand_all')}
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index e0df412eb5..488d699368 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -243,20 +243,20 @@
 {#if terms}
   <section
     id="search-chips"
-    class="mt-24 text-center w-full flex gap-5 place-content-center place-items-center flex-wrap px-24"
+    class="mt-24 flex w-full flex-wrap place-content-center place-items-center gap-5 px-24 text-center"
   >
     {#each getObjectKeys(terms) as searchKey (searchKey)}
       {@const value = terms[searchKey]}
       <div class="flex place-content-center place-items-center items-stretch text-xs">
         <div
-          class="flex items-center justify-center bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
+          class="flex items-center justify-center bg-immich-primary px-4 py-2 text-white dark:bg-immich-dark-primary dark:text-black
           {value === true ? 'rounded-full' : 'rounded-s-full'}"
         >
           {getHumanReadableSearchKey(searchKey as keyof SearchTerms)}
         </div>
 
         {#if value !== true}
-          <div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
+          <div class="rounded-e-full bg-gray-300 px-4 py-2 dark:bg-gray-800 dark:text-white">
             {#if (searchKey === 'takenAfter' || searchKey === 'takenBefore') && typeof value === 'string'}
               {getHumanReadableDate(value)}
             {:else if searchKey === 'personIds' && Array.isArray(value)}
@@ -282,7 +282,7 @@
 {/if}
 
 <section
-  class="mb-12 bg-immich-bg dark:bg-immich-dark-bg m-4 max-h-screen"
+  class="m-4 mb-12 max-h-screen bg-immich-bg dark:bg-immich-dark-bg"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
   bind:this={searchResultsElement}
@@ -309,7 +309,7 @@
     {/if}
 
     {#if isLoading}
-      <div class="flex justify-center py-16 items-center">
+      <div class="flex items-center justify-center py-16">
         <LoadingSpinner size="giant" />
       </div>
     {/if}
@@ -317,7 +317,7 @@
 
   <section>
     {#if assetMultiSelectManager.selectionActive}
-      <div class="fixed top-0 start-0 w-full z-2">
+      <div class="fixed inset-s-0 top-0 z-2 w-full">
         <AssetSelectControlBar>
           {@const Actions = getAssetBulkActions($t)}
           <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
@@ -368,7 +368,7 @@
         </AssetSelectControlBar>
       </div>
     {:else}
-      <div class="fixed top-0 start-0 w-full z-2">
+      <div class="fixed inset-s-0 top-0 z-2 w-full">
         <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
           <div class="absolute bg-light"></div>
           <div class="w-full flex-1 ps-4">
diff --git a/web/src/routes/(user)/shared-links/(list)/+layout.svelte b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
index b4196c9dee..aad22feac5 100644
--- a/web/src/routes/(user)/shared-links/(list)/+layout.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
@@ -71,7 +71,7 @@
 
 <UserPageLayout title={data.meta.title}>
   {#snippet buttons()}
-    <div class="hidden xl:block h-10">
+    <div class="hidden h-10 xl:block">
       <GroupTab
         label={$t('show_shared_links')}
         {filters}
@@ -85,7 +85,7 @@
   <Container center size="medium">
     {#if sharedLinks.length === 0}
       <div
-        class="flex place-content-center place-items-center rounded-lg bg-gray-100 dark:bg-immich-dark-gray dark:text-immich-gray p-12"
+        class="flex place-content-center place-items-center rounded-lg bg-gray-100 p-12 dark:bg-immich-dark-gray dark:text-immich-gray"
       >
         <p>{$t('you_dont_have_any_shared_links')}</p>
       </div>
diff --git a/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
index 1e190909de..40a4af2b3b 100644
--- a/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
@@ -15,7 +15,7 @@
   let { sharedLink, preload = false, class: className = '' }: Props = $props();
 </script>
 
-<div class="relative shrink-0 size-22">
+<div class="relative size-22 shrink-0">
   {#if sharedLink?.album}
     <AlbumCover album={sharedLink.album} class={className} {preload} />
   {:else if sharedLink.assets[0]}
diff --git a/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte b/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
index e6618146cc..4c2b759e49 100644
--- a/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
@@ -61,11 +61,11 @@
   <svelte:element
     this={isExpired ? 'div' : 'a'}
     href={isExpired ? undefined : Route.viewSharedLink(sharedLink)}
-    class="flex gap-4 w-full py-4"
+    class="flex w-full gap-4 py-4"
   >
     <ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />
 
-    <div class="flex flex-col gap-4 justify-between">
+    <div class="flex flex-col justify-between gap-4">
       <div class="flex flex-col">
         <Text size="tiny" color={isExpired ? 'danger' : 'muted'} fontWeight="medium">
           {#if isExpired}
@@ -102,8 +102,8 @@
       </div>
     </div>
   </svelte:element>
-  <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
-    <div class="sm:flex hidden">
+  <div class="ms-4 flex flex-auto flex-col place-content-center place-items-end text-end">
+    <div class="hidden sm:flex">
       <ActionButton action={Edit} />
       <ActionButton action={Copy} />
       <ActionButton action={Delete} />
diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
index 855db69618..458a1e60dc 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -41,7 +41,7 @@
 <UserPageLayout title={data.meta.title} actions={[CreateAlbum, ViewSharedLinks]}>
   <div class="flex flex-col">
     {#if data.partners.length > 0}
-      <div class="mb-6 mt-2">
+      <div class="mt-2 mb-6">
         <div>
           <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('partners')}</p>
         </div>
@@ -69,7 +69,7 @@
       <hr class="mb-4 dark:border-immich-dark-gray" />
     {/if}
 
-    <div class="mb-6 mt-2">
+    <div class="mt-2 mb-6">
       <div>
         <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('albums')}</p>
       </div>
@@ -79,7 +79,7 @@
         <Albums sharedAlbums={data.sharedAlbums} userSettings={settings} showOwner>
           <!-- Empty List -->
           {#snippet empty()}
-            <EmptyPlaceholder text={$t('no_shared_albums_message')} src={empty2Url} class="mt-10 mx-auto" />
+            <EmptyPlaceholder text={$t('no_shared_albums_message')} src={empty2Url} class="mx-auto mt-10" />
           {/snippet}
         </Albums>
       </div>
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 554a7b82e5..d36356f991 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -81,7 +81,7 @@
     <Sidebar>
       <SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} breakpoint="md" />
       <section>
-        <Text class="ps-4 mb-4" size="small">{$t('explorer')}</Text>
+        <Text class="mb-4 ps-4" size="small">{$t('explorer')}</Text>
         <div class="h-full">
           <TreeItems icons={{ default: mdiTag, active: mdiTag }} {tree} active={tag.path} {getLink} />
         </div>
@@ -112,7 +112,7 @@
 
 <section>
   {#if assetMultiSelectManager.selectionActive}
-    <div class="fixed top-0 start-0 w-full">
+    <div class="fixed inset-s-0 top-0 w-full">
       <AssetSelectControlBar>
         {@const Actions = getAssetBulkActions($t)}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 3ca197c755..27b9eeea61 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -55,13 +55,13 @@
       assetInteraction={assetMultiSelectManager}
       onEscape={handleEscape}
     >
-      <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
+      <p class="p-4 font-medium text-gray-500/60 dark:text-gray-300/60">
         {$t('trashed_items_will_be_permanently_deleted_after', {
           values: { days: serverConfigManager.value.trashDays },
         })}
       </p>
       {#snippet empty()}
-        <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} class="mt-10 mx-auto" />
+        <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} class="mx-auto mt-10" />
       {/snippet}
     </Timeline>
   </UserPageLayout>
diff --git a/web/src/routes/(user)/user-settings/AppSettings.svelte b/web/src/routes/(user)/user-settings/AppSettings.svelte
index 91049b5ea5..ddfac02bfc 100644
--- a/web/src/routes/(user)/user-settings/AppSettings.svelte
+++ b/web/src/routes/(user)/user-settings/AppSettings.svelte
@@ -63,7 +63,7 @@
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex flex-col gap-6">
+    <div class="flex flex-col gap-6 sm:ms-8">
       <Field label={$t('theme_selection')} description={$t('theme_selection_description')}>
         <Switch
           checked={themeManager.preference === ThemePreference.System}
diff --git a/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte b/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
index 2579862056..3ad6cc241a 100644
--- a/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
+++ b/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
@@ -23,7 +23,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-8 flex flex-col gap-4">
+      <div class="flex flex-col gap-4 sm:ms-8">
         <Field label={$t('password')} required>
           <PasswordInput bind:value={password} autocomplete="current-password" />
         </Field>
diff --git a/web/src/routes/(user)/user-settings/DeviceList.svelte b/web/src/routes/(user)/user-settings/DeviceList.svelte
index 738ef617bd..576949ac38 100644
--- a/web/src/routes/(user)/user-settings/DeviceList.svelte
+++ b/web/src/routes/(user)/user-settings/DeviceList.svelte
@@ -52,7 +52,7 @@
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex flex-col gap-4">
+    <div class="flex flex-col gap-4 sm:ms-8">
       {#if currentSession}
         <div class="mb-6">
           <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
diff --git a/web/src/routes/(user)/user-settings/DownloadSettings.svelte b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
index 2cad63ca11..f201991ef1 100644
--- a/web/src/routes/(user)/user-settings/DownloadSettings.svelte
+++ b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
@@ -40,7 +40,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-8 flex flex-col gap-4">
+      <div class="flex flex-col gap-4 sm:ms-8">
         <SettingInputField
           inputType={SettingInputFieldType.NUMBER}
           label={$t('archive_size')}
diff --git a/web/src/routes/(user)/user-settings/FeatureSettings.svelte b/web/src/routes/(user)/user-settings/FeatureSettings.svelte
index c35029d61d..219552cbd2 100644
--- a/web/src/routes/(user)/user-settings/FeatureSettings.svelte
+++ b/web/src/routes/(user)/user-settings/FeatureSettings.svelte
@@ -66,9 +66,9 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-4 md:ms-8 flex flex-col">
+      <div class="flex flex-col sm:ms-4 md:ms-8">
         <SettingAccordion key="albums" title={$t('albums')} subtitle={$t('albums_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('albums_default_sort_order')} description={$t('albums_default_sort_order_description')}>
               <Select
                 options={[
@@ -82,7 +82,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={foldersEnabled} />
             </Field>
@@ -96,7 +96,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="memories" title={$t('time_based_memories')} subtitle={$t('photos_from_previous_years')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={memoriesEnabled} />
             </Field>
@@ -108,7 +108,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="people" title={$t('people')} subtitle={$t('people_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={peopleEnabled} />
             </Field>
@@ -122,7 +122,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="rating" title={$t('rating')} subtitle={$t('rating_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={ratingsEnabled} />
             </Field>
@@ -130,7 +130,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="shared-links" title={$t('shared_links')} subtitle={$t('shared_links_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={sharedLinksEnabled} />
             </Field>
@@ -144,7 +144,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={tagsEnabled} />
             </Field>
@@ -158,14 +158,14 @@
         </SettingAccordion>
 
         <SettingAccordion key="cast" title={$t('cast')} subtitle={$t('cast_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="mt-4 flex flex-col gap-4 sm:ms-4">
             <Field label={$t('gcast_enabled')} description={$t('gcast_enabled_description')}>
               <Switch bind:checked={gCastEnabled} />
             </Field>
           </div>
         </SettingAccordion>
 
-        <div class="flex justify-end mt-4">
+        <div class="mt-4 flex justify-end">
           <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
         </div>
       </div>
diff --git a/web/src/routes/(user)/user-settings/NotificationsSettings.svelte b/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
index 11cfbfe2ee..f0ca1a6e42 100644
--- a/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
+++ b/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
@@ -39,7 +39,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-8 flex flex-col gap-6">
+      <div class="flex flex-col gap-6 sm:ms-8">
         <Field label={$t('enable')} description={$t('notification_toggle_setting_description')}>
           <Switch bind:checked={emailNotificationsEnabled} />
         </Field>
@@ -53,7 +53,7 @@
         </Field>
       </div>
 
-      <div class="flex justify-end mt-4">
+      <div class="mt-4 flex justify-end">
         <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
       </div>
     </form>
diff --git a/web/src/routes/(user)/user-settings/OauthSettings.svelte b/web/src/routes/(user)/user-settings/OauthSettings.svelte
index 2153ec287e..6e63ef38c7 100644
--- a/web/src/routes/(user)/user-settings/OauthSettings.svelte
+++ b/web/src/routes/(user)/user-settings/OauthSettings.svelte
@@ -41,7 +41,7 @@
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex justify-end">
+    <div class="flex justify-end sm:ms-8">
       {#if loading}
         <div class="flex place-content-center place-items-center">
           <LoadingSpinner />
diff --git a/web/src/routes/(user)/user-settings/PartnerSettings.svelte b/web/src/routes/(user)/user-settings/PartnerSettings.svelte
index ac485678d7..af1eff38bf 100644
--- a/web/src/routes/(user)/user-settings/PartnerSettings.svelte
+++ b/web/src/routes/(user)/user-settings/PartnerSettings.svelte
@@ -120,8 +120,8 @@
 <section class="my-4">
   {#if partners.length > 0}
     {#each partners as partner (partner.user.id)}
-      <div class="rounded-2xl border border-gray-200 dark:border-gray-800 mt-6 bg-slate-50 dark:bg-gray-900 p-5">
-        <div class="flex gap-4 rounded-lg pb-4 transition-all justify-between">
+      <div class="mt-6 rounded-2xl border border-gray-200 bg-slate-50 p-5 dark:border-gray-800 dark:bg-gray-900">
+        <div class="flex justify-between gap-4 rounded-lg pb-4 transition-all">
           <div class="flex gap-4">
             <UserAvatar user={partner.user} size="md" />
             <div class="text-start">
@@ -147,7 +147,7 @@
           {/if}
         </div>
 
-        <div class="dark:text-gray-200 text-immich-dark-gray">
+        <div class="text-immich-dark-gray dark:text-gray-200">
           <!-- I am sharing my assets with this user -->
           {#if partner.sharedByMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
@@ -158,11 +158,11 @@
               >{$t('partner_can_access', { values: { partner: partner.user.name } })}</Text
             >
             <ul class="text-sm">
-              <li class="flex gap-2 place-items-center py-1 mt-2">
+              <li class="mt-2 flex place-items-center gap-2 py-1">
                 <Icon icon={mdiCheck} />
                 {$t('partner_can_access_assets')}
               </li>
-              <li class="flex gap-2 place-items-center py-1">
+              <li class="flex place-items-center gap-2 py-1">
                 <Icon icon={mdiCheck} />
                 {$t('partner_can_access_location')}
               </li>
@@ -188,7 +188,7 @@
     {/each}
   {/if}
 
-  <div class="flex justify-end mt-5">
+  <div class="mt-5 flex justify-end">
     <Button shape="round" size="small" onclick={() => handleCreatePartners()}>{$t('add_partner')}</Button>
   </div>
 </section>
diff --git a/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte b/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte
index afab0c6819..fbe292782c 100644
--- a/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte
+++ b/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <form autocomplete="off" onsubmit={handleSubmit}>
-  <div class="flex flex-col gap-6 place-items-center place-content-center">
+  <div class="flex flex-col place-content-center place-items-center gap-6">
     <Heading>{$t('change_pin_code')}</Heading>
     <Field label={$t('current_pin_code')}>
       <PinInput bind:value={currentPinCode} />
@@ -53,7 +53,7 @@
     </button>
   </div>
 
-  <div class="flex justify-end gap-2 mt-4">
+  <div class="mt-4 flex justify-end gap-2">
     <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
       {$t('clear')}
     </Button>
diff --git a/web/src/routes/(user)/user-settings/SettingCombobox.svelte b/web/src/routes/(user)/user-settings/SettingCombobox.svelte
index 1e7a3e74d6..ac9126208e 100644
--- a/web/src/routes/(user)/user-settings/SettingCombobox.svelte
+++ b/web/src/routes/(user)/user-settings/SettingCombobox.svelte
@@ -43,7 +43,7 @@
   </div>
 
   <Text size="small" color="muted">{subtitle}</Text>
-  <div class="flex items-center mt-2 max-w-[300px]">
+  <div class="mt-2 flex max-w-[300px] items-center">
     <Combobox label={title} hideLabel={true} {selectedOption} {options} placeholder={comboboxPlaceholder} {onSelect} />
     {@render children?.()}
   </div>
diff --git a/web/src/routes/(user)/user-settings/UserApiKeyList.svelte b/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
index b2b428c86e..441b01f9dd 100644
--- a/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
+++ b/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
@@ -33,7 +33,7 @@
 <OnEvents {onApiKeyCreate} {onApiKeyUpdate} {onApiKeyDelete} />
 
 <section class="my-4">
-  <div class="sm:ms-8 flex flex-col gap-2" in:fade={{ duration: 500 }}>
+  <div class="flex flex-col gap-2 sm:ms-8" in:fade={{ duration: 500 }}>
     <div class="mb-2 flex justify-end">
       <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}>
         {Create.title}
@@ -56,7 +56,7 @@
               <TableCell>{key.name}</TableCell>
               <TableCell>
                 <Text
-                  class="font-mono overflow-hidden line-clamp-3"
+                  class="line-clamp-3 overflow-hidden font-mono"
                   size="small"
                   title={JSON.stringify(key.permissions, null, 2)}>{key.permissions}</Text
                 >
diff --git a/web/src/routes/(user)/user-settings/UserProfileSettings.svelte b/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
index 5d089429cb..fba5bbf081 100644
--- a/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
+++ b/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
@@ -33,7 +33,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" onsubmit={preventDefault(bubble('submit'))}>
-      <div class="sm:ms-8 flex flex-col gap-4">
+      <div class="flex flex-col gap-4 sm:ms-8">
         <Field label={$t('user_id')} disabled>
           <Input bind:value={editedUser.id} />
         </Field>
diff --git a/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
index db2e2267e3..747a7bc3a5 100644
--- a/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
+++ b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
@@ -118,17 +118,17 @@
       <!-- PRODUCT KEY INFO CARD -->
       {#if isServerProduct}
         <div
-          class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4"
+          class="flex place-content-center gap-4 rounded-xl border border-immich-dark-primary/20 bg-gray-50 p-6 pe-12 dark:bg-immich-dark-primary/15"
         >
           <Icon icon={mdiKey} size="56" class="text-primary" />
 
           <div>
-            <p class="text-primary font-semibold text-lg">
+            <p class="text-lg font-semibold text-primary">
               {$t('purchase_server_title')}
             </p>
 
             {#if authManager.user.isAdmin && serverPurchaseInfo?.activatedAt}
-              <p class="dark:text-white text-sm mt-1 col-start-2">
+              <p class="col-start-2 mt-1 text-sm dark:text-white">
                 {$t('purchase_activated_time', {
                   values: {
                     date: new Date(serverPurchaseInfo.activatedAt).toLocaleString($locale, dateFormats.settings),
@@ -142,7 +142,7 @@
         </div>
 
         {#if authManager.user.isAdmin}
-          <div class="text-right mt-4">
+          <div class="mt-4 text-right">
             <Button shape="round" size="small" color="danger" onclick={removeServerProductKey}
               >{$t('purchase_button_remove_key')}</Button
             >
@@ -150,16 +150,16 @@
         {/if}
       {:else}
         <div
-          class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4"
+          class="flex place-content-center gap-4 rounded-xl border border-immich-dark-primary/20 bg-gray-50 p-6 pe-12 dark:bg-immich-dark-primary/15"
         >
           <Icon icon={mdiKey} size="56" class="text-primary" />
 
           <div>
-            <p class="text-primary font-semibold text-lg">
+            <p class="text-lg font-semibold text-primary">
               {$t('purchase_individual_title')}
             </p>
             {#if authManager.user.license?.activatedAt}
-              <p class="dark:text-white text-sm mt-1 col-start-2">
+              <p class="col-start-2 mt-1 text-sm dark:text-white">
                 {$t('purchase_activated_time', {
                   values: {
                     date: new Date(authManager.user.license?.activatedAt).toLocaleString($locale, dateFormats.settings),
@@ -170,7 +170,7 @@
           </div>
         </div>
 
-        <div class="text-right mt-4">
+        <div class="mt-4 text-right">
           <Button shape="round" size="small" color="danger" onclick={removeIndividualProductKey}
             >{$t('purchase_button_remove_key')}</Button
           >
diff --git a/web/src/routes/(user)/utilities/+page.svelte b/web/src/routes/(user)/utilities/+page.svelte
index 500ab35bf9..a1cc50cb41 100644
--- a/web/src/routes/(user)/utilities/+page.svelte
+++ b/web/src/routes/(user)/utilities/+page.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <UserPageLayout title={data.meta.title}>
-  <div class="w-full max-w-xl m-auto">
+  <div class="m-auto w-full max-w-xl">
     <div class="mt-5">
       <UtilitiesMenu />
     </div>
diff --git a/web/src/routes/(user)/utilities/UtilitiesMenu.svelte b/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
index 10028c2c92..19f1899672 100644
--- a/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
+++ b/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
@@ -20,24 +20,24 @@
   ];
 </script>
 
-<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+<div class="rounded-3xl border border-gray-300 pt-1 pb-6 dark:border-immich-dark-gray dark:text-white">
   <Text size="tiny" color="muted" fontWeight="medium" class="p-4">{$t('organize_your_library')}</Text>
 
   {#each links as link (link.href)}
-    <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
+    <a href={link.href} class="flex w-full items-center gap-4 p-4 hover:bg-gray-100 dark:hover:bg-immich-dark-gray">
       <span><Icon icon={link.icon} class="text-primary" size="24" /> </span>
       {link.label}
     </a>
   {/each}
 </div>
 <br />
-<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+<div class="rounded-3xl border border-gray-300 pt-1 pb-6 dark:border-immich-dark-gray dark:text-white">
   <Text size="tiny" color="muted" fontWeight="medium" class="p-4">{$t('download')}</Text>
 
   <button
     type="button"
     onclick={() => modalManager.show(ObtainiumConfigModal, {})}
-    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+    class="flex w-full items-center gap-4 p-4 hover:bg-gray-100 dark:hover:bg-immich-dark-gray"
   >
     <span>
       <Icon icon={mdiLinkEdit} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
@@ -47,7 +47,7 @@
   <button
     type="button"
     onclick={() => modalManager.show(AppDownloadModal, {})}
-    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+    class="flex w-full items-center gap-4 p-4 hover:bg-gray-100 dark:hover:bg-immich-dark-gray"
   >
     <span>
       <Icon icon={mdiCellphoneArrowDownVariant} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 6edc42009f..f31af90f32 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -265,14 +265,14 @@
             handleResolve(duplicates[duplicatesIndex].duplicateId, duplicateAssetIds, trashIds)}
           onStack={(assets) => handleStack(duplicates[duplicatesIndex].duplicateId, assets)}
         />
-        <div class="max-w-5xl mx-auto mb-16">
-          <div class="flex mb-4 sm:px-6 w-full place-content-center justify-between items-center place-items-center">
+        <div class="mx-auto mb-16 max-w-5xl">
+          <div class="mb-4 flex w-full place-content-center place-items-center items-center justify-between sm:px-6">
             <div class="flex text-xs text-black">
               <Button
                 size="small"
                 leadingIcon={mdiPageFirst}
                 color="primary"
-                class="flex place-items-center rounded-s-full gap-2 px-2 sm:px-4"
+                class="flex place-items-center gap-2 rounded-s-full px-2 sm:px-4"
                 onclick={handleFirst}
                 disabled={duplicatesIndex === 0}
               >
@@ -282,14 +282,14 @@
                 size="small"
                 leadingIcon={mdiChevronLeft}
                 color="primary"
-                class="flex place-items-center rounded-e-full gap-2 px-2 sm:px-4"
+                class="flex place-items-center gap-2 rounded-e-full px-2 sm:px-4"
                 onclick={handlePrevious}
                 disabled={duplicatesIndex === 0}
               >
                 {$t('previous')}
               </Button>
             </div>
-            <p class="border px-3 md:px-6 py-1 dark:bg-subtle rounded-lg text-xs md:text-sm">
+            <p class="rounded-lg border px-3 py-1 text-xs md:px-6 md:text-sm dark:bg-subtle">
               {duplicatesIndex + 1} / {duplicates.length.toLocaleString($locale)}
             </p>
             <div class="flex text-xs text-black">
@@ -297,7 +297,7 @@
                 size="small"
                 trailingIcon={mdiChevronRight}
                 color="primary"
-                class="flex place-items-center rounded-s-full gap-2 px-2 sm:px-4"
+                class="flex place-items-center gap-2 rounded-s-full px-2 sm:px-4"
                 onclick={handleNext}
                 disabled={duplicatesIndex === duplicates.length - 1}
               >
@@ -307,7 +307,7 @@
                 size="small"
                 trailingIcon={mdiPageLast}
                 color="primary"
-                class="flex place-items-center rounded-e-full gap-2 px-2 sm:px-4"
+                class="flex place-items-center gap-2 rounded-e-full px-2 sm:px-4"
                 onclick={handleLast}
                 disabled={duplicatesIndex === duplicates.length - 1}
               >
@@ -318,7 +318,7 @@
         </div>
       {/key}
     {:else}
-      <p class="text-center text-lg dark:text-white flex place-items-center place-content-center">
+      <p class="flex place-content-center place-items-center text-center text-lg dark:text-white">
         {$t('no_duplicates_found')}
       </p>
     {/if}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
index 68be58e0ae..e3662fd369 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
@@ -100,12 +100,12 @@
   }
 </script>
 
-<div class="min-w-60 transition-colors border rounded-lg flex-1">
+<div class="min-w-60 flex-1 rounded-lg border transition-colors">
   <div class="relative w-full">
     <button
       type="button"
       onclick={() => onSelectAsset(asset)}
-      class="block relative w-full"
+      class="relative block w-full"
       aria-pressed={isSelected}
       aria-label={$t('keep')}
     >
@@ -113,20 +113,20 @@
       <img
         src={getAssetMediaUrl({ id: asset.id })}
         alt={$getAltText(toTimelineAsset(asset))}
-        class="h-60 object-cover w-full rounded-t-md"
+        class="h-60 w-full rounded-t-md object-cover"
         draggable="false"
       />
 
       <!-- FAVORITE ICON -->
       {#if asset.isFavorite}
-        <div class="absolute bottom-2 start-2">
+        <div class="absolute inset-s-2 bottom-2">
           <Icon icon={mdiHeart} size="24" class="text-white" />
         </div>
       {/if}
 
       <!-- OVERLAY CHIP -->
       <div
-        class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors {isSelected
+        class="absolute inset-e-3 bottom-1 rounded-xl px-4 py-1 text-xs transition-colors {isSelected
           ? 'bg-green-400/90'
           : 'bg-red-300/90'} text-black"
       >
@@ -134,14 +134,14 @@
       </div>
 
       <!-- EXTERNAL LIBRARY / STACK COUNT CHIP -->
-      <div class="absolute top-2 end-3">
+      <div class="absolute inset-e-3 top-2">
         {#if isFromExternalLibrary}
-          <div class="bg-immich-primary/90 px-2 py-1 rounded-xl text-xs text-white">
+          <div class="rounded-xl bg-immich-primary/90 px-2 py-1 text-xs text-white">
             {$t('external')}
           </div>
         {/if}
         {#if asset.stack?.assetCount}
-          <div class="bg-immich-primary/90 px-2 py-1 my-0.5 rounded-xl text-xs text-white">
+          <div class="my-0.5 rounded-xl bg-immich-primary/90 px-2 py-1 text-xs text-white">
             <div class="flex items-center justify-center">
               <div class="me-1">{asset.stack.assetCount}</div>
               <Icon icon={mdiImageMultipleOutline} size="18" />
@@ -154,7 +154,7 @@
     <button
       type="button"
       onclick={() => onViewAsset(asset)}
-      class="absolute rounded-full top-1 start-1 text-gray-200 p-2 hover:text-white bg-black/35 hover:bg-black/50"
+      class="absolute inset-s-1 top-1 rounded-full bg-black/35 p-2 text-gray-200 hover:bg-black/50 hover:text-white"
       title={$t('view')}
     >
       <Icon aria-label={$t('view')} icon={mdiMagnifyPlus} flipped size="18" />
@@ -162,7 +162,7 @@
   </div>
 
   <div
-    class="grid place-items-start gap-y-2 py-2 text-sm transition-colors rounded-b-lg {isSelected
+    class="grid place-items-start gap-y-2 rounded-b-lg py-2 text-sm transition-colors {isSelected
       ? 'bg-success/15 dark:bg-[#001a06]'
       : 'bg-transparent'}"
   >
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
index 6b44e7b085..d62d97dc8e 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
@@ -105,8 +105,8 @@
   ]}
 />
 
-<div class="rounded-3xl border dark:border-2 border-gray-300 dark:border-gray-700 max-w-256 mx-auto mb-4 py-6 px-0.2">
-  <div class="flex flex-wrap gap-y-6 mb-4 px-6 w-full place-content-end justify-between">
+<div class="px-0.2 mx-auto mb-4 max-w-5xl rounded-3xl border border-gray-300 py-6 dark:border-2 dark:border-gray-700">
+  <div class="mb-4 flex w-full flex-wrap place-content-end justify-between gap-y-6 px-6">
     <!-- MARK ALL BUTTONS -->
     <div class="flex text-xs text-black">
       <Button class="rounded-s-full" size="small" color="primary" leadingIcon={mdiCheck} onclick={onSelectAll}
@@ -128,7 +128,7 @@
           size="small"
           leadingIcon={mdiCheck}
           color="success"
-          class="flex place-items-center rounded-s-full gap-2"
+          class="flex place-items-center gap-2 rounded-s-full"
           onclick={handleResolve}
         >
           {$t('keep_all')}
@@ -158,7 +158,7 @@
   </div>
 
   <div class="overflow-x-auto p-2">
-    <div class="flex flex-nowrap gap-1 place-items-start justify-center min-w-full w-fit mx-auto">
+    <div class="mx-auto flex w-fit min-w-full flex-nowrap place-items-start justify-center gap-1">
       {#each assets as asset (asset.id)}
         <DuplicateAsset {assets} {asset} {onSelectAsset} isSelected={selectedAssetIds.has(asset.id)} {onViewAsset} />
       {/each}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
index 007dcfddc5..f7800ef40e 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
@@ -13,13 +13,13 @@
   let { icon, children, borderBottom = true, highlight = false, title }: Props = $props();
 </script>
 
-<div class="grid grid-cols-[25px_1fr] w-full px-1 py-0.5" class:border-b={borderBottom} {title}>
+<div class="grid w-full grid-cols-[25px_1fr] px-1 py-0.5" class:border-b={borderBottom} {title}>
   <Icon {icon} size="18" class="text-dark/25 {highlight ? 'text-primary/75' : ''}" />
-  <div class="justify-self-end text-end rounded px-1 transition-colors w-full overflow-hidden">
+  <div class="w-full justify-self-end overflow-hidden rounded-sm px-1 text-end transition-colors">
     <Text
       size="tiny"
       fontWeight={highlight ? 'semi-bold' : 'normal'}
-      class={`${highlight ? 'text-primary' : ''} text-ellipsis w-full overflow-hidden`}
+      class={`${highlight ? 'text-primary' : ''} w-full overflow-hidden text-ellipsis`}
     >
       {@render children?.()}
     </Text>
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index 93e710df7f..18287a7b13 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -134,16 +134,16 @@
 
 <UserPageLayout title={data.meta.title} scrollbar={true}>
   {#snippet buttons()}
-    <div class="flex gap-2 justify-end place-items-center">
-      <Text class="hidden md:block mr-4" size="tiny" color="muted">{$t('geolocation_instruction_location')}</Text>
-      <div class="border flex place-items-center place-content-center px-2 py-1 bg-primary/10 rounded-2xl">
-        <Text class="hidden md:inline-block font-mono mr-5 ml-2" color="muted" size="tiny">
+    <div class="flex place-items-center justify-end gap-2">
+      <Text class="mr-4 hidden md:block" size="tiny" color="muted">{$t('geolocation_instruction_location')}</Text>
+      <div class="flex place-content-center place-items-center rounded-2xl border bg-primary/10 px-2 py-1">
+        <Text class="mr-5 ml-2 hidden font-mono md:inline-block" color="muted" size="tiny">
           {$t('selected_gps_coordinates')}
         </Text>
         <Text
           title="latitude, longitude"
-          class="rounded-3xl font-mono text-sm text-primary px-2 py-1 transition-all duration-100 ease-in-out {locationUpdated
-            ? 'bg-primary/90 text-light font-semibold scale-105'
+          class="rounded-3xl px-2 py-1 font-mono text-sm text-primary transition-all duration-100 ease-in-out {locationUpdated
+            ? 'scale-105 bg-primary/90 font-semibold text-light'
             : ''}"
         >
           {#if point}
@@ -182,7 +182,7 @@
   {/snippet}
 
   {#if isLoading}
-    <div class="h-full w-full flex items-center justify-center">
+    <div class="flex size-full items-center justify-center">
       <LoadingSpinner size="giant" />
     </div>
   {/if}
@@ -200,17 +200,17 @@
   >
     {#snippet customThumbnailLayout(asset: TimelineAsset)}
       {#if hasGps(asset)}
-        <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
+        <div class="absolute inset-e-3 bottom-1 rounded-xl bg-success px-4 py-1 text-xs text-black transition-colors">
           {asset.city || $t('gps')}
         </div>
       {:else}
-        <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-danger text-light">
+        <div class="absolute inset-e-3 bottom-1 rounded-xl bg-danger px-4 py-1 text-xs text-light transition-colors">
           {$t('gps_missing')}
         </div>
       {/if}
     {/snippet}
     {#snippet empty()}
-      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} class="mt-10 mx-auto" />
+      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} class="mx-auto mt-10" />
     {/snippet}
   </Timeline>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
index aed7570e9c..21ebd40f37 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -64,13 +64,13 @@
 <OnEvents {onAssetsDelete} />
 
 <UserPageLayout title={data.meta.title} scrollbar={true}>
-  <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+  <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
     {#if assets && assets.length > 0}
       {#each assets as asset (asset.id)}
         <LargeAssetData {asset} {onViewAsset} />
       {/each}
     {:else}
-      <p class="text-center text-lg dark:text-white flex place-items-center place-content-center">
+      <p class="flex place-content-center place-items-center text-center text-lg dark:text-white">
         {$t('no_assets_to_show')}
       </p>
     {/if}
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
index d151788c44..74c36c1850 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
@@ -17,21 +17,21 @@
 </script>
 
 <div
-  class="w-full aspect-square rounded-xl border-4 transition-colors font-semibold text-xs bg-gray-200 dark:bg-gray-800 border-gray-200 dark:border-gray-800"
+  class="aspect-square w-full rounded-xl border-4 border-gray-200 bg-gray-200 text-xs font-semibold transition-colors dark:border-gray-800 dark:bg-gray-800"
   bind:clientWidth={boxWidth}
   title={assetData}
 >
-  <div class="relative w-full h-full overflow-hidden rounded-lg">
+  <div class="relative size-full overflow-hidden rounded-lg">
     <Thumbnail asset={toTimelineAsset(asset)} readonly onClick={() => onViewAsset(asset)} thumbnailSize={boxWidth} />
 
     {#if !!asset.libraryId}
-      <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-red-500">External</div>
+      <div class="absolute inset-e-3 bottom-1 rounded-xl bg-red-500 px-4 py-1 text-xs transition-colors">External</div>
     {/if}
   </div>
-  <div class="text-center mt-4 px-4 text-sm font-normal truncate" title={asset.originalFileName}>
+  <div class="mt-4 truncate px-4 text-center text-sm font-normal" title={asset.originalFileName}>
     {asset.originalFileName}
   </div>
   <div class="text-center">
-    <p class="text-primary text-xl font-semibold py-3">{getFileSize(asset, 1)}</p>
+    <p class="py-3 text-xl font-semibold text-primary">{getFileSize(asset, 1)}</p>
   </div>
 </div>
diff --git a/web/src/routes/(user)/utilities/workflows/+page.svelte b/web/src/routes/(user)/utilities/workflows/+page.svelte
index 0d89431638..91f0ffdaec 100644
--- a/web/src/routes/(user)/utilities/workflows/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/+page.svelte
@@ -146,7 +146,7 @@
 <OnEvents {onWorkflowCreate} {onWorkflowUpdate} {onWorkflowDelete} />
 
 {#snippet chipItem(title: string)}
-  <span class="rounded-xl border border-gray-200/80 px-3 py-1.5 text-sm dark:border-gray-600 bg-light">
+  <span class="rounded-xl border border-gray-200/80 bg-light px-3 py-1.5 text-sm dark:border-gray-600">
     <span class="font-medium text-dark">{title}</span>
   </span>
 {/snippet}
@@ -160,14 +160,14 @@
           text={$t('workflows_help_text')}
           onClick={() => Create.onAction(Create)}
           src={emptyWorkflows}
-          class="mt-10 mx-auto"
+          class="mx-auto mt-10"
         />
       {:else}
         <div class="my-6 grid gap-6">
           {#each workflows as workflow (workflow.id)}
             <Card class="border border-light-200">
               <CardHeader
-                class={`flex flex-row px-8 py-6 gap-4 sm:items-center sm:gap-6 ${
+                class={`flex flex-row gap-4 px-8 py-6 sm:items-center sm:gap-6 ${
                   workflow.enabled
                     ? 'bg-linear-to-r from-green-50 to-white dark:from-green-800/50 dark:to-green-950/45'
                     : 'bg-neutral-50 dark:bg-neutral-900'
@@ -175,8 +175,7 @@
               >
                 <div class="flex-1">
                   <div class="flex items-center gap-3">
-                    <span
-                      class="rounded-full {workflow.enabled ? 'h-3 w-3 bg-success' : 'h-3 w-3 rounded-full bg-muted'}"
+                    <span class="rounded-full {workflow.enabled ? 'size-3 bg-success' : 'size-3 rounded-full bg-muted'}"
                     ></span>
                     <CardTitle>{workflow.name}</CardTitle>
                   </div>
@@ -186,7 +185,7 @@
                 </div>
 
                 <div class="flex items-center gap-4">
-                  <div class="text-right hidden sm:block">
+                  <div class="hidden text-right sm:block">
                     <Text size="tiny">{$t('created_at')}</Text>
                     <Text size="small" fontWeight="medium">
                       {formatTimestamp(workflow.createdAt)}
@@ -206,7 +205,7 @@
               <CardBody class="space-y-6">
                 <div class="grid gap-4 md:grid-cols-3">
                   <!-- Trigger Section -->
-                  <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
+                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
                     <div class="mb-3">
                       <Text size="tiny" color="muted" fontWeight="medium">{$t('trigger')}</Text>
                     </div>
@@ -214,7 +213,7 @@
                   </div>
 
                   <!-- Filters Section -->
-                  <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
+                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
                     <div class="mb-3">
                       <Text size="tiny" color="muted" fontWeight="medium">{$t('filters')}</Text>
                     </div>
@@ -232,7 +231,7 @@
                   </div>
 
                   <!-- Actions Section -->
-                  <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
+                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
                     <div class="mb-3">
                       <Text size="tiny" color="muted" fontWeight="medium">{$t('actions')}</Text>
                     </div>
@@ -254,7 +253,7 @@
                 </div>
 
                 {#if expandedWorkflows.has(workflow.id)}
-                  <VStack gap={2} class="w-full rounded-2xl border bg-light-50 p-4 border-light-200 ">
+                  <VStack gap={2} class="w-full rounded-2xl border border-light-200 bg-light-50 p-4">
                     <CodeBlock code={getJson(workflow)} lineNumbers />
                     <Button
                       leadingIcon={mdiClose}
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
index 2e81c5fea5..d76d7e226f 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
@@ -325,7 +325,7 @@
 </script>
 
 {#snippet cardOrder(index: number)}
-  <div class="h-8 w-8 rounded-lg flex place-items-center place-content-center shrink-0 border bg-light-50">
+  <div class="flex size-8 shrink-0 place-content-center place-items-center rounded-lg border bg-light-50">
     <Text size="small" class="font-mono font-bold">
       {index + 1}
     </Text>
@@ -338,7 +338,7 @@
       <div class="w-full border-t-2 border-dashed border-light-200"></div>
     </div>
     <div class="relative flex justify-center text-xs uppercase">
-      <Text class="bg-white dark:bg-black px-2" fontWeight="semi-bold" size="tiny" color="muted">{$t('then')}</Text>
+      <Text class="bg-white px-2 dark:bg-black" fontWeight="semi-bold" size="tiny" color="muted">{$t('then')}</Text>
     </div>
   </div>
 {/snippet}
@@ -347,7 +347,7 @@
   <button
     type="button"
     {onclick}
-    class="w-full p-8 rounded-lg border-2 border-dashed hover:border-light-400 hover:bg-light-50 transition-all flex flex-col items-center justify-center gap-2"
+    class="flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-all hover:border-light-400 hover:bg-light-50"
   >
     <Icon icon={mdiPlus} size="32" />
     <Text size="small" fontWeight="medium">{title}</Text>
@@ -384,7 +384,7 @@
           <CardBody>
             <VStack gap={4}>
               <div
-                class="relative overflow-hidden border p-4 w-full rounded-xl"
+                class="relative w-full overflow-hidden rounded-xl border p-4"
                 class:bg-primary-50={editWorkflow.enabled}
               >
                 <Field
@@ -468,12 +468,12 @@
                     isDragging: draggedFilterIndex === index,
                     isDragOver: dragOverFilterIndex === index,
                   })}
-                  class="mb-4 cursor-move rounded-2xl border-2 p-4 transition-all bg-light-50 border-dashed hover:border-light-300"
+                  class="mb-4 cursor-move rounded-2xl border-2 border-dashed bg-light-50 p-4 transition-all hover:border-light-300"
                 >
                   <div class="flex items-start gap-4">
                     {@render cardOrder(index)}
                     <div class="flex-1">
-                      <h1 class="font-bold text-lg mb-3">{filter.title}</h1>
+                      <h1 class="mb-3 text-lg font-bold">{filter.title}</h1>
                       <SchemaFormFields
                         schema={filter.schema}
                         bind:config={filterConfigs}
@@ -537,12 +537,12 @@
                     isDragging: draggedActionIndex === index,
                     isDragOver: dragOverActionIndex === index,
                   })}
-                  class="mb-4 cursor-move rounded-2xl border-2 p-4 transition-all bg-light-50 border-dashed hover:border-light-300"
+                  class="mb-4 cursor-move rounded-2xl border-2 border-dashed bg-light-50 p-4 transition-all hover:border-light-300"
                 >
                   <div class="flex items-start gap-4">
                     {@render cardOrder(index)}
                     <div class="flex-1">
-                      <h1 class="font-bold text-lg mb-3">{action.title}</h1>
+                      <h1 class="mb-3 text-lg font-bold">{action.title}</h1>
                       <SchemaFormFields
                         schema={action.schema}
                         bind:config={actionConfigs}
@@ -587,7 +587,7 @@
 
   {#snippet trailing()}
     <HStack gap={4}>
-      <HStack gap={1} class="border rounded-lg p-1 border-light-300">
+      <HStack gap={1} class="rounded-lg border border-light-300 p-1">
         <Button
           size="small"
           variant={viewMode === 'visual' ? 'outline' : 'ghost'}
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/SchemaFormFields.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/SchemaFormFields.svelte
index fbdb1fa0a5..99780cab17 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/SchemaFormFields.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/SchemaFormFields.svelte
@@ -67,7 +67,7 @@
     {#each Object.entries(components) as [key, component] (key)}
       {@const label = component.title || component.label || key}
 
-      <div class="flex flex-col gap-1 border bg-light p-4 rounded-xl">
+      <div class="flex flex-col gap-1 rounded-xl border bg-light p-4">
         <!-- Select component -->
         {#if component.type === 'select'}
           {#if isPickerField(component.subType)}
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowCardConnector.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowCardConnector.svelte
index 9666311980..9c807f9317 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowCardConnector.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowCardConnector.svelte
@@ -10,13 +10,13 @@
   <div class="relative h-12 w-0.5">
     <div class="absolute inset-0 bg-linear-to-b from-primary/30 via-primary/50 to-primary/30"></div>
     {#if animated}
-      <div class="absolute inset-0 bg-linear-to-b from-transparent via-primary to-transparent flow-pulse"></div>
+      <div class="flow-pulse absolute inset-0 bg-linear-to-b from-transparent via-primary to-transparent"></div>
     {/if}
-    <div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-      <div class="h-2 w-2 rounded-full bg-primary shadow-sm shadow-primary/50"></div>
+    <div class="absolute top-0 left-1/2 -translate-1/2">
+      <div class="size-2 rounded-full bg-primary shadow-sm shadow-primary/50"></div>
     </div>
-    <div class="absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2">
-      <div class="h-2 w-2 rounded-full bg-primary shadow-sm shadow-primary/50"></div>
+    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
+      <div class="size-2 rounded-full bg-primary shadow-sm shadow-primary/50"></div>
     </div>
   </div>
 </div>
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowJsonEditor.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowJsonEditor.svelte
index 7f9b28911f..fab4efdcf5 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowJsonEditor.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowJsonEditor.svelte
@@ -66,7 +66,7 @@
     </CardHeader>
     <CardBody>
       <VStack gap={2}>
-        <div class="w-full h-[600px] rounded-lg overflow-hidden border {editorClass}">
+        <div class="h-[600px] w-full overflow-hidden rounded-lg border {editorClass}">
           <JSONEditor {content} onChange={handleChange} mainMenuBar={false} mode={Mode.text} />
         </div>
       </VStack>
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowPickerItemCard.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowPickerItemCard.svelte
index 63f9654783..eb3f8975d5 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowPickerItemCard.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowPickerItemCard.svelte
@@ -22,13 +22,13 @@
           <img
             src={getAssetMediaUrl({ id: item.albumThumbnailAssetId })}
             alt={item.albumName}
-            class="h-12 w-12 rounded-lg object-cover"
+            class="size-12 rounded-lg object-cover"
           />
         {:else}
-          <div class="h-12 w-12 rounded-lg"></div>
+          <div class="size-12 rounded-lg"></div>
         {/if}
       {:else if !isAlbum && 'name' in item}
-        <img src={getPeopleThumbnailUrl(item)} alt={item.name} class="h-12 w-12 rounded-full object-cover" />
+        <img src={getPeopleThumbnailUrl(item)} alt={item.name} class="size-12 rounded-full object-cover" />
       {/if}
     </div>
     <div class="min-w-0 flex-1">
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowSummary.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowSummary.svelte
index 6057b5e0cc..4807780392 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowSummary.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowSummary.svelte
@@ -82,15 +82,15 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={containerEl}
-    class="hidden sm:block fixed w-64 hover:cursor-grab select-none"
+    class="fixed hidden w-64 select-none hover:cursor-grab sm:block"
     style="left: {position.x}px; top: {position.y}px;"
     class:cursor-grabbing={isDragging}
     onmousedown={handleMouseDown}
   >
     <div
-      class="rounded-xl border-transparent border-2 hover:shadow-xl hover:border-dashed bg-light-50 shadow-sm p-4 hover:border-light-300 transition-all"
+      class="rounded-xl border-2 border-transparent bg-light-50 p-4 shadow-sm transition-all hover:border-dashed hover:border-light-300 hover:shadow-xl"
     >
-      <div class="flex items-center justify-between mb-4 cursor-grab select-none">
+      <div class="mb-4 flex cursor-grab items-center justify-between select-none">
         <Text size="small" fontWeight="semi-bold">{$t('workflow_summary')}</Text>
         <div class="flex items-center gap-1">
           <IconButton
@@ -110,23 +110,23 @@
 
       <div class="space-y-2">
         <!-- Trigger -->
-        <div class="rounded-lg bg-light-100 border p-3">
-          <div class="flex items-center gap-2 mb-1">
+        <div class="rounded-lg border bg-light-100 p-3">
+          <div class="mb-1 flex items-center gap-2">
             <Icon icon={mdiFlashOutline} size="18" class="text-primary" />
             <Text size="tiny" fontWeight="semi-bold">{$t('trigger')}</Text>
           </div>
-          <p class="text-sm truncate pl-5">{getTriggerName(trigger.type)}</p>
+          <p class="truncate pl-5 text-sm">{getTriggerName(trigger.type)}</p>
         </div>
 
         <!-- Connector -->
         <div class="flex justify-center">
-          <div class="w-0.5 h-3 bg-light-400"></div>
+          <div class="h-3 w-0.5 bg-light-400"></div>
         </div>
 
         <!-- Filters -->
         {#if filters.length > 0}
-          <div class="rounded-lg bg-light-100 border p-3">
-            <div class="flex items-center gap-2 mb-2">
+          <div class="rounded-lg border bg-light-100 p-3">
+            <div class="mb-2 flex items-center gap-2">
               <Icon icon={mdiFilterOutline} size="18" class="text-warning" />
               <Text size="tiny" fontWeight="semi-bold">{$t('filters')}</Text>
             </div>
@@ -134,10 +134,10 @@
               {#each filters as filter, index (index)}
                 <div class="flex items-center gap-2">
                   <span
-                    class="shrink-0 h-4 w-4 rounded-full bg-light-200 text-[10px] font-medium flex items-center justify-center"
+                    class="flex size-4 shrink-0 items-center justify-center rounded-full bg-light-200 text-[10px] font-medium"
                     >{index + 1}</span
                   >
-                  <p class="text-sm truncate">{filter.title}</p>
+                  <p class="truncate text-sm">{filter.title}</p>
                 </div>
               {/each}
             </div>
@@ -145,14 +145,14 @@
 
           <!-- Connector -->
           <div class="flex justify-center">
-            <div class="w-0.5 h-3 bg-light-400"></div>
+            <div class="h-3 w-0.5 bg-light-400"></div>
           </div>
         {/if}
 
         <!-- Actions -->
         {#if actions.length > 0}
-          <div class="rounded-lg bg-light-100 border p-3">
-            <div class="flex items-center gap-2 mb-2">
+          <div class="rounded-lg border bg-light-100 p-3">
+            <div class="mb-2 flex items-center gap-2">
               <Icon icon={mdiPlayCircleOutline} size="18" class="text-success" />
               <Text size="tiny" fontWeight="semi-bold">{$t('actions')}</Text>
             </div>
@@ -160,10 +160,10 @@
               {#each actions as action, index (index)}
                 <div class="flex items-center gap-2">
                   <span
-                    class="shrink-0 h-4 w-4 rounded-full bg-light-200 text-[10px] font-medium flex items-center justify-center"
+                    class="flex size-4 shrink-0 items-center justify-center rounded-full bg-light-200 text-[10px] font-medium"
                     >{index + 1}</span
                   >
-                  <p class="text-sm truncate">{action.title}</p>
+                  <p class="truncate text-sm">{action.title}</p>
                 </div>
               {/each}
             </div>
@@ -175,7 +175,7 @@
 {:else}
   <button
     type="button"
-    class="hidden sm:flex fixed right-6 bottom-6 h-14 w-14 items-center justify-center rounded-full bg-primary text-light shadow-lg hover:bg-primary/90 transition-colors"
+    class="fixed right-6 bottom-6 hidden size-14 items-center justify-center rounded-full bg-primary text-light shadow-lg transition-colors hover:bg-primary/90 sm:flex"
     title={$t('workflow_summary')}
     onclick={() => (isOpen = true)}
   >
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowTriggerCard.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowTriggerCard.svelte
index 753abe23f3..7538b8ce08 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowTriggerCard.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/WorkflowTriggerCard.svelte
@@ -58,15 +58,15 @@
 <button
   type="button"
   {onclick}
-  class="group rounded-xl p-4 w-full text-left cursor-pointer border-2 {selected
+  class="group w-full cursor-pointer rounded-xl border-2 p-4 text-left {selected
     ? 'border-primary text-primary'
-    : 'border-light-100 hover:border-light-200 text-light-400 hover:text-light-700'}"
+    : 'border-light-100 text-light-400 hover:border-light-200 hover:text-light-700'}"
 >
   <div class="flex items-center gap-3">
     <div
       class="rounded-xl p-2 {selected
         ? 'bg-primary text-light'
-        : 'text-light-100 bg-light-300 group-hover:bg-light-500'}"
+        : 'bg-light-300 text-light-100 group-hover:bg-light-500'}"
     >
       <Icon icon={getTriggerIcon(trigger.type)} size="24" />
     </div>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 7e7928dea4..9bb1dc1308 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <AuthPageLayout>
-  <div class="flex flex-col place-items-center text-center gap-12">
+  <div class="flex flex-col place-items-center gap-12 text-center">
     <Heading size="large" color="primary" tag="h1">{$t('welcome_to_immich')}</Heading>
     <Stack>
       <Button href={Route.register()} size="large" shape="round">
diff --git a/web/src/routes/DownloadPanel.svelte b/web/src/routes/DownloadPanel.svelte
index ddebd136ff..6931148f30 100644
--- a/web/src/routes/DownloadPanel.svelte
+++ b/web/src/routes/DownloadPanel.svelte
@@ -16,7 +16,7 @@
 {#if downloadManager.isDownloading}
   <div
     transition:fly={{ x: -100, duration: 350 }}
-    class="fixed bottom-10 start-2 max-h-67.5 w-79 z-60 rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
+    class="fixed inset-s-2 bottom-10 z-60 max-h-67.5 w-79 rounded-2xl border bg-subtle p-4 shadow-lg dark:border-white/10"
   >
     <Heading size="tiny">{$t('downloading')}</Heading>
     <div class="my-2 mb-2 flex max-h-50 flex-col overflow-y-auto text-sm">
@@ -34,14 +34,14 @@
               <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-16 whitespace-nowrap text-right">
+              <p class="min-w-16 text-right whitespace-nowrap">
                 <span class="text-primary">
                   {(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
                 </span>
               </p>
             </div>
           </div>
-          <div class="absolute end-4">
+          <div class="absolute inset-e-4">
             <IconButton
               color="secondary"
               variant="outline"
diff --git a/web/src/routes/ErrorLayout.svelte b/web/src/routes/ErrorLayout.svelte
index f121684236..8976e88fee 100644
--- a/web/src/routes/ErrorLayout.svelte
+++ b/web/src/routes/ErrorLayout.svelte
@@ -31,7 +31,7 @@
   };
 </script>
 
-<div class="flex flex-col h-dvh w-dvw">
+<div class="flex h-dvh w-dvw flex-col">
   <section>
     <div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
       <Link href="/photos">
@@ -40,11 +40,11 @@
     </div>
   </section>
 
-  <div class="flex flex-1 w-full place-content-center place-items-center overflow-hidden bg-black/30">
+  <div class="flex w-full flex-1 place-content-center place-items-center overflow-hidden bg-black/30">
     <div class="max-w-[95vw]">
       <Card color="secondary">
         <CardHeader class="flex-row justify-between gap-12">
-          <CardTitle tag="h1" size="medium" class="text-primary flex place-items-center gap-4">
+          <CardTitle tag="h1" size="medium" class="flex place-items-center gap-4 text-primary">
             <Icon icon={mdiAlarmLight} color="red" size="32" />
             {$t('error_title')}
           </CardTitle>
diff --git a/web/src/routes/NavigationLoadingBar.svelte b/web/src/routes/NavigationLoadingBar.svelte
index 39a74cd993..680eec8260 100644
--- a/web/src/routes/NavigationLoadingBar.svelte
+++ b/web/src/routes/NavigationLoadingBar.svelte
@@ -26,7 +26,7 @@
 </script>
 
 {#if showing}
-  <div class="absolute start-0 top-0 h-[3px] w-dvw bg-white">
+  <div class="absolute inset-s-0 top-0 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/UploadAssetPreview.svelte b/web/src/routes/UploadAssetPreview.svelte
index ecb85a7db6..e5ab7ec28a 100644
--- a/web/src/routes/UploadAssetPreview.svelte
+++ b/web/src/routes/UploadAssetPreview.svelte
@@ -39,7 +39,7 @@
 <div
   in:fade={{ duration: 250 }}
   out:fade={{ duration: 100 }}
-  class="flex flex-col rounded-xl text-xs p-2 gap-1 border border-gray-300 dark:border-subtle bg-primary/10"
+  class="flex flex-col gap-1 rounded-xl border border-gray-300 bg-primary/10 p-2 text-xs dark:border-subtle"
 >
   <div class="flex items-center gap-2">
     <div class="flex items-center justify-center">
@@ -93,9 +93,9 @@
   </div>
 
   {#if uploadAsset.state === UploadState.STARTED}
-    <div class="text-black relative mt-[5px] h-4.5 w-full rounded-md bg-gray-300 dark:bg-gray-700">
+    <div class="relative mt-[5px] h-4.5 w-full rounded-md bg-gray-300 text-black 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]">
+      <p class="absolute top-0.5 size-full text-center text-[10px] text-white">
         {#if uploadAsset.message === $t('asset_hashing')}
           {uploadAsset.message}
         {:else}
diff --git a/web/src/routes/UploadPanel.svelte b/web/src/routes/UploadPanel.svelte
index e59257b3f0..76df4bc353 100644
--- a/web/src/routes/UploadPanel.svelte
+++ b/web/src/routes/UploadPanel.svelte
@@ -37,16 +37,16 @@
       }
       uploadAssetsStore.reset();
     }}
-    class="fixed bottom-6 end-16"
+    class="fixed inset-e-16 bottom-6"
   >
     {#if showDetail}
       <div
         in:scale={{ duration: 250, easing: quartInOut }}
-        class="w-81 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 bg-subtle p-4 text-sm shadow-xs dark:border-subtle"
       >
         <div class="place-item-center mb-4 flex justify-between">
           <div class="flex flex-col gap-1">
-            <p class="immich-form-label text-xm">
+            <p class="text-xm immich-form-label">
               {$t('upload_progress', {
                 values: {
                   remaining: $remainingUploads,
@@ -55,7 +55,7 @@
                 },
               })}
             </p>
-            <p class="immich-form-label text-xs">
+            <p class="text-xs immich-form-label">
               {$t('upload_status_uploaded')}
               <span class="text-success">{$stats.success.toLocaleString($locale)}</span>
               -
@@ -101,7 +101,7 @@
           </div>
         </div>
         {#if showOptions}
-          <div class="immich-scrollbar mb-4 max-h-100 overflow-y-auto rounded-lg">
+          <div class="mb-4 max-h-100 overflow-y-auto rounded-lg immich-scrollbar">
             <div class="flex h-6.5 place-items-center gap-1">
               <label class="immich-form-label" for="upload-concurrency">{$t('upload_concurrency')}</label>
             </div>
@@ -119,7 +119,7 @@
             />
           </div>
         {/if}
-        <div class="immich-scrollbar flex max-h-[400px] flex-col gap-2 overflow-y-auto rounded-lg">
+        <div class="flex max-h-[400px] flex-col gap-2 overflow-y-auto rounded-lg immich-scrollbar">
           {#each $uploadAssetsStore as uploadAsset (uploadAsset.id)}
             <UploadAssetPreview {uploadAsset} />
           {/each}
@@ -131,7 +131,7 @@
           type="button"
           in:scale={{ duration: 250, easing: quartInOut }}
           onclick={() => (showDetail = true)}
-          class="absolute -start-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-primary p-5 text-xs text-light"
+          class="absolute -inset-s-4 -top-4 flex size-10 place-content-center place-items-center rounded-full bg-primary p-5 text-xs text-light"
         >
           {$remainingUploads.toLocaleString($locale)}
         </button>
@@ -140,7 +140,7 @@
             type="button"
             in:scale={{ duration: 250, easing: quartInOut }}
             onclick={() => (showDetail = true)}
-            class="absolute -end-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-danger p-5 text-xs text-light"
+            class="absolute -inset-e-4 -top-4 flex size-10 place-content-center place-items-center rounded-full bg-danger p-5 text-xs text-light"
           >
             {$stats.errors.toLocaleString($locale)}
           </button>
@@ -149,7 +149,7 @@
           type="button"
           in:scale={{ duration: 250, easing: quartInOut }}
           onclick={() => (showDetail = true)}
-          class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-subtle p-5 text-sm text-primary shadow-lg"
+          class="flex size-16 place-content-center place-items-center rounded-full bg-subtle p-5 text-sm text-primary shadow-lg"
         >
           <div class="animate-pulse">
             <Icon icon={mdiCloudUploadOutline} size="30" />
diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte
index 793da2410e..d41a1c99b3 100644
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -133,7 +133,7 @@
           fullWidth
           text={$t('no_libraries_message')}
           onClick={() => goto(Route.newLibrary())}
-          class="mt-10 mx-auto"
+          class="mx-auto mt-10"
         />
       {/if}
 
diff --git a/web/src/routes/admin/library-management/[id]/+layout.svelte b/web/src/routes/admin/library-management/[id]/+layout.svelte
index 26cec19340..d0a8700cc0 100644
--- a/web/src/routes/admin/library-management/[id]/+layout.svelte
+++ b/web/src/routes/admin/library-management/[id]/+layout.svelte
@@ -61,9 +61,9 @@
   actions={[Scan, Edit, Delete]}
 >
   <Container size="large" center>
-    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
+    <div class="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
       <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
-      <div class="flex flex-col lg:flex-row gap-4 col-span-full">
+      <div class="col-span-full flex flex-col gap-4 lg:flex-row">
         <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
         <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
         <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} valuePromise={usagePromise} />
@@ -86,7 +86,7 @@
                   <td>
                     <Code>{folder}</Code>
                   </td>
-                  <td class="flex gap-2 justify-end">
+                  <td class="flex justify-end gap-2">
                     <TableButton action={Edit} />
                     <TableButton action={Delete} />
                   </td>
@@ -106,7 +106,7 @@
                 <td>
                   <Code>{exclusionPattern}</Code>
                 </td>
-                <td class="flex gap-2 justify-end">
+                <td class="flex justify-end gap-2">
                   <TableButton action={Edit} />
                   <TableButton action={Delete} />
                 </td>
diff --git a/web/src/routes/admin/queues/QueueCard.svelte b/web/src/routes/admin/queues/QueueCard.svelte
index 356aafa118..6e7fbb940d 100644
--- a/web/src/routes/admin/queues/QueueCard.svelte
+++ b/web/src/routes/admin/queues/QueueCard.svelte
@@ -44,7 +44,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-9">
+<div class="sm:rounded-9 flex flex-col overflow-hidden rounded-2xl bg-gray-100 sm:flex-row dark:bg-immich-dark-gray">
   <div class="flex w-full flex-col">
     {#if queue.isPaused}
       <QueueCardBadge color="warning">{$t('paused')}</QueueCardBadge>
@@ -94,7 +94,7 @@
       </div>
 
       {#if subtitle}
-        <div class="whitespace-pre-line text-sm dark:text-white">{subtitle}</div>
+        <div class="text-sm whitespace-pre-line dark:text-white">{subtitle}</div>
       {/if}
 
       {#if description}
diff --git a/web/src/routes/admin/queues/QueueCardBadge.svelte b/web/src/routes/admin/queues/QueueCardBadge.svelte
index 1debcc5dc7..45b0569cdd 100644
--- a/web/src/routes/admin/queues/QueueCardBadge.svelte
+++ b/web/src/routes/admin/queues/QueueCardBadge.svelte
@@ -10,7 +10,7 @@
   let { color, children }: Props = $props();
 
   const styles = tv({
-    base: 'w-full p-2 text-center text-sm ',
+    base: 'w-full p-2 text-center text-sm',
     variants: {
       color: {
         success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
diff --git a/web/src/routes/admin/queues/QueueCardButton.svelte b/web/src/routes/admin/queues/QueueCardButton.svelte
index 9964b8fd1a..f3fdce1892 100644
--- a/web/src/routes/admin/queues/QueueCardButton.svelte
+++ b/web/src/routes/admin/queues/QueueCardButton.svelte
@@ -16,7 +16,7 @@
   let { color, disabled = false, onClick = () => {}, children }: Props = $props();
 
   const styles = tv({
-    base: 'flex h-full w-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200 ',
+    base: 'flex size-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200',
     variants: {
       color: {
         'light-gray': 'bg-gray-300/80 dark:bg-gray-700',
diff --git a/web/src/routes/admin/queues/QueuePanel.svelte b/web/src/routes/admin/queues/QueuePanel.svelte
index a22aac7d45..263d547db2 100644
--- a/web/src/routes/admin/queues/QueuePanel.svelte
+++ b/web/src/routes/admin/queues/QueuePanel.svelte
@@ -122,7 +122,7 @@
   };
 </script>
 
-<div class="flex flex-col gap-7 mt-10">
+<div class="mt-10 flex flex-col gap-7">
   {#each queueList as [queueName, props] (queueName)}
     {@const queue = queues.find(({ name }) => name === queueName)}
     {#if queue}
diff --git a/web/src/routes/admin/queues/[name]/+page.svelte b/web/src/routes/admin/queues/[name]/+page.svelte
index 26b7f3fc70..3adf607d7f 100644
--- a/web/src/routes/admin/queues/[name]/+page.svelte
+++ b/web/src/routes/admin/queues/[name]/+page.svelte
@@ -41,7 +41,7 @@
 >
   <div>
     <Container size="large" center>
-      <div class="mb-1 mt-4 flex items-center gap-2">
+      <div class="mt-4 mb-1 flex items-center gap-2">
         <Heading tag="h1" size="large">{item.title}</Heading>
         {#if queue.isPaused}
           <Badge color="warning">
@@ -51,7 +51,7 @@
       </div>
       <Text color="muted" class="mb-4">{item.subtitle}</Text>
 
-      <div class="flex gap-1 mb-4">
+      <div class="mb-4 flex gap-1">
         <Badge>{$t('active_count', { values: { count: queue.statistics.active } })}</Badge>
         <Badge>{$t('waiting_count', { values: { count: queue.statistics.waiting + queue.statistics.paused } })}</Badge>
         {#if queue.statistics.failed > 0}
diff --git a/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte b/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
index 4cf2413d3e..c24692ad7f 100644
--- a/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
+++ b/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
@@ -61,11 +61,11 @@
   <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-24"></span></TableCell>
 {/snippet}
 
-<div class="flex flex-col gap-5 my-4">
+<div class="my-4 flex flex-col gap-5">
   <div>
     <Text class="mb-2" fontWeight="medium">{$t('total_usage')}</Text>
 
-    <div class="hidden justify-between lg:flex gap-4">
+    <div class="hidden justify-between gap-4 lg:flex">
       <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
       <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
       <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} valuePromise={storagePromise} />
@@ -81,7 +81,7 @@
 
           <div class="relative text-center font-mono text-2xl font-medium">
             {#await statsPromise}
-              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
+              <span class="shimmer-text text-gray-300 dark:text-gray-600">{zeros(0)}</span>
             {:then stats}
               <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
             {:catch}
@@ -97,7 +97,7 @@
 
           <div class="relative text-center font-mono text-2xl font-medium">
             {#await statsPromise}
-              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
+              <span class="shimmer-text text-gray-300 dark:text-gray-600">{zeros(0)}</span>
             {:then stats}
               <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
             {:catch}
@@ -113,15 +113,15 @@
 
           <div class="relative flex text-center font-mono text-2xl font-medium">
             {#await statsPromise}
-              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
+              <span class="shimmer-text text-gray-300 dark:text-gray-600">{zeros(0)}</span>
             {:then stats}
               {@const storageUsageWithUnit = getStorageUsageWithUnit(stats.usage)}
               <span class="text-light-300">{zeros(storageUsageWithUnit[0])}</span><span class="text-primary"
                 >{storageUsageWithUnit[0]}</span
               >
 
-              <div class="absolute -end-1.5 -bottom-4">
-                <Code color="muted" class="text-xs font-light font-mono">{storageUsageWithUnit[1]}</Code>
+              <div class="absolute -inset-e-1.5 -bottom-4">
+                <Code color="muted" class="font-mono text-xs font-light">{storageUsageWithUnit[1]}</Code>
               </div>
             {:catch}
               <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
@@ -133,7 +133,7 @@
   </div>
 
   <div>
-    <Text class="mb-2 mt-4" fontWeight="medium">{$t('user_usage_detail')}</Text>
+    <Text class="mt-4 mb-2" fontWeight="medium">{$t('user_usage_detail')}</Text>
     <Table striped size="small">
       <TableHeader>
         <TableHeading class="w-1/4">{$t('user')}</TableHeading>
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index a38282ec1e..8a1d5a5832 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -210,7 +210,7 @@
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
   <Container size="large" center>
     {#if featureFlagsManager.value.configFile}
-      <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
+      <Alert color="warning" class="my-4 text-dark" title={$t('admin.config_set_by_file')} />
     {/if}
     <div>
       <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
diff --git a/web/src/routes/admin/system-settings/AuthSettings.svelte b/web/src/routes/admin/system-settings/AuthSettings.svelte
index 913a491700..651f7b3803 100644
--- a/web/src/routes/admin/system-settings/AuthSettings.svelte
+++ b/web/src/routes/admin/system-settings/AuthSettings.svelte
@@ -89,7 +89,7 @@
             {#if configToEdit.oauth.enabled}
               <hr />
 
-              <div class="flex items-center gap-2 justify-between">
+              <div class="flex items-center justify-between gap-2">
                 <Text size="small">{$t('admin.unlink_all_oauth_accounts_description')}</Text>
                 <Button size="small" onclick={handleUnlinkAllOAuthAccounts}
                   >{$t('admin.unlink_all_oauth_accounts')}</Button
diff --git a/web/src/routes/admin/system-settings/MachineLearningSettings.svelte b/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
index 765398d735..92b661fe8e 100644
--- a/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
+++ b/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
@@ -133,7 +133,7 @@
             isEdited={configToEdit.machineLearning.clip.modelName !== config.machineLearning.clip.modelName}
           >
             {#snippet descriptionSnippet()}
-              <p class="immich-form-label pb-2 text-sm">
+              <p class="pb-2 text-sm immich-form-label">
                 <FormatMessage key="admin.machine_learning_clip_model_description">
                   {#snippet children({ message })}
                     <a target="_blank" href="https://huggingface.co/immich-app"><u>{message}</u></a>
@@ -259,7 +259,7 @@
         title={$t('admin.machine_learning_ocr')}
         subtitle={$t('admin.machine_learning_ocr_description')}
       >
-        <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="mt-4 ml-4 flex flex-col gap-4">
           <SettingSwitch
             title={$t('admin.machine_learning_ocr_enabled')}
             subtitle={$t('admin.machine_learning_ocr_enabled_description')}
diff --git a/web/src/routes/admin/system-settings/NotificationSettings.svelte b/web/src/routes/admin/system-settings/NotificationSettings.svelte
index fd0d10ba30..d0ec7d8f3a 100644
--- a/web/src/routes/admin/system-settings/NotificationSettings.svelte
+++ b/web/src/routes/admin/system-settings/NotificationSettings.svelte
@@ -140,7 +140,7 @@
               isEdited={configToEdit.notifications.smtp.from !== config.notifications.smtp.from}
             />
 
-            <div class="flex gap-2 place-items-center">
+            <div class="flex place-items-center gap-2">
               <Button
                 size="small"
                 shape="round"
diff --git a/web/src/routes/admin/system-settings/ServerSettings.svelte b/web/src/routes/admin/system-settings/ServerSettings.svelte
index 4bf2236fb2..45be7733e3 100644
--- a/web/src/routes/admin/system-settings/ServerSettings.svelte
+++ b/web/src/routes/admin/system-settings/ServerSettings.svelte
@@ -16,7 +16,7 @@
 <div>
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="mt-4 ms-4">
+      <div class="ms-4 mt-4">
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
           label={$t('admin.server_external_domain_settings')}
diff --git a/web/src/routes/admin/system-settings/SettingCheckboxes.svelte b/web/src/routes/admin/system-settings/SettingCheckboxes.svelte
index 4aba206cd7..53257a0908 100644
--- a/web/src/routes/admin/system-settings/SettingCheckboxes.svelte
+++ b/web/src/routes/admin/system-settings/SettingCheckboxes.svelte
@@ -31,7 +31,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex h-6.5 place-items-center gap-1">
-    <label class="font-medium text-primary text-sm" for="{name}-select">
+    <label class="text-sm font-medium text-primary" for="{name}-select">
       {label}
     </label>
 
@@ -46,13 +46,13 @@
   </div>
 
   {#if desc}
-    <p class="immich-form-label pb-2 text-sm" id="{name}-desc">
+    <p class="pb-2 text-sm immich-form-label" id="{name}-desc">
       {desc}
     </p>
   {/if}
   <div class="flex flex-col gap-2">
     {#each options as option (option.value)}
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         <Checkbox
           size="tiny"
           id="{option.value}-checkbox"
diff --git a/web/src/routes/admin/system-settings/SettingSelect.svelte b/web/src/routes/admin/system-settings/SettingSelect.svelte
index 026b12f203..dd07f28ce4 100644
--- a/web/src/routes/admin/system-settings/SettingSelect.svelte
+++ b/web/src/routes/admin/system-settings/SettingSelect.svelte
@@ -40,7 +40,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex h-6.5 place-items-center gap-1">
-    <label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
+    <label class="text-sm font-medium text-primary" for="{name}-select">{label}</label>
 
     {#if isEdited}
       <div
@@ -53,7 +53,7 @@
   </div>
 
   {#if desc}
-    <p class="immich-form-label pb-2 text-sm" id="{name}-desc">
+    <p class="pb-2 text-sm immich-form-label" id="{name}-desc">
       {desc}
     </p>
   {/if}
@@ -63,12 +63,12 @@
       icon={mdiChevronDown}
       size="1.2em"
       aria-hidden
-      class="pointer-events-none end-1 relative col-start-1 row-start-1 self-center justify-self-end {disabled
+      class="pointer-events-none relative inset-e-1 col-start-1 row-start-1 self-center justify-self-end {disabled
         ? 'text-immich-bg'
         : 'text-immich-fg dark:text-immich-bg'}"
     />
     <select
-      class="immich-form-input w-full appearance-none row-start-1 col-start-1 pe-6!"
+      class="col-start-1 row-start-1 immich-form-input w-full appearance-none pe-6!"
       {disabled}
       aria-describedby={desc ? `${name}-desc` : undefined}
       {name}
diff --git a/web/src/routes/admin/system-settings/SettingTextarea.svelte b/web/src/routes/admin/system-settings/SettingTextarea.svelte
index 7a4d3c12a8..46b81a589c 100644
--- a/web/src/routes/admin/system-settings/SettingTextarea.svelte
+++ b/web/src/routes/admin/system-settings/SettingTextarea.svelte
@@ -31,7 +31,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex h-6.5 place-items-center gap-1">
-    <label class="font-medium text-primary text-sm" for={label}>{label}</label>
+    <label class="text-sm font-medium text-primary" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}
@@ -47,7 +47,7 @@
   </div>
 
   {#if description}
-    <p class="immich-form-label pb-2 text-sm" id="{label}-desc">
+    <p class="pb-2 text-sm immich-form-label" id="{label}-desc">
       {description}
     </p>
   {:else}
diff --git a/web/src/routes/admin/users/(list)/new/+page.svelte b/web/src/routes/admin/users/(list)/new/+page.svelte
index 3a9bb4aa5f..7eaa1080b4 100644
--- a/web/src/routes/admin/users/(list)/new/+page.svelte
+++ b/web/src/routes/admin/users/(list)/new/+page.svelte
@@ -87,7 +87,7 @@
     </Field>
 
     <Field label={$t('admin.require_password_change_on_login')}>
-      <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm text-start" />
+      <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-start text-sm" />
     </Field>
 
     <Field label={$t('name')} required>
diff --git a/web/src/routes/admin/users/[id]/+layout.svelte b/web/src/routes/admin/users/[id]/+layout.svelte
index cc5c4f19e0..2fc7462d74 100644
--- a/web/src/routes/admin/users/[id]/+layout.svelte
+++ b/web/src/routes/admin/users/[id]/+layout.svelte
@@ -101,8 +101,8 @@
         <Alert color="danger" class="my-4" title={$t('user_has_been_deleted')} icon={mdiTrashCanOutline} />
       {/if}
 
-      <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
-        <div class="col-span-full flex flex-col gap-4 my-4">
+      <div class="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
+        <div class="col-span-full my-4 flex flex-col gap-4">
           <div class="flex items-center gap-4">
             <UserAvatar {user} size="md" />
             <Heading tag="h1" size="large">{user.name}</Heading>
@@ -114,7 +114,7 @@
           {/if}
         </div>
         <div class="col-span-full">
-          <div class="flex flex-col lg:flex-row gap-4 w-full">
+          <div class="flex w-full flex-col gap-4 lg:flex-row">
             <ServerStatisticsCard
               icon={mdiCameraIris}
               title={$t('photos')}
diff --git a/web/src/routes/admin/users/[id]/FeatureSetting.svelte b/web/src/routes/admin/users/[id]/FeatureSetting.svelte
index e2e4f16242..ff3643722d 100644
--- a/web/src/routes/admin/users/[id]/FeatureSetting.svelte
+++ b/web/src/routes/admin/users/[id]/FeatureSetting.svelte
@@ -10,7 +10,7 @@
   let { title, state }: Props = $props();
 </script>
 
-<div class="flex justify-between items-center">
+<div class="flex items-center justify-between">
   <Text class="text-sm" fontWeight="medium">{title}</Text>
   <Icon icon={state ? mdiCheck : mdiClose} class={state ? 'text-primary' : 'text-danger'} size="24" />
 </div>
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index b42b16b79c..52567da268 100644
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@@ -155,10 +155,10 @@
 
     {#if featureFlagsManager.value.oauth}
       {#if featureFlagsManager.value.passwordLogin}
-        <div class="inline-flex w-full items-center justify-center my-4">
+        <div class="my-4 inline-flex w-full items-center justify-center">
           <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
           <span
-            class="absolute start-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white uppercase"
+            class="absolute inset-s-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 uppercase dark:bg-neutral-900 dark:text-white"
           >
             {$t('or')}
           </span>
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index 82279abeb1..f84b3c6069 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -160,15 +160,15 @@
   });
 </script>
 
-<section id="onboarding-page" class="min-w-dvw flex min-h-dvh p-4">
-  <div class="flex flex-col w-full">
-    <div class=" bg-gray-300 dark:bg-gray-600 rounded-md h-2">
+<section id="onboarding-page" class="flex min-h-dvh min-w-dvw p-4">
+  <div class="flex w-full flex-col">
+    <div class="h-2 rounded-md bg-gray-300 dark:bg-gray-600">
       <div
-        class="progress-bar bg-primary h-2 rounded-md transition-all duration-200 ease-out"
+        class="progress-bar h-2 rounded-md bg-primary transition-all duration-200 ease-out"
         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="m-auto flex w-[min(100%,800px)] place-content-center place-items-center py-8">
       <OnboardingCard
         title={onboardingSteps[index].title}
         icon={onboardingSteps[index].icon}
diff --git a/web/src/routes/auth/onboarding/OnboardingBackup.svelte b/web/src/routes/auth/onboarding/OnboardingBackup.svelte
index 7d7f51c392..ce64f64fd8 100644
--- a/web/src/routes/auth/onboarding/OnboardingBackup.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingBackup.svelte
@@ -13,9 +13,9 @@
 
 <div class="flex flex-col">
   <Stack gap={2}>
-    <div class="flex items-start gap-4 p-6 my-10 bg-gray-100 dark:bg-gray-800/40 rounded-xl border border-gray-700/50">
-      <Icon icon={mdiAlertCircleOutline} size="36" class="text-warning shrink-0 mt-0.5" />
-      <div class="text-gray-800 dark:text-gray-300 leading-relaxed">
+    <div class="my-10 flex items-start gap-4 rounded-xl border border-gray-700/50 bg-gray-100 p-6 dark:bg-gray-800/40">
+      <Icon icon={mdiAlertCircleOutline} size="36" class="mt-0.5 shrink-0 text-warning" />
+      <div class="leading-relaxed text-gray-800 dark:text-gray-300">
         <FormatMessage key="admin.backup_onboarding_description">
           {#snippet children({ message })}
             <Link href="https://www.backblaze.com/blog/the-3-2-1-backup-strategy/">
@@ -32,10 +32,10 @@
       <div class="space-y-6">
         {#each messageKeys as keyString, index (index)}
           <div class="flex items-start gap-6">
-            <div class="shrink-0 w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center">
-              <span class="text-light text-xl font-semibold">{3 - index}</span>
+            <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/90">
+              <span class="text-xl font-semibold text-light">{3 - index}</span>
             </div>
-            <div class="leading-relaxed pt-2">
+            <div class="pt-2 leading-relaxed">
               <FormatMessage key={keyString as Translations} />
             </div>
           </div>
@@ -43,7 +43,7 @@
       </div>
     </div>
 
-    <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mt-4">
+    <div class="mt-4 text-sm/relaxed text-gray-600 dark:text-gray-400">
       <p>
         <FormatMessage key="admin.backup_onboarding_footer">
           {#snippet children({ message })}
diff --git a/web/src/routes/auth/onboarding/OnboardingCard.svelte b/web/src/routes/auth/onboarding/OnboardingCard.svelte
index a8463f76ea..13917959a8 100644
--- a/web/src/routes/auth/onboarding/OnboardingCard.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingCard.svelte
@@ -30,16 +30,16 @@
 
 <div
   id="onboarding-card"
-  class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-8 dark:border-gray-700 dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
+  class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 bg-gray-50 p-8 text-black dark:border-gray-700 dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   in:fade={{ duration: 250 }}
 >
   {#if title || icon}
-    <div class="flex gap-2 items-center justify-center w-fit">
+    <div class="flex w-fit items-center justify-center gap-2">
       {#if icon}
         <Icon {icon} size="30" class="text-primary" />
       {/if}
       {#if title}
-        <p class="text-xl text-primary font-medium">
+        <p class="text-xl font-medium text-primary">
           {title}
         </p>
       {/if}
@@ -49,11 +49,11 @@
 
   <div class="flex pt-4">
     {#if previousTitle}
-      <div class="w-full flex place-content-start">
+      <div class="flex w-full place-content-start">
         <Button
           shape="round"
           leadingIcon={mdiArrowLeft}
-          class="flex gap-2 place-content-center"
+          class="flex place-content-center gap-2"
           onclick={() => {
             onLeave?.();
             onPrevious?.();
diff --git a/web/src/routes/auth/onboarding/OnboardingHello.svelte b/web/src/routes/auth/onboarding/OnboardingHello.svelte
index e0789db13c..533de49f81 100644
--- a/web/src/routes/auth/onboarding/OnboardingHello.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingHello.svelte
@@ -12,10 +12,10 @@
 
 <div class="gap-4">
   <Logo variant="icon" size="giant" class="mb-2" />
-  <p class="font-medium mb-6 text-6xl text-primary">
+  <p class="mb-6 text-6xl font-medium text-primary">
     {$t('onboarding_welcome_user', { values: { user: authManager.user.name } })}
   </p>
-  <p class="text-3xl pb-6 font-light">
+  <p class="pb-6 text-3xl font-light">
     {userRole == OnboardingRole.SERVER
       ? $t('onboarding_server_welcome_description')
       : $t('onboarding_user_welcome_description')}
diff --git a/web/src/routes/auth/onboarding/OnboardingTheme.svelte b/web/src/routes/auth/onboarding/OnboardingTheme.svelte
index b5e62ca3fb..fba2a6d4d9 100644
--- a/web/src/routes/auth/onboarding/OnboardingTheme.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingTheme.svelte
@@ -10,26 +10,24 @@
   <div class="flex gap-4">
     <button
       type="button"
-      class="w-1/2 aspect-square bg-light dark:bg-dark rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-primary dark:border dark:border-transparent"
+      class="aspect-square w-1/2 rounded-3xl border-[3px] border-immich-primary bg-light shadow-sm transition-all hover:shadow-xl dark:border dark:border-transparent dark:bg-dark"
       onclick={() => themeManager.setPreference(ThemePreference.Light)}
     >
-      <div
-        class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
-      >
+      <div class="flex size-full flex-col place-content-center place-items-center justify-around text-immich-primary">
         <Icon icon={sunPath} viewBox={sunViewBox} size="96" />
-        <p class="font-semibold text-4xl">{$t('light')}</p>
+        <p class="text-4xl font-semibold">{$t('light')}</p>
       </div>
     </button>
     <button
       type="button"
-      class="w-1/2 aspect-square bg-dark dark:bg-light rounded-3xl transition-all shadow-sm hover:shadow-xl dark:border-[3px] dark:border-immich-dark-primary border border-transparent"
+      class="aspect-square w-1/2 rounded-3xl border border-transparent bg-dark shadow-sm transition-all hover:shadow-xl dark:border-[3px] dark:border-immich-dark-primary dark:bg-light"
       onclick={() => themeManager.setPreference(ThemePreference.Dark)}
     >
       <div
-        class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
+        class="flex size-full flex-col place-content-center place-items-center justify-around text-immich-dark-primary"
       >
         <Icon icon={moonPath} viewBox={moonViewBox} size="96" />
-        <p class="font-semibold text-4xl">{$t('dark')}</p>
+        <p class="text-4xl font-semibold">{$t('dark')}</p>
       </div>
     </button>
   </div>
diff --git a/web/src/routes/auth/pin-prompt/+page.svelte b/web/src/routes/auth/pin-prompt/+page.svelte
index a0f8bdcc36..d6648889a8 100644
--- a/web/src/routes/auth/pin-prompt/+page.svelte
+++ b/web/src/routes/auth/pin-prompt/+page.svelte
@@ -40,7 +40,7 @@
 
 <AuthPageLayout withHeader={false}>
   <div class="flex items-center justify-center">
-    <div class="w-96 flex flex-col gap-6 items-center justify-center">
+    <div class="flex w-96 flex-col items-center justify-center gap-6">
       {#if hasPinCode}
         {#if isVerified}
           <div in:fade={{ duration: 200 }}>
@@ -59,7 +59,7 @@
         <div class="text-primary">
           <Icon icon={mdiLockSmart} size="64" />
         </div>
-        <p class="text-center text-sm mb-4" style="text-wrap: pretty;">
+        <p class="mb-4 text-center text-sm" style="text-wrap: pretty;">
           {$t('new_pin_code_subtitle')}
         </p>
         <PinCodeCreateForm showLabel={false} onCreated={() => (hasPinCode = true)} />
diff --git a/web/src/routes/maintenance/+page.svelte b/web/src/routes/maintenance/+page.svelte
index 6ff0044588..c5fbde28ec 100644
--- a/web/src/routes/maintenance/+page.svelte
+++ b/web/src/routes/maintenance/+page.svelte
@@ -41,7 +41,7 @@
   withHeader={$status?.action === MaintenanceAction.Start || $status?.action === MaintenanceAction.End}
   withBackdrop={$status?.action === MaintenanceAction.Start}
 >
-  <div class="flex flex-col place-items-center text-center gap-8">
+  <div class="flex flex-col place-items-center gap-8 text-center">
     {#if $status?.action === MaintenanceAction.RestoreDatabase}
       <Heading size="large" color="primary" tag="h1">{$t('maintenance_action_restore')}</Heading>
       {#if $status.error}
diff --git a/web/src/routes/maintenance/RestoreFlowDetectInstall.svelte b/web/src/routes/maintenance/RestoreFlowDetectInstall.svelte
index 623b5dae86..ef3e4c3a53 100644
--- a/web/src/routes/maintenance/RestoreFlowDetectInstall.svelte
+++ b/web/src/routes/maintenance/RestoreFlowDetectInstall.svelte
@@ -33,7 +33,7 @@
 
 <Heading size="large" color="primary" tag="h1">{$t('maintenance_restore_library')}</Heading>
 <Text>{$t('maintenance_restore_library_description')}</Text>
-<div class="bg-white dark:bg-black w-full m-4 p-6 rounded-xl border border-light-300">
+<div class="m-4 w-full rounded-xl border border-light-300 bg-white p-6 dark:bg-black">
   <Stack>
     {#if detectedInstall}
       {#each detectedInstall.storage as { folder, readable, writable } (folder)}
@@ -46,7 +46,7 @@
         {#if folder !== 'backups'}
           <HStack class="items-start">
             <Icon
-              class={`mt-1  ${files ? 'text-success' : folder === 'profile' || folder === 'upload' ? 'text-danger' : 'text-warning'}`}
+              class={`mt-1 ${files ? 'text-success' : folder === 'profile' || folder === 'upload' ? 'text-danger' : 'text-warning'}`}
               icon={files ? mdiCheck : folder === 'profile' || folder === 'upload' ? mdiClose : mdiAlert}
             />
             <Stack gap={0} class="items-start">
diff --git a/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte b/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte
index d8a3173275..debccc0355 100644
--- a/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte
+++ b/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <Heading size="large" color="primary" tag="h1">{$t('maintenance_restore_from_backup')}</Heading>
-<Scrollable class="max-h-120 bg-white dark:bg-black p-4 rounded-2xl border border-light-300 w-full">
+<Scrollable class="max-h-120 w-full rounded-2xl border border-light-300 bg-white p-4 dark:bg-black">
   <MaintenanceBackupsList {expectedVersion} />
 </Scrollable>
 <HStack>