From 99aef4b60fb3ad433093d6381181b1e6dd4f58b3 Mon Sep 17 00:00:00 2001 From: emma Date: Thu, 29 May 2025 17:59:51 -0400 Subject: [PATCH 1/2] target correct tooltip body element --- frontend/src/components/ui/popover.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ui/popover.ts b/frontend/src/components/ui/popover.ts index c1f97da134..86b30f85bb 100644 --- a/frontend/src/components/ui/popover.ts +++ b/frontend/src/components/ui/popover.ts @@ -40,7 +40,7 @@ export class Popover extends SlTooltip { --sl-tooltip-line-height: var(--sl-line-height-dense); } - ::part(body) { + .tooltip__body { border: var(--btrix-border); box-shadow: var(--sl-shadow-small), var(--sl-shadow-large); } From c4be3fdd11b6b3a0d726d3d3f3f03bf2694aab3a Mon Sep 17 00:00:00 2001 From: emma Date: Thu, 29 May 2025 18:00:45 -0400 Subject: [PATCH 2/2] use rendered placement attribute instead of intended placement attr this ensures the arrow border correctly switches when a tooltip flips to another side --- frontend/src/components/ui/popover.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/ui/popover.ts b/frontend/src/components/ui/popover.ts index 86b30f85bb..e9e88a64fd 100644 --- a/frontend/src/components/ui/popover.ts +++ b/frontend/src/components/ui/popover.ts @@ -49,23 +49,23 @@ export class Popover extends SlTooltip { z-index: 1; } - [placement^="bottom"]::part(arrow), - [placement^="left"]::part(arrow) { + [data-current-placement^="bottom"]::part(arrow), + [data-current-placement^="left"]::part(arrow) { border-top: var(--btrix-border); } - [placement^="bottom"]::part(arrow), - [placement^="right"]::part(arrow) { + [data-current-placement^="bottom"]::part(arrow), + [data-current-placement^="right"]::part(arrow) { border-left: var(--btrix-border); } - [placement^="top"]::part(arrow), - [placement^="right"]::part(arrow) { + [data-current-placement^="top"]::part(arrow), + [data-current-placement^="right"]::part(arrow) { border-bottom: var(--btrix-border); } - [placement^="top"]::part(arrow), - [placement^="left"]::part(arrow) { + [data-current-placement^="top"]::part(arrow), + [data-current-placement^="left"]::part(arrow) { border-right: var(--btrix-border); } `,