fix: show description in attributes tooltip (#5173)

Description can be taken from attributes meta. Also moved binding
warning inside of tooltip to avoid layout shift after binding.

<img width="364" alt="Screenshot 2025-04-30 at 17 44 28"
src="https://github.com/user-attachments/assets/903d1309-e7af-4d2b-9aa9-7b36bda4f45d"
/>

Author: TrySound

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

@@ -12,26 +12,18 @@ import {
   rawTheme,
   theme,
 } from "@webstudio-is/design-system";
-import { InfoCircleIcon } from "@webstudio-is/icons";
+import { AlertIcon } from "@webstudio-is/icons";
 import type { Prop } from "@webstudio-is/sdk";
 import { showAttribute } from "@webstudio-is/react-sdk";
 import { updateWebstudioData } from "~/shared/instance-utils";
 import { $selectedInstance } from "~/shared/awareness";
 import { $props, $registeredComponentPropsMetas } from "~/shared/nano-states";
-import { humanizeAttribute, showAttributeMeta } from "./shared";
+import { $selectedInstancePropsMetas, humanizeAttribute } from "./shared";
 
 const usePropMeta = (name: string) => {
   const store = useMemo(() => {
-    return computed(
-      [$selectedInstance, $registeredComponentPropsMetas],
-      (instance, propsMetas) => {
-        if (name === showAttribute) {
-          return showAttributeMeta;
-        }
-        const metas = propsMetas.get(instance?.component ?? "");
-        const propMeta = metas?.props[name];
-        return propMeta;
-      }
+    return computed($selectedInstancePropsMetas, (propsMetas) =>
+      propsMetas.get(name)
     );
   }, [name]);
   return useStore(store);
@@ -144,6 +136,18 @@ export const PropertyLabel = ({
                 {label}
               </Text>
               {propMeta?.description && <Text>{propMeta.description}</Text>}
+              {readOnly && (
+                <Flex gap="1">
+                  <AlertIcon
+                    color={rawTheme.colors.backgroundAlertMain}
+                    style={{ flexShrink: 0 }}
+                  />
+                  <Text>
+                    The value is controlled by an expression and cannot be
+                    changed.
+                  </Text>
+                </Flex>
+              )}
               {isDeletable && (
                 <Button
                   color="dark"
@@ -167,17 +171,6 @@ export const PropertyLabel = ({
           </Label>
         </Tooltip>
       </div>
-      {readOnly && (
-        <Tooltip
-          content="The value is controlled by an expression and cannot be changed."
-          variant="wrapped"
-        >
-          <InfoCircleIcon
-            color={rawTheme.colors.foregroundSubtle}
-            tabIndex={0}
-          />
-        </Tooltip>
-      )}
     </Flex>
   );
 };

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -14,6 +14,7 @@ import equal from "fast-deep-equal";
 import { ariaAttributes, attributesByTag } from "@webstudio-is/html-data";
 import {
   reactPropsToStandardAttributes,
+  showAttribute,
   standardAttributesToReactProps,
 } from "@webstudio-is/react-sdk";
 import {
@@ -498,11 +499,13 @@ export const $selectedInstancePropsMetas = computed(
       }
       metas.set(name, propMeta);
     }
+    metas.set(showAttribute, showAttributeMeta);
     // ui should render in the following order
-    // 1. component properties
-    // 2. specific tag attributes
-    // 3. global html attributes
-    // 4. aria attributes
+    // 1. system properties
+    // 2. component properties
+    // 3. specific tag attributes
+    // 4. global html attributes
+    // 5. aria attributes
     return new Map(Array.from(metas.entries()).reverse());
   }
 );