From e6ac48f4b5956df1e876f722a4b5ad13dcbd8aec Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 19 Feb 2026 16:03:46 -0500
Subject: [PATCH] refactor: app download modal (#26368)

---
 web/src/lib/modals/AppDownloadModal.svelte | 43 +++++++---------------
 1 file changed, 14 insertions(+), 29 deletions(-)

diff --git a/web/src/lib/modals/AppDownloadModal.svelte b/web/src/lib/modals/AppDownloadModal.svelte
index c78c45c324..9041def7be 100644
--- a/web/src/lib/modals/AppDownloadModal.svelte
+++ b/web/src/lib/modals/AppDownloadModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { appStoreBadge, fdroidBadge, Modal, ModalBody, playStoreBadge, Text } from '@immich/ui';
+  import { appStoreBadge, BasicModal, fdroidBadge, playStoreBadge } from '@immich/ui';
   import { t } from 'svelte-i18n';
   interface Props {
     onClose: () => void;
@@ -7,33 +7,18 @@
   let { onClose }: Props = $props();
 </script>
 
-<Modal title={$t('app_download_links')} size="large" {onClose}>
-  <ModalBody>
-    <div class="sm:grid sm:grid-cols-2 gap-5">
-      <div class="flex flex-col place-items-start">
-        <Text>Google Play</Text>
-        <a
-          href="https://play.google.com/store/apps/details?id=app.alextran.immich"
-          target="_blank"
-          id="play-store-link"
-        >
-          <img class="w-50 mt-2" alt="Get it on Google Play" src={playStoreBadge} />
-        </a>
-      </div>
+<BasicModal title={$t('app_download_links')} size="tiny" {onClose}>
+  <div class="flex flex-col gap-4 max-w-50 mx-auto">
+    <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} />
+    </a>
 
-      <div class="flex flex-col place-items-start">
-        <Text>App Store</Text>
-        <a href="https://apps.apple.com/us/app/immich/id1613945652" target="_blank" id="app-store-link">
-          <img class="w-50 mt-2" alt="Download on the App Store" src={appStoreBadge} />
-        </a>
-      </div>
+    <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} />
+    </a>
 
-      <div class="flex flex-col place-items-start">
-        <Text>F-Droid</Text>
-        <a href="https://f-droid.org/packages/app.alextran.immich/" target="_blank" id="fdroid-link">
-          <img class="w-50 mt-2" alt="Get it on F-Droid" src={fdroidBadge} />
-        </a>
-      </div>
-    </div>
-  </ModalBody>
-</Modal>
+    <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} />
+    </a>
+  </div>
+</BasicModal>