From bc6fdb55398cb0ed0ad4a31ed10fe7efdd8d4cfe Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Thu, 8 Aug 2024 12:34:19 +0200
Subject: [PATCH] Fix hotspot tooltips in fullscreen viewer

Ensure floating ui portal is placed before fullscreen viewer but still
behind navigation bar outside of fullscreen viewer.

REDMINE-20673
---
 .../package/src/contentElements/hotspots/Hotspots.js        | 6 ++++--
 .../package/src/contentElements/hotspots/Tooltip.js         | 3 ++-
 entry_types/scrolled/package/src/frontend/global.module.css | 5 +++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js b/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js
index bc3492b1a..b8f1bb9d7 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js
@@ -62,14 +62,15 @@ export function Hotspots({contentElementId, contentElementWidth, customMargin, c
           contentElementWidth={contentElementWidth}
           configuration={configuration}
           displayFullscreenToggle={false}
-          keepTooltipsInViewport={true} />
+          keepTooltipsInViewport={true}
+          tooltipsAboveNavigationWidgets={true} />
       } />
   );
 }
 
 export function HotspotsImage({
   contentElementId, contentElementWidth, customMargin, configuration,
-  keepTooltipsInViewport, floatingStrategy,
+  keepTooltipsInViewport, floatingStrategy, tooltipsAboveNavigationWidgets,
   displayFullscreenToggle, onFullscreenEnter,
   children = children => children
 }) {
@@ -219,6 +220,7 @@ export function HotspotsImage({
                         (!panZoomEnabled && activeIndex < 0 && hoveredIndex === index)}
                active={activeIndex === index}
                keepInViewport={keepTooltipsInViewport}
+               aboveNavigationWidgets={tooltipsAboveNavigationWidgets}
                wrapperRef={contentRectRef}
                floatingStrategy={floatingStrategy}
                onMouseEnter={() => setHoveredIndex(index)}
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
index 532745923..222aa9bd4 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
@@ -43,6 +43,7 @@ export function Tooltip({
   area,
   contentElementId, portraitMode, configuration, visible, active,
   panZoomEnabled, imageFile, containerRect, keepInViewport, floatingStrategy,
+  aboveNavigationWidgets,
   wrapperRef,
   onMouseEnter, onMouseLeave, onClick, onDismiss,
 }) {
@@ -161,7 +162,7 @@ export function Tooltip({
              {...getReferenceProps()} />
       </CompositeItem>
       {isMounted &&
-       <TooltipPortal>
+       <TooltipPortal id={aboveNavigationWidgets && 'floating-ui-above-navigation-widgets'}>
          <FloatingFocusManager context={context} modal={false} initialFocus={-1} returnFocus={false}>
            <div style={transitionStyles}>
              <div ref={refs.setFloating}
diff --git a/entry_types/scrolled/package/src/frontend/global.module.css b/entry_types/scrolled/package/src/frontend/global.module.css
index 48c552d75..89886105e 100644
--- a/entry_types/scrolled/package/src/frontend/global.module.css
+++ b/entry_types/scrolled/package/src/frontend/global.module.css
@@ -24,3 +24,8 @@
   position: relative;
   z-index: 1000;
 }
+
+:global #floating-ui-above-navigation-widgets {
+  position: relative;
+  z-index: 20000;
+}