feat: hide transforms section for inline elements (#5180)

Transforms don't work when display: inline is used. Here we hide
transforms section just like "list item section" for non list tags.

Related video https://www.youtube.com/watch?v=KjpQF3nYGoc



https://github.com/user-attachments/assets/2f1c882f-c627-4e62-9e44-5284117d200a

Author: TrySound

apps/builder/app/builder/features/style-panel/sections/sections.ts

@@ -39,7 +39,7 @@ export const sections = new Map<
   ["filter", filter],
   ["backdropFilters", backdropFilter],
   ["transitions", transitions],
-  ["transfrom", transforms],
+  ["transforms", transforms],
   ["outline", outline],
   ["advanced", advanced],
 ]);

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

@@ -34,7 +34,11 @@ import {
 } from "~/builder/shared/client-settings";
 import { sections } from "./sections";
 import { StyleSourcesSection } from "./style-source-section";
-import { $instanceTags, useParentComputedStyleDecl } from "./shared/model";
+import {
+  $instanceTags,
+  useComputedStyleDecl,
+  useParentComputedStyleDecl,
+} from "./shared/model";
 
 const $selectedInstanceTag = computed(
   [$selectedInstance, $instanceTags],
@@ -123,8 +127,10 @@ export const StylePanel = ({
   const { stylePanelMode } = useStore($settings);
   const selectedInstanceRenderState = useStore($selectedInstanceRenderState);
   const tag = useStore($selectedInstanceTag);
-  const display = useParentComputedStyleDecl("display");
-  const displayValue = toValue(display.computedValue);
+  const display = toValue(useComputedStyleDecl("display").computedValue);
+  const parentDisplay = toValue(
+    useParentComputedStyleDecl("display").computedValue
+  );
 
   // If selected instance is not rendered on the canvas,
   // style panel will not work, because it needs the element in DOM in order to work.
@@ -147,7 +153,7 @@ export const StylePanel = ({
       continue;
     }
     // show flex child UI only when parent is flex or inline-flex
-    if (category === "flexChild" && displayValue.includes("flex") === false) {
+    if (category === "flexChild" && parentDisplay.includes("flex") === false) {
       continue;
     }
     // allow customizing list item type only for list and list item
@@ -159,6 +165,16 @@ export const StylePanel = ({
     ) {
       continue;
     }
+    // non-replaced inline boxes cannot be transformed
+    // https://drafts.csswg.org/css-transforms-1/#css-values
+    if (
+      category === "transforms" &&
+      (display === "inline" ||
+        display === "table-column" ||
+        display === "table-column-group")
+    ) {
+      continue;
+    }
     all.push(<Section key={category} />);
   }