fix stacking and image sizing

Author: haschek

src/components/VisualTour/VisualTour.tsx

@@ -189,7 +189,6 @@ const StepContent = ({ step }: { step: VisualTourStep }) => {
                 <>
                     <img
                         src={step.image}
-                        style={{ height: "auto", width: "auto", maxHeight: "30vh", maxWidth: "100%" }}
                     />
                     <Spacing size="small" />
                 </>
@@ -210,6 +209,7 @@ const StepModal = ({ step, titleOption, onClose, actionButtons }: StepModalProps
             onClose={onClose}
             actions={actionButtons}
             size={step.size === "medium" ? "regular" : step.size ?? "regular"}
+            overlayClassName={`${eccgui}-visual-tour__dialog`}
         >
             <StepContent step={step} />
         </SimpleDialog>
@@ -287,7 +287,7 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
                     data-popper-arrow
                     aria-hidden
                 />
-                <div className={BlueprintClasses.POPOVER_CONTENT}>
+                <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-visual-tour__overlay__content`}>
                     <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
                         <CardHeader>
                             <CardTitle>{step.title}</CardTitle>

src/components/VisualTour/visualTour.scss

@@ -7,6 +7,10 @@
 .#{$eccgui}-visual-tour__highlighted-element {
     position: relative;
     z-index: 999999 !important;
+
+    .#{$eccgui}-overviewitem__actions--hiddeninteractions:has(&) {
+        display: inherit;
+    }
 }
 
 .#{$eccgui}-visual-tour__focushelper {
@@ -15,6 +19,7 @@
     border: 2px solid $eccgui-color-accent;
     border-radius: var(--#{$eccgui}-visual-tour-focus-padding);
     box-shadow: 0 0 0 10000px $eccgui-color-modal-backdrop;
+    z-index: 8001; // 1 over application header
 }
 
 .#{$eccgui}-visual-tour__backdrop {
@@ -44,6 +49,7 @@
 }
 
 .#{$eccgui}-visual-tour__overlay {
+    z-index: 8002; // 2 over application header
     &--small {
         @extend .#{$eccgui}-tooltip--small;
     }
@@ -56,3 +62,17 @@
         @extend .#{$eccgui}-tooltip--large;
     }
 }
+
+.#{$eccgui}-card__content {
+    .#{$eccgui}-visual-tour__overlay_content &,
+    .#{$eccgui}-visual-tour__dialog & {
+        img {
+            width: auto;
+            height: auto;
+            max-width: 100%;
+            max-height: 100%;
+            display: block;
+            margin: 0 auto;
+        }
+    }
+}