3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-16 15:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix tooltip height on safari

Browse source
This commit is contained in:
Eva Marco 2025-06-16 14:39:59 +02:00 • committed by Andrey Antukh
parent f7e94accc3
commit 691a67b595
3 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
View file

@ -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)]
(let [height (if (or (= placement "right") (= placement "left"))
(- (: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"))
(dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px")))
placement)))
(def ^:private schema:tooltip

2
frontend/src/app/main/ui/ds/tooltip/tooltip.scss
View file

@ -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 {

18
frontend/src/app/main/ui/ds/tooltip/tooltip.stories.jsx
View file

@ -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",