fix: truncate long labels in CSS value input autocomplete (#5692)

## Description

1. What is this PR about (link the issue and add a short description)

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

Author: kof

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Text,
   useCombobox,
   ComboboxRoot,
   ComboboxContent,
@@ -960,12 +961,17 @@ export const CssValueInput = ({
                     {(() => {
                       const label = itemToString(item);
                       const colorValue = getItemColor(item);
+                      const labelElement = (
+                        <Text truncate css={{ maxWidth: theme.spacing[30] }}>
+                          {label}
+                        </Text>
+                      );
                       if (colorValue === undefined) {
-                        return label;
+                        return labelElement;
                       }
                       return (
                         <Flex justify="between" align="center" grow gap={2}>
-                          <Box>{label}</Box>
+                          {labelElement}
                           <ColorThumb color={colorValue} />
                         </Flex>
                       );