chore: consistent modal footer spacing (#19377)

web/package-lock.json

@@ -11,7 +11,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",
@@ -1333,9 +1333,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.22.7",
+      "version": "0.22.8",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.7.tgz",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.8.tgz",
-      "integrity": "sha512-FdA0RDSOO1IDSTQmCbW9u5yXFl59EHu++tYonDR/FEZUKrMwfmQEanePSW5g5KofdumKEuxBN1fWFym3NbB0jQ==",
+      "integrity": "sha512-DVhDgz6drx7vfNhAssX4yYgOC3JpLm8uovLvz3n36skCNU6pm8GoSgH6gMGTM36sx5go3fvhHw5N3KR+A/7bjg==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

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",

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

web/src/lib/modals/UserCreateModal.svelte

@@ -9,6 +9,7 @@
     Button,
     Field,
     HelperText,
+    HStack,
     Input,
     Modal,
     ModalBody,
@@ -131,10 +132,11 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
-      <Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form">{$t('create')}</Button
+      <Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form"
-      >
+        >{$t('create')}
-    </div>
+      </Button>
+    </HStack>
   </ModalFooter>
 </Modal>

web/src/lib/modals/UserEditModal.svelte

@@ -5,7 +5,7 @@
   import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, Field, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
+  import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
   import { mdiAccountEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -115,11 +115,11 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()}
         >{$t('cancel')}</Button
       >
       <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>

web/src/lib/modals/UserRestoreConfirmModal.svelte

@@ -2,7 +2,7 @@
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { restoreUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiDeleteRestore } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -35,13 +35,13 @@
   </ModalBody>
 
   <ModalFooter>
-    <div class="flex gap-3 w-full">
+    <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
         {$t('cancel')}
       </Button>
       <Button shape="round" color="primary" fullWidth onclick={() => handleRestoreUser()}>
         {$t('restore')}
       </Button>
-    </div>
+    </HStack>
   </ModalFooter>
 </Modal>

web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -191,10 +191,10 @@
     </ModalBody>
 
     <ModalFooter>
-      <div class="flex w-full gap-2">
+      <HStack fullWidth>
         <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
         <Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
-      </div>
+      </HStack>
     </ModalFooter>
   </Modal>
 {/if}
@@ -214,10 +214,10 @@
     </ModalBody>
 
     <ModalFooter>
-      <div class="flex w-full gap-2">
+      <HStack fullWidth>
         <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
         <Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
-      </div>
+      </HStack>
     </ModalFooter>
   </Modal>
 {/if}