From 3e734549c78e1e5b1517537541b4105ae2c39774 Mon Sep 17 00:00:00 2001
From: Felix Kling <felix@felix-kling.de>
Date: Tue, 13 Aug 2024 15:39:35 +0200
Subject: [PATCH] fix(svelte): Fix tooltip in hovercards (#64443)

Fixes srch-744

It seems that the code for testing whether the target element is part of
the layout didn't work in hovercards because it (possibly?) runs before
the hovercard is rendered.
Moving the logic to `onMount` + `await tick()` seem to work, although
that might still be a coincidence.

## Test plan

Hovering over the 'precise' badge shows the corresponding tooltip.
---
 client/web-sveltekit/src/lib/Tooltip.svelte | 27 ++++++++++++++++-----
 client/web-sveltekit/src/lib/dom.ts         | 18 +++++++++++---
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/client/web-sveltekit/src/lib/Tooltip.svelte b/client/web-sveltekit/src/lib/Tooltip.svelte
index 0cfe18ed2c3..c5b41f45bd8 100644
--- a/client/web-sveltekit/src/lib/Tooltip.svelte
+++ b/client/web-sveltekit/src/lib/Tooltip.svelte
@@ -5,7 +5,9 @@
 </script>
 
 <script lang="ts">
-    import { popover, portal, uniqueID } from './dom'
+    import { onMount, tick } from 'svelte'
+
+    import { type PopoverOptions, popover, portal, uniqueID } from './dom'
 
     /**
      * The content of the tooltip.
@@ -41,8 +43,24 @@
         shift: {
             padding: 4,
         },
+        onSize(element, { availableWidth, availableHeight }) {
+            Object.assign(element.style, {
+                maxWidth: `min(var(--tooltip-max-width), ${availableWidth}px)`,
+                maxHeight: `${availableHeight}px`,
+            })
+        },
+    } satisfies PopoverOptions
+
+    $: if (target && tooltip) {
+        target.setAttribute('aria-label', tooltip)
     }
-    $: {
+
+    onMount(async () => {
+        // We need to wait for the element to be rendered before we can check whether it
+        // is part of the layout.
+        // (this fixes and issue where the tooltip would not show up in hovercards)
+        await tick()
+
         let node = wrapper?.firstElementChild
         // Use `getClientRects` to check if the element is part of the layout.
         // For example, an element with `display: contents` will not be part of the layout.
@@ -54,10 +72,7 @@
         if (node) {
             target = node
         }
-    }
-    $: if (target && tooltip) {
-        target.setAttribute('aria-label', tooltip)
-    }
+    })
 </script>
 
 <!-- TODO: close tooltip on escape -->
diff --git a/client/web-sveltekit/src/lib/dom.ts b/client/web-sveltekit/src/lib/dom.ts
index d2d2fcd0abf..f7cda8aaf21 100644
--- a/client/web-sveltekit/src/lib/dom.ts
+++ b/client/web-sveltekit/src/lib/dom.ts
@@ -126,7 +126,7 @@ export const onClickOutside: Action<
     }
 }
 
-interface PopoverOptions {
+export interface PopoverOptions {
     /**
      * The placement of the popover relative to the reference element.
      */
@@ -146,6 +146,11 @@ interface PopoverOptions {
      * The middleware is always enabled.
      */
     flip?: FlipOptions
+    /**
+     * A callback to set the available width of the popover. The default behavior is
+     * to set the elements `maxWidth` and `maxHeight` style properties.
+     */
+    onSize?: (element: HTMLElement, size: { availableWidth: number; availableHeight: number }) => void
 }
 
 /**
@@ -166,10 +171,15 @@ export const popover: Action<HTMLElement, { reference: Element; options: Popover
             shift(options.shift),
             flip(options.flip),
             size({
-                apply({ availableWidth, availableHeight }) {
+                apply(dimensions) {
+                    if (options.onSize) {
+                        options.onSize(popover, dimensions)
+                        return
+                    }
+
                     Object.assign(popover.style, {
-                        maxWidth: `${availableWidth}px`,
-                        maxHeight: `${availableHeight}px`,
+                        maxWidth: `${dimensions.availableWidth}px`,
+                        maxHeight: `${dimensions.availableHeight}px`,
                     })
                 },
             })