From 4f6fa5e7aa96ec984e66bda660cbffbe964093d5 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 10 Apr 2025 14:30:01 -0600
Subject: [PATCH] fix broken dropzone placeholder

---
 .../ui/charts/BusterChartLegend/LegendDot.tsx    | 16 ++++++++--------
 .../components/ui/grid/BusterResizeColumns.tsx   |  7 +++----
 web/src/components/ui/grid/BusterResizeRows.tsx  |  2 +-
 web/src/components/ui/popover/PopoverBase.tsx    |  2 +-
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx b/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx
index 9e03ec096..d77ade359 100644
--- a/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx
+++ b/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx
@@ -11,8 +11,8 @@ const itemVariants = cva(
   {
     variants: {
       size: {
-        sm: 'w-[8px] h-[12px]',
-        default: 'w-[18px] h-[12px]'
+        sm: 'w-2 h-3',
+        default: 'w-4.5 h-3'
       }
     }
   }
@@ -25,9 +25,9 @@ const dotVariants = cva('bg-border transition-colors duration-100', {
       default: ''
     },
     type: {
-      bar: 'w-[18px] h-[12px] rounded-sm',
-      line: 'w-[18px] h-[4px] rounded-sm',
-      scatter: 'w-[12px] h-[12px] rounded-full'
+      bar: 'w-4.5 h-3 rounded-sm',
+      line: 'w-4.5 h-1 rounded-sm',
+      scatter: 'w-3 h-3 rounded-full'
     }
   },
 
@@ -35,17 +35,17 @@ const dotVariants = cva('bg-border transition-colors duration-100', {
     {
       size: 'sm',
       type: 'bar',
-      className: 'w-[8px] h-[8px] rounded-[1.5px]'
+      className: 'w-2 h-2 rounded-[1.5px]'
     },
     {
       size: 'sm',
       type: 'line',
-      className: 'w-[8px] h-[2px] rounded-1.5px'
+      className: 'w-2 h-0.5 rounded-1.5px'
     },
     {
       size: 'sm',
       type: 'scatter',
-      className: 'w-[8px] h-[8px]'
+      className: 'w-2 h-2'
     }
   ]
 });
diff --git a/web/src/components/ui/grid/BusterResizeColumns.tsx b/web/src/components/ui/grid/BusterResizeColumns.tsx
index 70ab4af65..26b2a76c3 100644
--- a/web/src/components/ui/grid/BusterResizeColumns.tsx
+++ b/web/src/components/ui/grid/BusterResizeColumns.tsx
@@ -211,10 +211,9 @@ const DropzonePlaceholder: React.FC<{
   return (
     <div
       className={cn(
-        'pointer-events-none absolute top-0 bottom-0 h-full w-[4px] rounded-lg transition-opacity duration-200',
-        'bg-nav-item-hover z-[1]',
+        'bg-nav-item-hover pointer-events-none absolute top-0 bottom-0 z-[1] h-full w-1 rounded-lg transition-opacity duration-200',
         isDropzoneActives && 'placeholder',
-        active && 'bg-primary! opacity-100'
+        active && 'bg-primary! z-10 opacity-100'
       )}
       style={memoizedStyle}
     />
@@ -231,7 +230,7 @@ const ColumnSash: React.FC<{
   return (
     <div
       className={cn(
-        'grid-column-sash h-full w-[4px] rounded-lg',
+        'grid-column-sash h-full w-1 rounded-lg',
         'z-10 transition-colors duration-200 ease-in-out',
         allowEdit ? 'hover:bg-border' : 'hidden',
         active ? 'bg-border' : '',
diff --git a/web/src/components/ui/grid/BusterResizeRows.tsx b/web/src/components/ui/grid/BusterResizeRows.tsx
index 5d772d891..1bdc464ea 100644
--- a/web/src/components/ui/grid/BusterResizeRows.tsx
+++ b/web/src/components/ui/grid/BusterResizeRows.tsx
@@ -167,7 +167,7 @@ const ResizeRowHandle: React.FC<{
           className={cn(
             !readOnly && 'hover:bg-border cursor-row-resize',
             showActive && 'bg-primary! z-10 opacity-100',
-            'h-[4px] w-full rounded-sm transition-colors duration-200 ease-in-out select-none',
+            'h-1 w-full rounded-sm transition-colors duration-200 ease-in-out select-none',
             !top && 'dragger absolute'
           )}
           style={memoizedStyle}
diff --git a/web/src/components/ui/popover/PopoverBase.tsx b/web/src/components/ui/popover/PopoverBase.tsx
index 3d808580e..1eedf0435 100644
--- a/web/src/components/ui/popover/PopoverBase.tsx
+++ b/web/src/components/ui/popover/PopoverBase.tsx
@@ -32,7 +32,7 @@ const PopoverRoot: React.FC<PopoverProps> = ({ children, trigger = 'click', ...p
   const content =
     trigger === 'hover' ? (
       <div className="relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        <div className="absolute -inset-[4px]" />
+        <div className="absolute -inset-1" />
         <div className="relative z-10">{children}</div>
       </div>
     ) : (