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