chore: tailwindcss v4 and z-war clean up (#18358)

* chore: styling tweak

* replace full-screen-modal, update docs

* scrubber

* fix: control app bar in memory viewer

* face lift

* pr feedback

* clean up

web/src/lib/components/forms/library-import-path-form.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Button } from '@immich/ui';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -46,29 +45,33 @@
   };
 </script>
 
-<FullScreenModal {title} icon={mdiFolderSync} onClose={onCancel}>
-  <form {onsubmit} autocomplete="off" id="library-import-path-form">
-    <p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
+<Modal {title} icon={mdiFolderSync} onClose={onCancel} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="library-import-path-form">
+      <p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
 
-    <div class="my-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="path">{$t('path')}</label>
-      <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
-    </div>
+      <div class="my-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="path">{$t('path')}</label>
+        <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
+      </div>
 
-    <div class="mt-8 flex w-full gap-4">
-      {#if isDuplicate}
-        <p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
+      <div class="mt-8 flex w-full gap-4">
+        {#if isDuplicate}
+          <p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
+        {/if}
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-2 w-full">
+      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
+      {#if isEditing}
+        <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
       {/if}
+      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
+        >{submitText}</Button
+      >
     </div>
-  </form>
-
-  {#snippet stickyBottom()}
-    <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
-    {#if isEditing}
-      <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
-    {/if}
-    <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
-      >{submitText}</Button
-    >
-  {/snippet}
-</FullScreenModal>
+  </ModalFooter>
+</Modal>