chore: consistent modal footer spacing (#19377)

danieldietzler · web-flow · commit a5d84ba5526d · 2025-06-20T18:05:39.000Z
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.22.7",
+    "@immich/ui": "^0.22.8",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",
diff --git a/web/src/lib/modals/AlbumEditModal.svelte b/web/src/lib/modals/AlbumEditModal.svelte
@@ -2,7 +2,7 @@
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiRenameOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -68,9 +68,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-2 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/ApiKeyModal.svelte b/web/src/lib/modals/ApiKeyModal.svelte
@@ -5,7 +5,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
   import { Permission } from '@immich/sdk';
-  import { Button, Checkbox, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, Checkbox, HStack, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -219,9 +219,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
       <Button shape="round" type="submit" fullWidth form="api-key-form">{submitText}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/ApiKeySecretModal.svelte b/web/src/lib/modals/ApiKeySecretModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { copyToClipboard } from '$lib/utils';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -27,9 +27,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button>
       <Button shape="round" onclick={onClose} fullWidth>{$t('done')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/AssetTagModal.svelte b/web/src/lib/modals/AssetTagModal.svelte
@@ -2,7 +2,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { tagAssets } from '$lib/utils/asset-utils';
   import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiClose, mdiTag } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -99,9 +99,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex w-full gap-2">
+    <HStack fullWidth>
       <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte b/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiCancel } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -32,13 +32,13 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
         {$t('cancel')}
       </Button>
       <Button shape="round" color="danger" fullWidth onclick={() => onClose(true)}>
         {$t('confirm')}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/ConfirmModal.svelte b/web/src/lib/modals/ConfirmModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -38,13 +38,13 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
         {$t('cancel')}
       </Button>
       <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
         {confirmText}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/LibraryExclusionPatternModal.svelte b/web/src/lib/modals/LibraryExclusionPatternModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiFolderRemove } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -63,7 +63,7 @@
     </form>
   </ModalBody>
   <ModalFooter>
-    <div class="flex gap-2 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       {#if isEditing}
         <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}
@@ -73,6 +73,6 @@
       <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form">
         {submitText}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/LibraryImportPathModal.svelte b/web/src/lib/modals/LibraryImportPathModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -60,7 +60,7 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-2 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
       {#if isEditing}
         <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}>
@@ -70,6 +70,6 @@
       <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
         {submitText}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/LibraryRenameModal.svelte b/web/src/lib/modals/LibraryRenameModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiRenameOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -29,9 +29,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-2 w-full">
+    <HStack fullWidth>
       <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/LibraryUserPickerModal.svelte b/web/src/lib/modals/LibraryUserPickerModal.svelte
@@ -2,7 +2,7 @@
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import { user } from '$lib/stores/user.store';
   import { searchUsersAdmin } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -38,9 +38,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-2 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/MapSettingsModal.svelte b/web/src/lib/modals/MapSettingsModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import type { MapSettings } from '$lib/stores/preferences.store';
-  import { Button, Field, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui';
+  import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui';
   import { Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -127,9 +127,9 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button type="submit" shape="round" fullWidth form="map-settings-form">{$t('save')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/PasswordResetSuccessModal.svelte b/web/src/lib/modals/PasswordResetSuccessModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { copyToClipboard } from '$lib/utils';
-  import { Button, Code, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { Button, Code, HStack, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
   import { mdiCheck, mdiContentCopy } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -35,10 +35,10 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="primary" fullWidth onclick={() => onClose()}>
         {$t('done')}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/PersonEditBirthDateModal.svelte b/web/src/lib/modals/PersonEditBirthDateModal.svelte
@@ -5,7 +5,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiCake } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import DateInput from '../components/elements/date-input.svelte';
@@ -65,13 +65,13 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
         {$t('cancel')}
       </Button>
       <Button type="submit" shape="round" color="primary" fullWidth form="set-birth-date-form">
         {$t('save')}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/PersonMergeSuggestionModal.svelte b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
@@ -7,7 +7,7 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { mergePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiArrowLeft, mdiMerge } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -139,11 +139,11 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button fullWidth shape="round" color="secondary" onclick={() => onClose()}>{$t('no')}</Button>
       <Button id="merge-confirm-button" fullWidth shape="round" onclick={handleMergePerson}>
         {$t('yes')}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
@@ -34,7 +34,7 @@
   import { parseUtcDate } from '$lib/utils/date-time';
   import { generateId } from '$lib/utils/generate-id';
   import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiTune } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
@@ -204,11 +204,11 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}
         >{$t('clear_all')}</Button
       >
       <Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/SlideshowSettingsModal.svelte b/web/src/lib/modals/SlideshowSettingsModal.svelte
@@ -2,7 +2,7 @@
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import {
     mdiArrowDownThin,
     mdiArrowUpThin,
@@ -105,9 +105,9 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <div class="flex gap-2 w-full">
+    <HStack fullWidth>
       <Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>
diff --git a/web/src/lib/modals/UserCreateModal.svelte b/web/src/lib/modals/UserCreateModal.svelte
diff --git a/web/src/lib/modals/UserEditModal.svelte b/web/src/lib/modals/UserEditModal.svelte
diff --git a/web/src/lib/modals/UserRestoreConfirmModal.svelte b/web/src/lib/modals/UserRestoreConfirmModal.svelte
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
