Ellipsize grid expression input (#6578)

**Problem:**

Overflowing template strings in `GridExpressionInput` components should
be truncated and ellipsized.

**Fix:**

| Before | After |
|-------|-------|
| <img width="262" alt="Screenshot 2024-10-22 at 15 00 02"
src="https://github.com/user-attachments/assets/4c2197ed-1cb9-43df-98bf-dd23b98b229d">
| <img width="262" alt="Screenshot 2024-10-22 at 14 59 53"
src="https://github.com/user-attachments/assets/f7dfa3a0-d3e0-49f7-aa2e-1afab2e253d0">
|

Fixes #6577

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,

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 }}>