diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx
index 783909db06..83a46cf300 100644
--- a/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx
+++ b/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}>
diff --git a/apps/builder/app/builder/features/style-panel/sections/space/space.tsx b/apps/builder/app/builder/features/style-panel/sections/space/space.tsx
index 44515c89b1..7589bb2fb8 100644
--- a/apps/builder/app/builder/features/style-panel/sections/space/space.tsx
+++ b/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}