♻️ Use a DS icon button for the layout element margin mode (#12423)

* ♻️ Use a DS icon button for the layout element margin mode

The button that switches a flex or grid element between simple and
multiple margins was a raw button with a deprecated icon. Replace it with
a DS ghost icon button that shows the multiple state through aria-pressed.
Its title moves to the label, shown in the DS tooltip above and to the
left since the button sits at the right edge of the sidebar. The grid
column class goes on the tooltip wrapper.

The legacy margin icons label the numeric inputs and stay for the numeric
inputs group; the radio buttons are out of scope.

Add a visual test that selects a flex element and shows both margin modes.

AI-assisted-by: claude-opus-5-5

* ♻️ Remove deprecated button styles from layout element options

The margin mode button is now a DS icon button, so its tertiary button,
icon and selected placeholders and the deprecated 32px height go away.
The class only places the tooltip wrapper in the third grid column.

The refactor/ import stays for %input-element, still used by the legacy
numeric inputs.

AI-assisted-by: claude-opus-5-5

frontend/playwright/ui/visual-specs/workspace.spec.js

@@ -133,6 +133,50 @@ test.describe("Design tab", () => {
       threshold: 0,
     });
   });
+
+  test("Shows the margin modes of a flex layout element", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-7760.json");
+    await workspace.mockRPC(
+      "get-file-fragment?file-id=*&fragment-id=*",
+      "workspace/get-file-fragment-7760.json",
+    );
+    await workspace.mockRPC(
+      "update-file?id=*",
+      "workspace/update-file-create-rect.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "cd90e028-326a-80b4-8004-7cdec16ffad5",
+      pageId: "cd90e028-326a-80b4-8004-7cdec16ffad6",
+    });
+
+    await workspace.clickToggableLayer("Flex Board");
+    await workspace.clickLeafLayer("Rectangle");
+
+    const section = workspace.rightSidebar.getByRole("region", {
+      name: "Layout item section",
+    });
+    const marginMode = section.getByRole("button", {
+      name: "Margin - multiple",
+    });
+    await expect(marginMode).toBeVisible();
+    // The margin button is a small part of the section: compare every pixel.
+    await expect(section).toHaveScreenshot("margin-simple.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    await marginMode.click();
+    await marginMode.blur();
+    await page.mouse.move(0, 0);
+    await expect(section.getByRole("textbox", { name: "Top margin" }))
+      .toBeVisible();
+    await expect(section).toHaveScreenshot("margin-multiple.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
 });
 
 test.describe("Assets tab", () => {

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs

@@ -19,6 +19,7 @@
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.sidebar.options.common :as soc]
@@ -408,12 +409,13 @@
         (= type :multiple)
         [:> margin-multiple* props])]
 
-     [:button {:class (stl/css-case
-                       :margin-mode true
-                       :selected (= type :multiple))
-               :title "Margin - multiple"
-               :on-click on-type-change'}
-      deprecated-icon/margin]]))
+     [:> icon-button* {:variant "ghost"
+                       :tooltip-class (stl/css :margin-mode)
+                       :tooltip-placement "top-left"
+                       :aria-pressed (= type :multiple)
+                       :aria-label "Margin - multiple"
+                       :icon i/margin
+                       :on-click on-type-change'}]]))
 
 (mf/defc element-behaviour-horizontal
   {::mf/props :obj

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss

@@ -78,18 +78,7 @@
 }
 
 .margin-mode {
-  @extend %button-tertiary;
-
   grid-column: 3;
-  height: deprecated.$s-32;
-
-  svg {
-    @extend %button-icon;
-  }
-
-  &.selected {
-    @extend %button-icon-selected;
-  }
 }
 
 .margin-simple {