From 1d9ae2ad29bfa5cc316947b392f2fe55320b5ce4 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 26 Mar 2025 14:15:46 +0000
Subject: [PATCH] feat: make spacing input autogrow (#5052)

## Description

When user opens a long value in spacing we now show an input that can
big much bigger, max size 240px for the input. On the other hand it will
be small if value is small AND it will autogrow

<img width="410" alt="image"
src="https://github.com/user-attachments/assets/2ccbdc52-9eea-4f5b-bb44-b4e8d4f7b23f"
/>


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../features/style-panel/sections/shared/input-popover.tsx    | 4 +++-
 .../style-panel/shared/css-value-input/css-value-input.tsx    | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
index f2a4d7b590..3df535cd5d 100644
--- a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
@@ -45,11 +45,13 @@ const Input = ({
 
   return (
     <CssValueInput
+      minWidth="6ch"
       styleSource={styleSource}
       property={property}
       value={value}
       intermediateValue={intermediateValue}
       getOptions={() => $availableUnitVariables.get()}
+      fieldSizing="content"
       onChange={(styleValue) => {
         setIntermediateValue(styleValue);
         const activeProperties = getActiveProperties();
@@ -176,7 +178,7 @@ export const InputPopover = ({
           description={propertyDescriptions[property]}
           properties={[property]}
         />
-        <Flex css={{ width: theme.spacing[20] }}>
+        <Flex css={{ maxWidth: theme.spacing[30] }}>
           <Input
             styleSource={styleSource}
             value={value}
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
index 71ffe929a3..39b59c766d 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -322,6 +322,7 @@ type CssValueInputProps = Pick<
   unitOptions?: UnitOption[];
   id?: string;
   placeholder?: string;
+  minWidth?: string;
 };
 
 const initialValue: IntermediateStyleValue = {
@@ -399,6 +400,7 @@ export const CssValueInput = ({
   text,
   unitOptions,
   placeholder,
+  minWidth = "2ch",
   ...props
 }: CssValueInputProps) => {
   const value = props.intermediateValue ?? props.value ?? initialValue;
@@ -921,7 +923,7 @@ export const CssValueInput = ({
             }
             css={{
               cursor: "default",
-              minWidth: "2em",
+              minWidth,
               "&:hover": {
                 [cssButtonDisplay]: "block",
               },