fix: truncate text for while showing text for padding and margin tokens (#4485)

## Description

fixes #4439 
While displaying tokens in the spacing section, it gets too cluttered if
the css-variable names are long. This PR will truncate text, to make it
less cluttered.
<img width="238" alt="Screenshot 2024-11-30 at 6 09 12 PM"
src="https://github.com/user-attachments/assets/864fdef7-84ae-4f95-8d5d-4a7863da8097">

## Steps for reproduction

- Create a super long css-variable.
- Now, use the variable for padding/margin.


## Code Review

- [x] 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

- [x] made a self-review

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)

apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx

@@ -52,13 +52,21 @@ const Container = styled("button", {
 export const ValueText = ({
   value,
   source,
+  truncate = false,
   ...rest
-}: { value: StyleValue } & Omit<ComponentProps<typeof Container>, "value">) => {
+}: { value: StyleValue; truncate?: boolean } & Omit<
+  ComponentProps<typeof Container>,
+  "value"
+>) => {
   const children = useMemo(() => {
     if (value.type === "unit") {
       // we want to show "0" rather than "0px" for default values for cleaner UI
       if (source === "default" && value.unit === "px" && value.value === 0) {
-        return <Text variant="spaceSectionValueText">{value.value}</Text>;
+        return (
+          <Text truncate={truncate} variant="spaceSectionValueText">
+            {value.value}
+          </Text>
+        );
       }
 
       /**
@@ -68,7 +76,7 @@ export const ValueText = ({
 
       return (
         <>
-          <Text variant="spaceSectionValueText">
+          <Text truncate={truncate} variant="spaceSectionValueText">
             {value.value}
             <Text
               variant="spaceSectionValueText"
@@ -85,15 +93,19 @@ export const ValueText = ({
     }
 
     if (value.type === "var") {
-      return <Text variant="spaceSectionValueText">--{value.value}</Text>;
+      return (
+        <Text truncate={truncate} variant="spaceSectionValueText">
+          --{value.value}
+        </Text>
+      );
     }
 
     return (
-      <Text css={{}} variant="spaceSectionValueText">
+      <Text truncate={truncate} variant="spaceSectionValueText">
         {toValue(value)}
       </Text>
     );
-  }, [value, source]);
+  }, [value, source, truncate]);
 
   return (
     <Container source={source} {...rest} tabIndex={-1}>

apps/builder/app/builder/features/style-panel/sections/space/space.tsx

@@ -11,6 +11,7 @@ import { movementMapSpace, useKeyboardNavigation } from "../shared/keyboard";
 import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
 import { createBatchUpdate, deleteProperty } from "../../shared/use-style-data";
 import { useModifierKeys } from "../../shared/modifier-keys";
+import { theme } from "@webstudio-is/design-system";
 
 const Cell = ({
   isPopoverOpen,
@@ -44,6 +45,7 @@ const Cell = ({
       />
       <SpaceTooltip property={property} preventOpen={scrubStatus.isActive}>
         <ValueText
+          truncate
           css={{
             // We want value to have `default` cursor to indicate that it's clickable,
             // unlike the rest of the value area that has cursor that indicates scrubbing.
@@ -52,6 +54,7 @@ const Cell = ({
             // In order to have control over cursor we're setting pointerEvents to "all" here
             // because SpaceLayout sets it to "none" for cells' content.
             pointerEvents: "all",
+            maxWidth: theme.spacing[18],
           }}
           value={finalValue}
           source={styleDecl.source.name}