Do not contrain hotspot tooltips to wrapper in fullscreen mode

REDMINE-20673
codevise · Aug 9, 2024 · c814aee · c814aee
1 parent 96fb09b
commit c814aee
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
@@ -82,11 +82,17 @@ export function Tooltip({
     placement: position === 'above' ? 'top' : 'bottom',
     middleware: [
       offset(referenceType === 'area' ? 7 : 20),
-      shift({
-        crossAxis: keepInViewport,
-        padding: {left: -5, right: -5},
-        boundary: wrapperRef.current,
-      }),
+      shift(
+        keepInViewport ?
+        {
+          crossAxis: true,
+          padding: {left: 40, right: 40}
+        } :
+        {
+          padding: {left: -5, right: -5},
+          boundary: wrapperRef.current
+        }
+      ),
       keepInViewport && flip(),
       arrow({
         element: arrowRef,
@@ -172,6 +178,7 @@ export function Tooltip({
                                         styles[`align-${area.tooltipTextAlign}`],
                                         light ? styles.light : styles.dark,
                                         {[styles.editable]: isEditable,
+                                         [styles.paddingForScrollButtons]: keepInViewport,
                                          [styles.minWidth]: presentOrEditing('link')})}
                   onMouseEnter={onMouseEnter}
                   onMouseLeave={onMouseLeave}

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css
@@ -31,7 +31,12 @@
   padding: 0.75rem;
   border-radius: 5px;
   --max-width: 400px;
-  max-width: min(100% - 16% + 10px, var(--max-width));
+  --floating-padding: 8% - 5px;
+  max-width: min(100% - 2 * var(--floating-padding), var(--max-width));
+}
+
+.paddingForScrollButtons {
+  --floating-padding: 40px;
 }
 
 .light {