diff --git a/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts b/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
index de769b00c9..6f986df84f 100644
--- a/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
+++ b/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
@@ -536,7 +536,7 @@ test.describe('Timeline', () => {
         force: false,
         ids: [assetToTrash.id],
       });
-      await page.getByLabel('Close').click();
+      await page.locator('#control-bar').getByLabel('Close').click();
       await page.getByText('Trash', { exact: true }).click();
       await timelineUtils.waitForTimelineLoad(page);
       await thumbnailUtils.expectInViewport(page, assetToTrash.id);
@@ -676,7 +676,7 @@ test.describe('Timeline', () => {
         ids: [assetToArchive.id],
       });
       await thumbnailUtils.expectThumbnailIsArchive(page, assetToArchive.id);
-      await page.getByLabel('Close').click();
+      await page.locator('#control-bar').getByLabel('Close').click();
       await page.getByRole('link').getByText('Archive').click();
       await timelineUtils.waitForTimelineLoad(page);
       await thumbnailUtils.expectInViewport(page, assetToArchive.id);
@@ -823,7 +823,7 @@ test.describe('Timeline', () => {
       });
       // ensure thumbnail still exists and has favorite icon
       await thumbnailUtils.expectThumbnailIsFavorite(page, assetToFavorite.id);
-      await page.getByLabel('Close').click();
+      await page.locator('#control-bar').getByLabel('Close').click();
       await page.getByRole('link').getByText('Favorites').click();
       await timelineUtils.waitForTimelineLoad(page);
       await pageUtils.goToAsset(page, assetToFavorite.fileCreatedAt);
diff --git a/web/src/lib/components/shared-components/ControlAppBar.svelte b/web/src/lib/components/shared-components/ControlAppBar.svelte
index 6626e4619e..eb021be775 100644
--- a/web/src/lib/components/shared-components/ControlAppBar.svelte
+++ b/web/src/lib/components/shared-components/ControlAppBar.svelte
@@ -17,7 +17,7 @@
   let { backIcon = mdiClose, class: className = '', onClose, title, leading, children, trailing }: Props = $props();
 </script>
 
-<div class={['absolute top-0 w-full bg-transparent p-2']}>
+<div class="absolute top-0 w-full bg-transparent p-2" id="control-bar">
   <ControlBar closeIcon={backIcon} {onClose} shape="round" class={className}>
     {#if title || leading}
       <ControlBarHeader>
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
index 7eaa73140c..ef671c399a 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
@@ -327,7 +327,7 @@
 />
 
 {#if assetMultiSelectManager.selectionActive}
-  <div class="sticky top-0 z-1 dark">
+  <div class="dark sticky top-0 z-1">
     <AssetSelectControlBar>
       {@const Actions = getAssetBulkActions($t)}
       <CreateSharedLink />
@@ -365,17 +365,15 @@
 
 <section
   id="memory-viewer"
-  class="dark w-full text-white bg-immich-dark-gray"
+  class="dark w-full bg-immich-dark-gray text-white"
   bind:this={memoryWrapper}
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
 >
   {#if current}
-    <div
-      class="max-md:h-auto max-md:flex-col dark grid grid-cols-[100%] md:grid-cols-[25%_50%_25%] px-2 py-2 md:px-4 md:py-4"
-    >
+    <div class="dark grid grid-cols-[100%] p-2 max-md:h-auto max-md:flex-col md:grid-cols-[25%_50%_25%] md:p-4">
       {#if current}
-        <div class="flex gap-2 md:gap-6 items-center">
+        <div class="flex items-center gap-2 md:gap-6">
           <IconButton
             shape="round"
             variant="ghost"