From 28602499d0c2719290dcf129fc7c1947aade58d0 Mon Sep 17 00:00:00 2001 From: Kaloyan Manolov Date: Wed, 27 Aug 2025 13:57:54 +0300 Subject: [PATCH 1/4] fix: use more robust css selectors and add additional property to prevent tooltip overlay from breaking screen interactions --- src/views/preview/project-view.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/preview/project-view.scss b/src/views/preview/project-view.scss index 737128cabf7..928927dadd2 100644 --- a/src/views/preview/project-view.scss +++ b/src/views/preview/project-view.scss @@ -9,8 +9,9 @@ pointer-events: auto !important; } -.tooltip-set-thumbnail ~ .driver-overlay { +.driver-active:has(.tooltip-set-thumbnail) > .driver-overlay { z-index: -1 !important; + visibility: hidden; } .driver-popover.tooltip-set-thumbnail { From 49e43dc02e159aff7744dd0885dec0d921406d02 Mon Sep 17 00:00:00 2001 From: Kaloyan Manolov Date: Thu, 28 Aug 2025 10:56:17 +0300 Subject: [PATCH 2/4] fix: refrain from using css :has property to support older browsers --- src/views/preview/project-view.jsx | 3 ++- src/views/preview/project-view.scss | 11 +++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 2daf3e03371..89305589a8c 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -982,7 +982,8 @@ class Preview extends React.Component { } highlightSetThumbnailButton () { const highlightDriver = driver({ - popoverClass: 'driverjs-theme' + popoverClass: 'driverjs-theme', + stagePadding: 5 }); highlightDriver.highlight({ element: 'span[class*="stage-header_setThumbnailButton"]' diff --git a/src/views/preview/project-view.scss b/src/views/preview/project-view.scss index 928927dadd2..5bdd61e33d1 100644 --- a/src/views/preview/project-view.scss +++ b/src/views/preview/project-view.scss @@ -5,11 +5,18 @@ // directly, and since we have two driverjs instances in the component requiring // different behaviors (one acts like a tooltip, the other like a highlight), // we need to be specific. -.driver-active:has(.tooltip-set-thumbnail) * { +.driver-active * { pointer-events: auto !important; } -.driver-active:has(.tooltip-set-thumbnail) > .driver-overlay { +.driver-active .driver-overlay { + pointer-events: none !important; +} + +.driver-active:has(.tooltip-set-thumbnail) > .driver-overlay, +// In case the user's browser does not support has, at least try +// to depend on the sibling relationship. +.tooltip-set-thumbnail ~ .driver-overlay { z-index: -1 !important; visibility: hidden; } From 811d90f05da00674eb0b1225363bbfe05e624e12 Mon Sep 17 00:00:00 2001 From: Kaloyan Manolov Date: Thu, 28 Aug 2025 10:56:35 +0300 Subject: [PATCH 3/4] fix: ensure tooltip z-index is less than navbar --- src/views/preview/project-view.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/preview/project-view.scss b/src/views/preview/project-view.scss index 5bdd61e33d1..333d07e2249 100644 --- a/src/views/preview/project-view.scss +++ b/src/views/preview/project-view.scss @@ -26,7 +26,7 @@ background-color: $ui-blue; color: white; text-align: center; - z-index: 10; + z-index: 9; } .driver-popover.tooltip-set-thumbnail .driver-popover-title { From f242eebb015d7dfa4a686210f9646c0ece234b5d Mon Sep 17 00:00:00 2001 From: Kaloyan Manolov Date: Thu, 28 Aug 2025 13:21:59 +0300 Subject: [PATCH 4/4] fix: extract the tooltip overlay style fallback in a separate definition --- src/views/preview/project-view.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/views/preview/project-view.scss b/src/views/preview/project-view.scss index 333d07e2249..798832325b2 100644 --- a/src/views/preview/project-view.scss +++ b/src/views/preview/project-view.scss @@ -13,9 +13,17 @@ pointer-events: none !important; } -.driver-active:has(.tooltip-set-thumbnail) > .driver-overlay, -// In case the user's browser does not support has, at least try -// to depend on the sibling relationship. +.driver-active:has(.tooltip-set-thumbnail) > .driver-overlay { + z-index: -1 !important; + visibility: hidden; +} + +// Fallback to a more manual selector, in case the browser does not +// support :has(). This has the downside of depending on DOM order, +// but it should still work for the majority of cases. +// This code needs to be in a separate definition from the selector above - +// if we define it in the same place (e.g. separated by a comma), +// older browsers end up not applying the whole style. .tooltip-set-thumbnail ~ .driver-overlay { z-index: -1 !important; visibility: hidden;