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/album-page/album-map.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { clickOutside } from '$lib/actions/click-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import type Map from '$lib/components/shared-components/map/map.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { timeToLoadTheMap } from '$lib/constants';
@@ -11,7 +10,7 @@
   import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
-  import { LoadingSpinner } from '@immich/ui';
+  import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -112,31 +111,33 @@
 
 {#if albumMapViewManager.isInMapView}
   <div use:clickOutside={{ onOutclick: closeMap }}>
-    <FullScreenModal title={$t('map')} width="wide" onClose={closeMap}>
-      <div class="flex flex-col w-full h-full gap-2">
-        <div class="h-[500px] min-h-[300px] w-full">
-          {#await import('../shared-components/map/map.svelte')}
-            {#await delay(timeToLoadTheMap) then}
-              <!-- show the loading spinner only if loading the map takes too much time -->
-              <div class="flex items-center justify-center h-full w-full">
-                <LoadingSpinner />
-              </div>
+    <Modal title={$t('map')} size="medium" onClose={closeMap}>
+      <ModalBody>
+        <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
+          <div class="h-[500px] min-h-[300px] w-full">
+            {#await import('../shared-components/map/map.svelte')}
+              {#await delay(timeToLoadTheMap) then}
+                <!-- show the loading spinner only if loading the map takes too much time -->
+                <div class="flex items-center justify-center h-full w-full">
+                  <LoadingSpinner />
+                </div>
+              {/await}
+            {:then { default: Map }}
+              <Map
+                bind:this={mapElement}
+                center={undefined}
+                {zoom}
+                clickable={false}
+                bind:mapMarkers
+                onSelect={onViewAssets}
+                showSettings={false}
+                rounded
+              />
             {/await}
-          {:then { default: Map }}
-            <Map
-              bind:this={mapElement}
-              center={undefined}
-              {zoom}
-              clickable={false}
-              bind:mapMarkers
-              onSelect={onViewAssets}
-              showSettings={false}
-              rounded
-            />
-          {/await}
+          </div>
         </div>
-      </div>
-    </FullScreenModal>
+      </ModalBody>
+    </Modal>
   </div>
 
   <Portal target="body">