From 2f54a7862d2b9ebf18c30d561c1103e3b3ed4477 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 16 Oct 2024 09:18:05 +0100
Subject: [PATCH] fix(inspector) Display Grid Template Ellipsis When Hovered
 (#6539)

- Moved the logic in `AxisDimensionControl` that governed the visibility
of the ellipsis to be purely React based instead of using Emotion CSS.
---
 .../src/components/inspector/flex-section.tsx | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 0e9fef71b0db..6bf0d4680eff 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -92,8 +92,6 @@ import {
 import type { Axis } from '../canvas/gap-utils'
 import { GridExpressionInput } from '../../uuiui/inputs/grid-expression-input'
 
-const axisDropdownMenuButton = 'axisDropdownMenuButton'
-
 function getLayoutSystem(
   layoutSystem: DetectedLayoutSystem | null | undefined,
 ): 'grid' | 'flex' | null {
@@ -553,20 +551,20 @@ function AxisDimensionControl({
 
   const gridExpressionInputFocused = useGridExpressionInputFocused()
 
+  const [isHovered, setIsHovered] = React.useState(false)
+  const onMouseEnter = React.useCallback(() => {
+    setIsHovered(true)
+  }, [])
+  const onMouseLeave = React.useCallback(() => {
+    setIsHovered(false)
+  }, [])
+
   return (
     <div
       key={`col-${value}-${index}`}
       style={{ display: 'flex', alignItems: 'center', gap: 6 }}
-      css={{
-        [`& > .${axisDropdownMenuButton}`]: {
-          visibility: isOpen ? 'visible' : 'hidden',
-        },
-        ':hover': {
-          [`& > .${axisDropdownMenuButton}`]: {
-            visibility: 'visible',
-          },
-        },
-      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <div
         style={{
@@ -600,9 +598,9 @@ function AxisDimensionControl({
           onBlur={gridExpressionInputFocused.onBlur}
           keywords={gridDimensionDropdownKeywords}
         />
-        {unless(
-          gridExpressionInputFocused.focused,
-          <SquareButton className={axisDropdownMenuButton}>
+        {when(
+          (isHovered && !gridExpressionInputFocused.focused) || isOpen,
+          <SquareButton>
             <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
           </SquareButton>,
         )}