fix: Option list changes width on hover (#4363)

## Description

closes #4300

Also simplified types instead of unions with 2300+ strings

## 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:
5de6)
- [ ] 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: istarkov

apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx

@@ -79,9 +79,7 @@ export const PositionControl = ({
     <Flex direction="column" gap="1">
       <PropertyInlineLabel
         label="Position"
-        description={
-          propertyDescriptions[property as keyof typeof propertyDescriptions]
-        }
+        description={propertyDescriptions[property]}
         properties={[property]}
       />
       <Flex gap="6">

apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx

@@ -17,6 +17,7 @@ import {
   getRepeatedStyleItem,
   setRepeatedStyleItem,
 } from "../../shared/repeated-style";
+import { noCase } from "change-case";
 
 export const SelectControl = ({
   property,
@@ -50,6 +51,12 @@ export const SelectControl = ({
     options.push(valueString);
   }
 
+  const hasDescription =
+    options.length > 0 &&
+    options.some(
+      (option) => declarationDescriptions[`${property}:${option}`] !== undefined
+    );
+
   return (
     <Select
       // Show empty field instead of radix placeholder like css value input does.
@@ -77,15 +84,16 @@ export const SelectControl = ({
         }
       }}
       getDescription={(option) => {
-        const description =
-          declarationDescriptions[
-            `${property}:${option}` as keyof typeof declarationDescriptions
-          ];
-
-        if (description === undefined) {
+        if (hasDescription === false) {
           return;
         }
-        return <Box css={{ width: theme.spacing[26] }}>{description}</Box>;
+
+        const description = declarationDescriptions[`${property}:${option}`];
+        return (
+          <Box css={{ width: theme.spacing[26] }}>
+            {description ?? `The ${noCase(property)} is ${option}`}
+          </Box>
+        );
       }}
       getItemProps={() => ({ text: "sentence" })}
     />

apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx

@@ -37,7 +37,7 @@ export const ToggleGroupTooltip = ({
   isSelected: boolean;
   label?: string;
   code?: string;
-  description: string;
+  description: string | undefined;
   properties: StyleProperty[];
   isAdvanced?: boolean;
   children: ReactNode;

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -219,7 +219,7 @@ export const PropertyLabel = ({
   properties,
 }: {
   label: string;
-  description: string;
+  description?: string;
   properties: [StyleProperty, ...StyleProperty[]];
 }) => {
   const styles = useComputedStyles(properties);
@@ -277,7 +277,7 @@ export const PropertySectionLabel = ({
   properties,
 }: {
   label: string;
-  description: string;
+  description: string | undefined;
   properties: [StyleProperty, ...StyleProperty[]];
 }) => {
   const styles = useComputedStyles(properties);
@@ -344,7 +344,7 @@ export const PropertyInlineLabel = ({
 }: {
   label: string;
   title?: string;
-  description: string;
+  description?: string;
   properties?: [StyleProperty, ...StyleProperty[]];
   disabled?: boolean;
 }) => {
@@ -400,7 +400,7 @@ export const PropertyValueTooltip = ({
   children,
 }: {
   label: string;
-  description: string;
+  description: string | undefined;
   properties: [StyleProperty, ...StyleProperty[]];
   isAdvanced?: boolean;
   children: ReactNode;

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

@@ -138,10 +138,9 @@ const matchOrSuggestToCreate = (
 };
 
 const getNewPropertyDescription = (item: null | SearchItem) => {
-  let description = `Create CSS variable.`;
+  let description: string | undefined = `Create CSS variable.`;
   if (item && item.value in propertyDescriptions) {
-    description =
-      propertyDescriptions[item.value as keyof typeof propertyDescriptions];
+    description = propertyDescriptions[item.value];
   }
   return <Box css={{ width: theme.spacing[28] }}>{description}</Box>;
 };
@@ -261,8 +260,7 @@ const AdvancedSearch = ({
 const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
   const styleDecl = useComputedStyleDecl(property);
   const label = hyphenateProperty(property);
-  const description =
-    propertyDescriptions[property as keyof typeof propertyDescriptions];
+  const description = propertyDescriptions[property];
   const color =
     styleDecl.source.name === "default" ? "code" : styleDecl.source.name;
   const [isOpen, setIsOpen] = useState(false);

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

@@ -86,10 +86,7 @@ const GapTooltip = ({
   children: ReactNode;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const description =
-    propertyDescriptions[
-      styleDecl.property as keyof typeof propertyDescriptions
-    ];
+  const description = propertyDescriptions[styleDecl.property];
   return (
     <Tooltip
       open={isOpen}

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

@@ -29,9 +29,7 @@ const SizeProperty = ({ property }: { property: StyleProperty }) => {
     <Grid gap={1}>
       <PropertyLabel
         label={humanizeString(property)}
-        description={
-          propertyDescriptions[property as keyof typeof propertyDescriptions]
-        }
+        description={propertyDescriptions[property]}
         properties={[property]}
       />
       <TextControl property={property} />

apps/builder/app/builder/features/style-panel/sections/transforms/transform-and-perspective-origin.tsx

@@ -153,9 +153,7 @@ export const TransformAndPerspectiveOrigin = ({
     <Grid gap="2">
       <PropertyLabel
         label={label}
-        description={
-          propertyDescriptions[property as keyof typeof propertyDescriptions]
-        }
+        description={propertyDescriptions[property]}
         properties={[property]}
       />
       <Flex gap="6">

packages/css-data/bin/property-value-descriptions.ts

@@ -331,7 +331,7 @@ function writeFile(descriptions: Record<string, unknown>) {
         ([binding, value]) =>
           `export const ${binding} = ` +
           (typeof value === "string" ? value : JSON.stringify(value, null, 2)) +
-          " as const;"
+          " as Record<string, string | undefined>;"
       )
       .join("\n\n");