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/shared-components/version-announcement-box.svelte

@@ -2,9 +2,8 @@
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import { websocketStore } from '$lib/stores/websocket';
   import type { ServerVersionResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import FullScreenModal from './full-screen-modal.svelte';
 
   let showModal = $state(false);
 
@@ -39,33 +38,38 @@
 </script>
 
 {#if showModal}
-  <FullScreenModal title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)}>
-    <div>
-      <FormatMessage key="version_announcement_message">
-        {#snippet children({ tag, message })}
-          {#if tag === 'link'}
-            <span class="font-medium underline">
-              <a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer">
-                {message}
-              </a>
-            </span>
-          {:else if tag === 'code'}
-            <code>{message}</code>
-          {/if}
-        {/snippet}
-      </FormatMessage>
-    </div>
+  <Modal size="small" title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)} icon={false}>
+    <ModalBody>
+      <div>
+        <FormatMessage key="version_announcement_message">
+          {#snippet children({ tag, message })}
+            {#if tag === 'link'}
+              <span class="font-medium underline">
+                <a
+                  href="https://github.com/immich-app/immich/releases/latest"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {message}
+                </a>
+              </span>
+            {:else if tag === 'code'}
+              <code>{message}</code>
+            {/if}
+          {/snippet}
+        </FormatMessage>
+      </div>
 
-    <div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
+      <div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
 
-    <div class="font-sm mt-8">
-      <code>{$t('server_version')}: {serverVersion}</code>
-      <br />
-      <code>{$t('latest_version')}: {releaseVersion}</code>
-    </div>
-
-    {#snippet stickyBottom()}
+      <div class="font-sm mt-8">
+        <code>{$t('server_version')}: {serverVersion}</code>
+        <br />
+        <code>{$t('latest_version')}: {releaseVersion}</code>
+      </div>
+    </ModalBody>
+    <ModalFooter>
       <Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
-    {/snippet}
-  </FullScreenModal>
+    </ModalFooter>
+  </Modal>
 {/if}