chore: release v2.5.3

fix(docs): clarify supported vector version (#25753 )
clarify supported version
2026-02-01 09:44:47 -08:00 · 2026-01-31 16:48:41 +00:00 · 2026-01-31 11:46:51 -05:00 · 2026-01-30 16:17:03 +00:00
34 changed files with 168 additions and 135 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,33 @@
+
+# v2.5.3
+
+## Highlights
+
+{{RELEASE HIGHLIGHTS}}
+
+As always, please consider supporting the project.
+
+🎉 Cheers! 🎉
+
+
+----
+
+And as always, bugs are fixed, and many other improvements also come with this release.
+
+<!-- Release notes generated using configuration in .github/release.yml at main -->
+
+## What's Changed
+### 🐛 Bug fixes
+* chore: remove random code snippet by @jrasm91 in https://github.com/immich-app/immich/pull/25677
+* fix: reset and unsaved change states in editor by @bwees in https://github.com/immich-app/immich/pull/25588
+* fix: no notification if release check is disabled by @jrasm91 in https://github.com/immich-app/immich/pull/25688
+* fix(mobile): hide latest version if disabled by @uhthomas in https://github.com/immich-app/immich/pull/25691
+### 📚 Documentation
+* docs(openapi): Add descriptions to OpenAPI specification by @timonrieger in https://github.com/immich-app/immich/pull/25185
+* fix(docs): clarify supported vector version  by @mmomjian in https://github.com/immich-app/immich/pull/25753
+
+
+**Full Changelog**: https://github.com/immich-app/immich/compare/v2.5.2...v2.5.3
+
+---
+
--- a/cli/package.json
+++ b/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@immich/cli",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "description": "Command Line Interface (CLI) for Immich",
  "type": "module",
  "exports": "./dist/index.js",
--- a/docs/docs/administration/postgres-standalone.md
+++ b/docs/docs/administration/postgres-standalone.md
@@ -88,7 +88,7 @@ The easiest option is to have both extensions installed during the migration:
 <details>
 <summary>Migration steps (automatic)</summary>
 1. Ensure you still have pgvecto.rs installed
-2. Install `pgvector` (`>= 0.7.0, < 1.0.0`). The easiest way to do this is on Debian/Ubuntu by adding the [PostgreSQL Apt repository][pg-apt] and then running `apt install postgresql-NN-pgvector`, where `NN` is your Postgres version (e.g., `16`)
+2. Install `pgvector` (`>= 0.7, < 0.9`). The easiest way to do this is on Debian/Ubuntu by adding the [PostgreSQL Apt repository][pg-apt] and then running `apt install postgresql-NN-pgvector`, where `NN` is your Postgres version (e.g., `16`)
 3. [Install VectorChord][vchord-install]
 4. Add `shared_preload_libraries= 'vchord.so, vectors.so'` to your `postgresql.conf`, making sure to include _both_ `vchord.so` and `vectors.so`. You may include other libraries here as well if needed
 5. Restart the Postgres database
--- a/docs/static/archived-versions.json
+++ b/docs/static/archived-versions.json
@@ -1,7 +1,7 @@
 [
  {
-    "label": "v2.5.2",
-    "url": "https://docs.v2.5.2.archive.immich.app"
+    "label": "v2.5.3",
+    "url": "https://docs.v2.5.3.archive.immich.app"
  },
  {
    "label": "v2.4.1",
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -1,6 +1,6 @@
 {
  "name": "immich-e2e",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "description": "",
  "main": "index.js",
  "type": "module",
--- a/i18n/package.json
+++ b/i18n/package.json
@@ -1,6 +1,6 @@
 {
  "name": "immich-i18n",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "private": true,
  "scripts": {
    "format": "prettier --check .",
--- a/machine-learning/pyproject.toml
+++ b/machine-learning/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "immich-ml"
-version = "2.5.2"
+version = "2.5.3"
 description = ""
 authors = [{ name = "Hau Tran", email = "alex.tran1502@gmail.com" }]
 requires-python = ">=3.11,<4.0"
--- a/machine-learning/uv.lock
+++ b/machine-learning/uv.lock
@@ -919,7 +919,7 @@ wheels = [

 [[package]]
 name = "immich-ml"
-version = "2.5.2"
+version = "2.5.3"
 source = { editable = "." }
 dependencies = [
    { name = "aiocache" },
--- a/mobile/android/fastlane/Fastfile
+++ b/mobile/android/fastlane/Fastfile
@@ -35,8 +35,8 @@ platform :android do
      task: 'bundle', 
      build_type: 'Release',
      properties: {
-        "android.injected.version.code" => 3033,
-        "android.injected.version.name" => "2.5.2",
+        "android.injected.version.code" => 3034,
+        "android.injected.version.name" => "2.5.3",
      }
    )
    upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')
--- a/mobile/ios/Runner/Info.plist
+++ b/mobile/ios/Runner/Info.plist
@@ -80,7 +80,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.5.2</string>
+	<string>2.5.3</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
--- a/mobile/lib/models/server_info/server_info.model.dart
+++ b/mobile/lib/models/server_info/server_info.model.dart
@@ -20,7 +20,7 @@ enum VersionStatus {

 class ServerInfo {
  final ServerVersion serverVersion;
-  final ServerVersion latestVersion;
+  final ServerVersion? latestVersion;
  final ServerFeatures serverFeatures;
  final ServerConfig serverConfig;
  final ServerDiskInfo serverDiskInfo;
--- a/mobile/lib/providers/server_info.provider.dart
+++ b/mobile/lib/providers/server_info.provider.dart
@@ -15,7 +15,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
    : super(
        const ServerInfo(
          serverVersion: ServerVersion(major: 0, minor: 0, patch: 0),
-          latestVersion: ServerVersion(major: 0, minor: 0, patch: 0),
+          latestVersion: null,
          serverFeatures: ServerFeatures(map: true, trash: true, oauthEnabled: false, passwordLogin: true),
          serverConfig: ServerConfig(
            trashDays: 30,
@@ -43,7 +43,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
    try {
      final serverVersion = await _serverInfoService.getServerVersion();

-      // using isClientOutOfDate since that will show to users reguardless of if they are an admin
+      // using isClientOutOfDate since that will show to users regardless of if they are an admin
      if (serverVersion == null) {
        state = state.copyWith(versionStatus: VersionStatus.error);
        return;
@@ -76,7 +76,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
    state = state.copyWith(versionStatus: VersionStatus.upToDate);
  }

-  handleReleaseInfo(ServerVersion serverVersion, ServerVersion latestVersion) {
+  handleReleaseInfo(ServerVersion serverVersion, ServerVersion? latestVersion) {
    // Update local server version
    _checkServerVersionMismatch(serverVersion, latestVersion: latestVersion);
  }
--- a/mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart
+++ b/mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart
@@ -170,50 +170,52 @@ class AppBarServerInfo extends HookConsumerWidget {
                  ),
                ],
              ),
-              const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Expanded(
-                    child: Padding(
-                      padding: const EdgeInsets.only(left: 10.0),
-                      child: Row(
-                        children: [
-                          if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
-                            const Padding(
-                              padding: EdgeInsets.only(right: 5.0),
-                              child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
+              if (serverInfoState.latestVersion != null) ...[
+                const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Expanded(
+                      child: Padding(
+                        padding: const EdgeInsets.only(left: 10.0),
+                        child: Row(
+                          children: [
+                            if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
+                              const Padding(
+                                padding: EdgeInsets.only(right: 5.0),
+                                child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
+                              ),
+                            Text(
+                              "latest_version".tr(),
+                              style: TextStyle(
+                                fontSize: titleFontSize,
+                                color: context.textTheme.labelSmall?.color,
+                                fontWeight: FontWeight.w500,
+                              ),
                            ),
-                          Text(
-                            "latest_version".tr(),
-                            style: TextStyle(
-                              fontSize: titleFontSize,
-                              color: context.textTheme.labelSmall?.color,
-                              fontWeight: FontWeight.w500,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                  Expanded(
-                    flex: 0,
-                    child: Padding(
-                      padding: const EdgeInsets.only(right: 10.0),
-                      child: Text(
-                        serverInfoState.latestVersion.major > 0
-                            ? "${serverInfoState.latestVersion.major}.${serverInfoState.latestVersion.minor}.${serverInfoState.latestVersion.patch}"
-                            : "--",
-                        style: TextStyle(
-                          fontSize: contentFontSize,
-                          color: context.colorScheme.onSurfaceSecondary,
-                          fontWeight: FontWeight.bold,
+                          ],
                        ),
                      ),
                    ),
-                  ),
-                ],
-              ),
+                    Expanded(
+                      flex: 0,
+                      child: Padding(
+                        padding: const EdgeInsets.only(right: 10.0),
+                        child: Text(
+                          serverInfoState.latestVersion!.major > 0
+                              ? "${serverInfoState.latestVersion!.major}.${serverInfoState.latestVersion!.minor}.${serverInfoState.latestVersion!.patch}"
+                              : "--",
+                          style: TextStyle(
+                            fontSize: contentFontSize,
+                            color: context.colorScheme.onSurfaceSecondary,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
            ],
          ),
        ),
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@@ -3,7 +3,7 @@ Immich API

 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:

- API version: 2.5.2
+- API version: 2.5.3
 - Generator version: 7.8.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen

--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone

 publish_to: 'none'
-version: 2.5.2+3033
+version: 2.5.3+3034

 environment:
  sdk: '>=3.8.0 <4.0.0'
--- a/open-api/immich-openapi-specs.json
+++ b/open-api/immich-openapi-specs.json
@@ -15057,7 +15057,7 @@
  "info": {
    "title": "Immich",
    "description": "Immich API",
-    "version": "2.5.2",
+    "version": "2.5.3",
    "contact": {}
  },
  "tags": [
--- a/open-api/typescript-sdk/package.json
+++ b/open-api/typescript-sdk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@immich/sdk",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "description": "Auto-generated TypeScript SDK for the Immich API",
  "type": "module",
  "main": "./build/index.js",
--- a/open-api/typescript-sdk/src/fetch-client.ts
+++ b/open-api/typescript-sdk/src/fetch-client.ts
@@ -1,6 +1,6 @@
 /**
 * Immich
- * 2.5.2
+ * 2.5.3
 * DO NOT MODIFY - This file has been generated using oazapfts.
 * See https://www.npmjs.com/package/oazapfts
 */
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "immich-monorepo",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "description": "Monorepo for Immich",
  "private": true,
  "packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48",
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "immich",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "description": "",
  "author": "",
  "private": true,
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "immich-web",
-  "version": "2.5.2",
+  "version": "2.5.3",
  "license": "GNU Affero General Public License version 3",
  "type": "module",
  "scripts": {
--- a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
@@ -5,6 +5,7 @@
  import { changePinCode } from '@immich/sdk';
  import { Button, Heading, modalManager, Text, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';

  let currentPinCode = $state('');
  let newPinCode = $state('');
@@ -37,23 +38,27 @@
  };
 </script>

-<form autocomplete="off" onsubmit={handleSubmit}>
-  <div class="flex flex-col gap-6 place-items-center place-content-center">
-    <Heading>{$t('change_pin_code')}</Heading>
-    <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
-    <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
-    <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
-    <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
-      <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
-    </button>
-  </div>
+<section class="my-4">
+  <div in:fade={{ duration: 200 }}>
+    <form autocomplete="off" onsubmit={handleSubmit} class="mt-6">
+      <div class="flex flex-col gap-6 place-items-center place-content-center">
+        <Heading>{$t('change_pin_code')}</Heading>
+        <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
+        <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
+        <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
+        <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
+          <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
+        </button>
+      </div>

-  <div class="flex justify-end gap-2 mt-4">
-    <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
-      {$t('clear')}
-    </Button>
-    <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
-      {$t('save')}
-    </Button>
+      <div class="flex justify-end gap-2 mt-4">
+        <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
+          {$t('clear')}
+        </Button>
+        <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
+          {$t('save')}
+        </Button>
+      </div>
+    </form>
  </div>
-</form>
+</section>
--- a/web/src/lib/components/user-settings-page/PinCodeSettings.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeSettings.svelte
@@ -20,7 +20,7 @@

 <OnEvents {onUserPinCodeReset} />

-<section class="my-4 sm:ms-8">
+<section>
  {#if hasPinCode}
    <div in:fade={{ duration: 200 }}>
      <PinCodeChangeForm />
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -59,7 +59,7 @@

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex flex-col gap-6">
+    <div class="ms-8 mt-4 flex flex-col gap-6">
      <Field label={$t('theme_selection')} description={$t('theme_selection_description')}>
        <Switch checked={themeManager.theme.system} onCheckedChange={(checked) => themeManager.setSystem(checked)} />
      </Field>
--- a/web/src/lib/components/user-settings-page/change-password-settings.svelte
+++ b/web/src/lib/components/user-settings-page/change-password-settings.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="ms-4 mt-4 flex flex-col gap-4">
        <Field label={$t('password')} required>
          <PasswordInput bind:value={password} autocomplete="current-password" />
        </Field>
--- a/web/src/lib/components/user-settings-page/device-list.svelte
+++ b/web/src/lib/components/user-settings-page/device-list.svelte
@@ -3,7 +3,6 @@
  import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
  import { Button, modalManager, Text, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
  import DeviceCard from './device-card.svelte';

  interface Props {
@@ -51,39 +50,33 @@
 </script>

 <section class="my-4">
-  <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex flex-col gap-4">
-      {#if currentSession}
-        <div class="mb-6">
-          <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
-            {$t('current_device')}
-          </Text>
-          <DeviceCard session={currentSession} />
-        </div>
-      {/if}
-      {#if otherSessions.length > 0}
-        <div class="mb-6">
-          <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
-            {$t('other_devices')}
-          </Text>
-          {#each otherSessions as session, index (session.id)}
-            <DeviceCard {session} onDelete={() => handleDelete(session)} />
-            {#if index !== otherSessions.length - 1}
-              <hr class="my-3" />
-            {/if}
-          {/each}
-        </div>
-
-        <div class="my-3">
-          <hr />
-        </div>
-
-        <div class="flex justify-end">
-          <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}
-            >{$t('log_out_all_devices')}</Button
-          >
-        </div>
-      {/if}
+  {#if currentSession}
+    <div class="mb-6">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
+        {$t('current_device')}
+      </Text>
+      <DeviceCard session={currentSession} />
    </div>
-  </div>
+  {/if}
+  {#if otherSessions.length > 0}
+    <div class="mb-6">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
+        {$t('other_devices')}
+      </Text>
+      {#each otherSessions as session, index (session.id)}
+        <DeviceCard {session} onDelete={() => handleDelete(session)} />
+        {#if index !== otherSessions.length - 1}
+          <hr class="my-3" />
+        {/if}
+      {/each}
+    </div>
+
+    <div class="my-3">
+      <hr />
+    </div>
+
+    <div class="flex justify-end">
+      <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
+    </div>
+  {/if}
 </section>
--- a/web/src/lib/components/user-settings-page/download-settings.svelte
+++ b/web/src/lib/components/user-settings-page/download-settings.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-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingInputField
          inputType={SettingInputFieldType.NUMBER}
          label={$t('archive_size')}
--- a/web/src/lib/components/user-settings-page/feature-settings.svelte
+++ b/web/src/lib/components/user-settings-page/feature-settings.svelte
@@ -67,9 +67,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="ms-4 mt-4 flex flex-col">
        <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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('albums_default_sort_order')} description={$t('albums_default_sort_order_description')}>
              <Select
                options={[
@@ -83,7 +83,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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={foldersEnabled} />
            </Field>
@@ -97,7 +97,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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={memoriesEnabled} />
            </Field>
@@ -109,7 +109,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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={peopleEnabled} />
            </Field>
@@ -123,7 +123,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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={ratingsEnabled} />
            </Field>
@@ -131,7 +131,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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={sharedLinksEnabled} />
            </Field>
@@ -145,7 +145,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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={tagsEnabled} />
            </Field>
@@ -159,7 +159,7 @@
        </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="ms-4 mt-6 flex flex-col gap-4">
            <Field label={$t('gcast_enabled')} description={$t('gcast_enabled_description')}>
              <Switch bind:checked={gCastEnabled} />
            </Field>
--- a/web/src/lib/components/user-settings-page/notifications-settings.svelte
+++ b/web/src/lib/components/user-settings-page/notifications-settings.svelte
@@ -42,7 +42,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="ms-4 mt-4 flex flex-col gap-6">
        <Field label={$t('enable')} description={$t('notification_toggle_setting_description')}>
          <Switch bind:checked={emailNotificationsEnabled} />
        </Field>
--- a/web/src/lib/components/user-settings-page/oauth-settings.svelte
+++ b/web/src/lib/components/user-settings-page/oauth-settings.svelte
@@ -45,7 +45,7 @@

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex justify-end">
+    <div class="flex justify-end">
      {#if loading}
        <div class="flex place-content-center place-items-center">
          <LoadingSpinner />
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.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" 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}
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.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="ms-4 mt-4 flex flex-col gap-4">
        <Field label={$t('user_id')} disabled>
          <Input bind:value={editedUser.id} />
        </Field>
--- a/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
@@ -105,7 +105,7 @@
 </script>

 <section class="my-4">
-  <div class="sm:ms-8" in:fade={{ duration: 500 }}>
+  <div in:fade={{ duration: 500 }}>
    {#if $isPurchased}
      <!-- BADGE TOGGLE -->
      <div class="mb-4">
--- a/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
+++ b/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
@@ -65,7 +65,7 @@
  </TableRow>
 {/snippet}

-<section class="my-4 w-full">
+<section class="my-6 w-full">
  <Heading size="tiny">{$t('photos_and_videos')}</Heading>
  <Table striped spacing="small" class="mt-4" size="small">
    <TableHeader>