From 554cb0da8baa994a5d3e5439464dcca17192448c Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Thu, 8 Sep 2022 11:32:58 +1000
Subject: [PATCH 1/6] add border to experiments table tooltips

---
 .../overflowHoverTooltip/OverflowHoverTooltip.tsx           | 3 ++-
 .../components/overflowHoverTooltip/styles.module.scss      | 6 ++++++
 webview/src/experiments/components/table/styles.module.scss | 1 +
 webview/src/shared/variables.scss                           | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 webview/src/experiments/components/overflowHoverTooltip/styles.module.scss

diff --git a/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx b/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
index 490a004534..047924d793 100644
--- a/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
+++ b/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
@@ -1,5 +1,6 @@
 import { TippyProps } from '@tippyjs/react'
 import React, { useRef } from 'react'
+import styles from './styles.module.scss'
 import { useIsFullyContained } from './useIsFullyContained'
 import Tooltip, {
   HEADER_TOOLTIP_DELAY
@@ -12,7 +13,7 @@ export const OverflowHoverTooltip: React.FC<
   const isDisabled = useIsFullyContained(wrapperRef)
   return (
     <Tooltip
-      content={content}
+      content={<div className={styles.overflowTooltip}>{content}</div>}
       placement="bottom-start"
       disabled={isDisabled}
       delay={HEADER_TOOLTIP_DELAY}
diff --git a/webview/src/experiments/components/overflowHoverTooltip/styles.module.scss b/webview/src/experiments/components/overflowHoverTooltip/styles.module.scss
new file mode 100644
index 0000000000..c1b017eeed
--- /dev/null
+++ b/webview/src/experiments/components/overflowHoverTooltip/styles.module.scss
@@ -0,0 +1,6 @@
+@import '../../../shared/variables.scss';
+
+.overflowTooltip {
+  border: 1px solid $tooltip-border;
+  padding: 5px;
+}
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index f2d6a55fe3..16117a233f 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -648,6 +648,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 }
 
 .errorTooltip {
+  border: 1px solid $tooltip-border;
   white-space: pre-wrap;
   display: flex;
   gap: 4px;
diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss
index eb4bf6c069..29a12188fa 100644
--- a/webview/src/shared/variables.scss
+++ b/webview/src/shared/variables.scss
@@ -20,6 +20,7 @@ $header-bg-color: $bg-color;
 $header-border-color: $border-color;
 $meta-cell-color: var(--vscode-descriptionForeground);
 $header-resizer-color: var(--vscode-sash-hoverBorder);
+$tooltip-border: var(--vscode-editorHoverWidget-border);
 
 $hover-background-color: var(--vscode-list-hoverBackground);
 $row-hover-background-color: var(--vscode-list-hoverBackground);

From e33f8192f593298e08c67dffb29a5248c0b93f8e Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Thu, 8 Sep 2022 12:38:49 +1000
Subject: [PATCH 2/6] push border into global style

---
 .../overflowHoverTooltip/OverflowHoverTooltip.tsx |  3 +--
 .../components/table/styles.module.scss           |  2 --
 .../shared/components/contextMenu/ContextMenu.tsx |  1 +
 webview/src/shared/components/tooltip/Tooltip.tsx | 11 +++++++++--
 .../shared/components/tooltip/styles.module.scss  | 15 +++++++++++++++
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx b/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
index 047924d793..490a004534 100644
--- a/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
+++ b/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
@@ -1,6 +1,5 @@
 import { TippyProps } from '@tippyjs/react'
 import React, { useRef } from 'react'
-import styles from './styles.module.scss'
 import { useIsFullyContained } from './useIsFullyContained'
 import Tooltip, {
   HEADER_TOOLTIP_DELAY
@@ -13,7 +12,7 @@ export const OverflowHoverTooltip: React.FC<
   const isDisabled = useIsFullyContained(wrapperRef)
   return (
     <Tooltip
-      content={<div className={styles.overflowTooltip}>{content}</div>}
+      content={content}
       placement="bottom-start"
       disabled={isDisabled}
       delay={HEADER_TOOLTIP_DELAY}
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index 16117a233f..8b8519d5e8 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -648,11 +648,9 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 }
 
 .errorTooltip {
-  border: 1px solid $tooltip-border;
   white-space: pre-wrap;
   display: flex;
   gap: 4px;
-  font-size: 0.8125rem;
 
   svg {
     min-width: 16px;
diff --git a/webview/src/shared/components/contextMenu/ContextMenu.tsx b/webview/src/shared/components/contextMenu/ContextMenu.tsx
index 4901af7461..21eb8c2b1c 100644
--- a/webview/src/shared/components/contextMenu/ContextMenu.tsx
+++ b/webview/src/shared/components/contextMenu/ContextMenu.tsx
@@ -57,6 +57,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     delay={[100, 200]}
     placement={'bottom'}
     interactive
+    isContextMenu={true}
     onTrigger={positionContextMenuAndDisableEvents}
     content={content}
     onShow={onShow}
diff --git a/webview/src/shared/components/tooltip/Tooltip.tsx b/webview/src/shared/components/tooltip/Tooltip.tsx
index 2af60cbe1a..34b02d062d 100644
--- a/webview/src/shared/components/tooltip/Tooltip.tsx
+++ b/webview/src/shared/components/tooltip/Tooltip.tsx
@@ -8,7 +8,7 @@ export const CELL_TOOLTIP_DELAY = 1000
 
 const TooltipRenderFunction: React.ForwardRefRenderFunction<
   unknown,
-  TippyProps
+  TippyProps & { isContextMenu?: boolean }
 > = (
   {
     children,
@@ -27,6 +27,7 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     hideOnClick,
     onTrigger,
     appendTo,
+    isContextMenu = false,
     animation = false,
     className = typeof content === 'string' ? styles.padded : undefined,
     arrow = false
@@ -36,7 +37,13 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
   <Tippy
     animation={animation}
     appendTo={appendTo}
-    content={content}
+    content={
+      isContextMenu ? (
+        content
+      ) : (
+        <div className={styles.tooltipContent}>{content}</div>
+      )
+    }
     className={className}
     placement={placement}
     arrow={arrow}
diff --git a/webview/src/shared/components/tooltip/styles.module.scss b/webview/src/shared/components/tooltip/styles.module.scss
index e00df08de5..0a0cd9b2a4 100644
--- a/webview/src/shared/components/tooltip/styles.module.scss
+++ b/webview/src/shared/components/tooltip/styles.module.scss
@@ -1,3 +1,4 @@
+$tooltip-border: var(--vscode-editorHoverWidget-border);
 $vscode-drop-shadow: drop-shadow(0 0 4px var(--vscode-widget-shadow));
 $foreground: var(--vscode-quickInput-foreground);
 $background: var(--vscode-quickInput-background);
@@ -30,3 +31,17 @@ $font: var(--vscode-font-family);
     z-index: 2;
   }
 }
+
+.tooltipContent {
+  border: 1px solid $tooltip-border;
+  white-space: pre-wrap;
+  padding: 5px;
+  display: flex;
+  gap: 4px;
+  font-size: 0.8125rem;
+
+  svg {
+    min-width: 16px;
+    min-height: 16px;
+  }
+}

From 5d57f8b0250d125b8d1cc05db69d8143a564b6c7 Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Thu, 8 Sep 2022 13:10:14 +1000
Subject: [PATCH 3/6] remove arrow from tooltips

---
 webview/src/experiments/util/buildDynamicColumns.tsx      | 1 -
 webview/src/shared/components/contextMenu/ContextMenu.tsx | 1 -
 webview/src/shared/components/tooltip/Tooltip.tsx         | 5 ++---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/webview/src/experiments/util/buildDynamicColumns.tsx b/webview/src/experiments/util/buildDynamicColumns.tsx
index 3928ba6497..f9c3726b5c 100644
--- a/webview/src/experiments/util/buildDynamicColumns.tsx
+++ b/webview/src/experiments/util/buildDynamicColumns.tsx
@@ -97,7 +97,6 @@ const Cell: React.FC<Cell<Experiment, CellValue>> = cell => {
     <Tooltip
       content={<CellTooltip stringValue={stringValue} />}
       placement="bottom-end"
-      arrow={true}
       delay={[CELL_TOOLTIP_DELAY, 0]}
       interactive={true}
     >
diff --git a/webview/src/shared/components/contextMenu/ContextMenu.tsx b/webview/src/shared/components/contextMenu/ContextMenu.tsx
index 21eb8c2b1c..b7c0908ed3 100644
--- a/webview/src/shared/components/contextMenu/ContextMenu.tsx
+++ b/webview/src/shared/components/contextMenu/ContextMenu.tsx
@@ -52,7 +52,6 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
   trigger = 'contextmenu'
 }) => (
   <Tooltip
-    arrow
     trigger={trigger}
     delay={[100, 200]}
     placement={'bottom'}
diff --git a/webview/src/shared/components/tooltip/Tooltip.tsx b/webview/src/shared/components/tooltip/Tooltip.tsx
index 34b02d062d..9b6714e160 100644
--- a/webview/src/shared/components/tooltip/Tooltip.tsx
+++ b/webview/src/shared/components/tooltip/Tooltip.tsx
@@ -29,12 +29,12 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     appendTo,
     isContextMenu = false,
     animation = false,
-    className = typeof content === 'string' ? styles.padded : undefined,
-    arrow = false
+    className = typeof content === 'string' ? styles.padded : undefined
   },
   ref
 ) => (
   <Tippy
+    arrow={false}
     animation={animation}
     appendTo={appendTo}
     content={
@@ -46,7 +46,6 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     }
     className={className}
     placement={placement}
-    arrow={arrow}
     delay={delay}
     disabled={disabled}
     popperOptions={popperOptions}

From 4bdb86923cc9fd0a634fa44030e6d004dcb62fd4 Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Thu, 8 Sep 2022 13:23:38 +1000
Subject: [PATCH 4/6] remove extra padding and global style

---
 webview/src/experiments/components/table/Indicators.tsx  | 2 --
 webview/src/shared/components/iconMenu/IconMenu.tsx      | 2 --
 webview/src/shared/components/tooltip/Tooltip.tsx        | 4 +---
 webview/src/shared/components/tooltip/styles.module.scss | 5 -----
 4 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/webview/src/experiments/components/table/Indicators.tsx b/webview/src/experiments/components/table/Indicators.tsx
index 817e3e8fa5..88ff548eb1 100644
--- a/webview/src/experiments/components/table/Indicators.tsx
+++ b/webview/src/experiments/components/table/Indicators.tsx
@@ -13,7 +13,6 @@ import {
 } from '../../../shared/components/icons'
 import { sendMessage } from '../../../shared/vscode'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
-import tooltipStyles from '../../../shared/components/tooltip/styles.module.scss'
 import { pluralize } from '../../../util/strings'
 import { ExperimentsState } from '../../store'
 
@@ -31,7 +30,6 @@ export const IndicatorTooltip: React.FC<IndicatorTooltipProps> = ({
       placement="bottom-start"
       disabled={!tooltipContent}
       content={tooltipContent}
-      className={tooltipStyles.padded}
       ref={wrapperRef}
     >
       {children}
diff --git a/webview/src/shared/components/iconMenu/IconMenu.tsx b/webview/src/shared/components/iconMenu/IconMenu.tsx
index a6cfe31c71..b0de6781c5 100644
--- a/webview/src/shared/components/iconMenu/IconMenu.tsx
+++ b/webview/src/shared/components/iconMenu/IconMenu.tsx
@@ -3,7 +3,6 @@ import { useSingleton } from '@tippyjs/react'
 import { IconMenuItem, IconMenuItemProps } from './IconMenuItem'
 import styles from './styles.module.scss'
 import Tooltip from '../tooltip/Tooltip'
-import tooltipStyles from '../tooltip/styles.module.scss'
 
 interface IconMenuProps {
   items: IconMenuItemProps[]
@@ -29,7 +28,6 @@ export const IconMenu: React.FC<IconMenuProps> = ({ items }) => {
 
   return (
     <Tooltip
-      className={tooltipStyles.padded}
       singleton={tooltipSource}
       placement="bottom-end"
       popperOptions={popperOptions}
diff --git a/webview/src/shared/components/tooltip/Tooltip.tsx b/webview/src/shared/components/tooltip/Tooltip.tsx
index 9b6714e160..32576c730f 100644
--- a/webview/src/shared/components/tooltip/Tooltip.tsx
+++ b/webview/src/shared/components/tooltip/Tooltip.tsx
@@ -28,8 +28,7 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     onTrigger,
     appendTo,
     isContextMenu = false,
-    animation = false,
-    className = typeof content === 'string' ? styles.padded : undefined
+    animation = false
   },
   ref
 ) => (
@@ -44,7 +43,6 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
         <div className={styles.tooltipContent}>{content}</div>
       )
     }
-    className={className}
     placement={placement}
     delay={delay}
     disabled={disabled}
diff --git a/webview/src/shared/components/tooltip/styles.module.scss b/webview/src/shared/components/tooltip/styles.module.scss
index 0a0cd9b2a4..a24f8705a9 100644
--- a/webview/src/shared/components/tooltip/styles.module.scss
+++ b/webview/src/shared/components/tooltip/styles.module.scss
@@ -4,11 +4,6 @@ $foreground: var(--vscode-quickInput-foreground);
 $background: var(--vscode-quickInput-background);
 $font: var(--vscode-font-family);
 
-:global(.tippy-box).padded {
-  & > :global(.tippy-content) {
-    padding: 2px 6px;
-  }
-}
 :global(.tippy-box) {
   filter: $vscode-drop-shadow;
   font-family: $font;

From 4050bf2d56583d09fec61d9aa14b9a8d1841bc69 Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Fri, 9 Sep 2022 05:49:51 +1000
Subject: [PATCH 5/6] reduce padding by 5px in info tooltip

---
 webview/src/plots/components/styles.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
index 15c3e96e62..46cd32573d 100644
--- a/webview/src/plots/components/styles.module.scss
+++ b/webview/src/plots/components/styles.module.scss
@@ -365,7 +365,7 @@ $gap: 20px;
 
 .infoTooltip {
   max-width: 220px;
-  padding: 12px 8px;
+  padding: 7px 3px;
   white-space: normal;
   display: flex;
   gap: 4px;

From 74e3b434c756ab4ac7899ff5eaf508bf0e1baf2b Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Fri, 9 Sep 2022 05:53:25 +1000
Subject: [PATCH 6/6] remove unused styles file

---
 .../components/overflowHoverTooltip/styles.module.scss      | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 webview/src/experiments/components/overflowHoverTooltip/styles.module.scss

diff --git a/webview/src/experiments/components/overflowHoverTooltip/styles.module.scss b/webview/src/experiments/components/overflowHoverTooltip/styles.module.scss
deleted file mode 100644
index c1b017eeed..0000000000
--- a/webview/src/experiments/components/overflowHoverTooltip/styles.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../shared/variables.scss';
-
-.overflowTooltip {
-  border: 1px solid $tooltip-border;
-  padding: 5px;
-}