From 1ae0565c1c1f4b07e1ac6252338e9ed181e542b3 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:58:02 +0200
Subject: [PATCH] ellipsize grid expression input

---
 editor/src/uuiui/inputs/grid-expression-input.tsx |  1 +
 editor/src/uuiui/inputs/string-input.tsx          | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index 93701a9e060f..6407f163b6d2 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -200,6 +200,7 @@ export const GridExpressionInput = React.memo(
             width: inputFocused ? '100%' : `calc(100% - ${DropdownWidth}px)`,
           }}
           css={{ color: isDefault ? colorTheme.fg6.value : colorTheme.fg0.value }}
+          ellipsize={true}
         />
         {unless(
           inputFocused,
diff --git a/editor/src/uuiui/inputs/string-input.tsx b/editor/src/uuiui/inputs/string-input.tsx
index c38c162bb491..5cddfd0d280e 100644
--- a/editor/src/uuiui/inputs/string-input.tsx
+++ b/editor/src/uuiui/inputs/string-input.tsx
@@ -3,6 +3,7 @@
 import { jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import composeRefs from '@seznam/compose-react-refs'
+import type { CSSProperties } from 'react'
 import React from 'react'
 import type { ControlStatus } from '../../components/inspector/common/control-status'
 import type { ControlStyles } from '../../components/inspector/common/control-styles'
@@ -34,6 +35,7 @@ export interface StringInputProps
   pasteHandler?: boolean
   showBorder?: boolean
   innerStyle?: React.CSSProperties
+  ellipsize?: boolean
 }
 
 export const StringInput = React.memo(
@@ -49,6 +51,7 @@ export const StringInput = React.memo(
         DEPRECATED_labelBelow: labelBelow,
         testId,
         showBorder,
+        ellipsize,
         ...inputProps
       },
       propsRef,
@@ -88,6 +91,13 @@ export const StringInput = React.memo(
 
       const placeholder = getControlStylesAwarePlaceholder(controlStyles) ?? initialPlaceHolder
 
+      let inputStyle: CSSProperties = {}
+      if (ellipsize) {
+        inputStyle.textOverflow = 'ellipsis'
+        inputStyle.whiteSpace = 'nowrap'
+        inputStyle.overflow = 'hidden'
+      }
+
       return (
         <form
           autoComplete='off'
@@ -142,6 +152,7 @@ export const StringInput = React.memo(
               autoComplete='off'
               spellCheck={false}
               growInputAutomatically={inputProps.growInputAutomatically}
+              style={inputStyle}
             />
             {labelBelow == null ? null : (
               <LabelBelow htmlFor={inputProps.id} style={{ color: controlStyles.secondaryColor }}>