🐛 Fix tooltip height on safari

frontend/src/app/main/ui/ds/tooltip/tooltip.cljs

@@ -158,9 +158,14 @@
   (let [tooltip-brect (dom/get-bounding-rect tooltip)
         window-size   (dom/get-window-size)]
     (when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)]
-      (dom/set-css-property! tooltip "display" "grid")
+
-      (dom/set-css-property! tooltip "inset-block-start" (dm/str (:top placement-rect) "px"))
+      (let [height (if (or (= placement "right") (= placement "left"))
-      (dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px"))
+                     (- (:height placement-rect) arrow-height)
+                     (:height placement-rect))]
+        (dom/set-css-property! tooltip "display" "grid")
+        (dom/set-css-property! tooltip "block-size" (dm/str height "px"))
+        (dom/set-css-property! tooltip "inset-block-start" (dm/str (:top placement-rect) "px"))
+        (dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px")))
       placement)))
 
 (def ^:private schema:tooltip

frontend/src/app/main/ui/ds/tooltip/tooltip.scss

@@ -16,6 +16,7 @@ $arrow-side: 12px;
   background-color: transparent;
   overflow: hidden;
   inline-size: fit-content;
+  block-size: fit-content;
 }
 
 .tooltip-arrow {
@@ -145,6 +146,7 @@ $arrow-side: 12px;
   border: $b-1 solid var(--color-accent-primary-muted);
   padding: var(--sp-s) var(--sp-m);
   grid-area: content;
+  block-size: fit-content;
 }
 
 .tooltip-trigger {

frontend/src/app/main/ui/ds/tooltip/tooltip.stories.jsx

@@ -74,7 +74,7 @@ export const Corners = {
     >
       <Tooltip
         id="popover-example10"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           placeSelf: "start start",
           width: "fit-content",
@@ -85,7 +85,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example2"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "start",
           justifySelf: "center",
@@ -106,7 +106,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example3"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "start",
           justifySelf: "end",
@@ -118,7 +118,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example4"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "center",
           justifySelf: "start",
@@ -130,7 +130,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example5"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "center",
           justifySelf: "center",
@@ -142,7 +142,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example6"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "center",
           justifySelf: "end",
@@ -154,7 +154,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example7"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "end",
           justifySelf: "start",
@@ -166,7 +166,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example8"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "end",
           justifySelf: "center",
@@ -178,7 +178,7 @@ export const Corners = {
       </Tooltip>
       <Tooltip
         id="popover-example9"
-        content="This is the tooltip content, and must be shown in two lines."
+        content="This is the tooltip content, it's very long, and must be shown in three lines to check how it respond to different sizes."
         style={{
           alignSelf: "end",
           justifySelf: "end",