fix(ui): Correct tooltip/hovercard z-index

relative-ci · Feb 8, 2024 · d0662d8 · d0662d8
1 parent 44205f9
commit d0662d8
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 7 deletions.
diff --git a/packages/ui/src/css/default.css b/packages/ui/src/css/default.css
@@ -63,8 +63,3 @@ a:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
-
-.__reakit-portal {
-  z-index: var(--layer-xhigh);
-  position: relative;
-}
diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css
@@ -185,6 +185,7 @@
   --layer: 100;
   --layer-high: 1000;
   --layer-xhigh: 10000;
+  --layer-xxhigh: 100000;
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);

diff --git a/packages/ui/src/ui/hover-card/hover-card.module.css b/packages/ui/src/ui/hover-card/hover-card.module.css
@@ -17,6 +17,7 @@
 }
 
 .hoverCard {
+  z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));

diff --git a/packages/ui/src/ui/hover-card/hover-card.tsx b/packages/ui/src/ui/hover-card/hover-card.tsx
@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 800 });
+  const state = useHovercardState({ gutter: 8, timeout: 300 });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
@@ -62,7 +62,6 @@ export const HoverCard = (props: HoverCardProps) => {
         {...hovercardProps}
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
-        style={{ zIndex: 10000 }}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}

diff --git a/packages/ui/src/ui/tooltip/tooltip.module.css b/packages/ui/src/ui/tooltip/tooltip.module.css
@@ -19,6 +19,7 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
+  z-index: var(--layer-xxhigh);
 }
 
 .arrow svg {