From 008fb2db41eb9ba946151d396fc3ed8d4ccda720 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Mon, 16 Sep 2024 12:14:51 -0400
Subject: [PATCH] wip: add portal so modals show on Safari in detail panel

---
 .../asset-viewer/detail-panel-tags.svelte         |  5 ++++-
 .../components/asset-viewer/detail-panel.svelte   | 15 +++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel-tags.svelte b/web/src/lib/components/asset-viewer/detail-panel-tags.svelte
index 434682f73e..449f61183f 100644
--- a/web/src/lib/components/asset-viewer/detail-panel-tags.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel-tags.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { AppRoute } from '$lib/constants';
   import { isSharedLink } from '$lib/utils';
   import { removeTag, tagAssets } from '$lib/utils/asset-utils';
@@ -76,5 +77,7 @@
 {/if}
 
 {#if isOpen}
-  <TagAssetForm onTag={(tagsIds) => handleTag(tagsIds)} onCancel={handleCancel} />
+  <Portal>
+    <TagAssetForm onTag={(tagsIds) => handleTag(tagsIds)} onCancel={handleCancel} />
+  </Portal>
 {/if}
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 5dc4fc0812..75720b90af 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -44,6 +44,7 @@
   import { t } from 'svelte-i18n';
   import { goto } from '$app/navigation';
   import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -332,12 +333,14 @@
           })
         : DateTime.now()}
       {@const assetTimeZoneOriginal = asset.exifInfo?.timeZone ?? ''}
-      <ChangeDate
-        initialDate={assetDateTimeOriginal}
-        initialTimeZone={assetTimeZoneOriginal}
-        on:confirm={({ detail: date }) => handleConfirmChangeDate(date)}
-        on:cancel={() => (isShowChangeDate = false)}
-      />
+      <Portal>
+        <ChangeDate
+          initialDate={assetDateTimeOriginal}
+          initialTimeZone={assetTimeZoneOriginal}
+          on:confirm={({ detail: date }) => handleConfirmChangeDate(date)}
+          on:cancel={() => (isShowChangeDate = false)}
+        />
+      </Portal>
     {/if}
 
     {#if asset.exifInfo?.fileSizeInByte}