From e495e0ac5934f0653aed1e5354272b5c30be3e56 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Mon, 22 Jun 2026 13:12:30 +0200
Subject: [PATCH] :bug: Allow negative value on margins (#10353)

---
 .../playwright/ui/specs/numeric-input.spec.js | 60 +++++++++++++++++++
 .../options/menus/layout_container.cljs       |  4 +-
 .../sidebar/options/menus/layout_item.cljs    |  6 --
 3 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/frontend/playwright/ui/specs/numeric-input.spec.js b/frontend/playwright/ui/specs/numeric-input.spec.js
index 11faa57b4d..52a4726f91 100644
--- a/frontend/playwright/ui/specs/numeric-input.spec.js
+++ b/frontend/playwright/ui/specs/numeric-input.spec.js
@@ -78,3 +78,63 @@ test("BUG 14226: Numeric inputs in the design panel reject values with leading w
   await widthInput.press("Enter");
   await expect(widthInput).toHaveValue("100");
 });
+
+test("BUG 10001: Negative margins are allowed on the numeric input", async ({
+  page,
+}) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+  await workspacePage.mockRPC(
+    /get\-file\?/,
+    "workspace/get-file-copy-paste.json",
+  );
+  await workspacePage.mockRPC(
+    "get-file-fragment?file-id=*&fragment-id=*",
+    "workspace/get-file-copy-paste-fragment.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "870f9f10-87b5-8137-8005-934804124660",
+    pageId: "870f9f10-87b5-8137-8005-934804124661",
+  });
+
+  // Select first shape
+  await page.getByTestId("layer-item").getByRole("button").first().click();
+  await workspacePage.layers.getByTestId("layer-row").nth(5).click();
+
+  const addLayout = workspacePage.rightSidebar.getByRole("button", {
+    name: "Add layout",
+  });
+
+  await addLayout.click();
+
+  const flexLayout = workspacePage.rightSidebar.getByRole("button", {
+    name: "Flex layout",
+  });
+  await flexLayout.click();
+
+  const layoutSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "Layout container section",
+  });
+
+  await expect(layoutSection).toBeVisible();
+
+  await workspacePage.layers.getByTestId("layer-row").nth(6).click();
+    await page.waitForTimeout(500);
+
+  const layoutItemSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "Layout item section",
+  });
+
+  await expect(layoutItemSection).toBeVisible();
+
+  const verticalMarginInput = layoutItemSection.getByRole("textbox", {
+    name: "Vertical margin",
+  });
+
+  await expect(verticalMarginInput).toBeVisible();
+  
+  await verticalMarginInput.fill("-10");
+  await verticalMarginInput.press("Enter");
+  await expect(verticalMarginInput).toHaveValue("-10");
+});
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
index 08a9753989..e321370e33 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -1280,7 +1280,9 @@
                      :on-click on-add-layout}
             (tr "labels.grid-layout")]]])]
 
-    [:div {:class (stl/css :element-set) :data-testid "inspect-layout"}
+    [:section {:class (stl/css :element-set)
+               :aria-label "Layout container section"
+               :data-testid "inspect-layout"}
      [:div {:class (stl/css :element-title)}
       [:> title-bar*
        {:collapsable has-layout?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 25ca8b04ab..065828c8c3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -145,7 +145,6 @@
          :on-focus on-focus-m1
          :placeholder m1-placeholder
          :icon i/margin-top-bottom
-         :min 0
          :attr :m1
          :default nil
          :input-type :vertical-margin
@@ -176,7 +175,6 @@
          :placeholder m2-placeholder
          :icon i/margin-left-right
          :class (stl/css :horizontal-margin-wrapper)
-         :min 0
          :attr :m2
          :align :right
          :default nil
@@ -271,7 +269,6 @@
          :on-focus on-focus-m1
          :icon i/margin-top
          :class (stl/css :top-margin-wrapper)
-         :min 0
          :default nil
          :attr :m1
          :input-type :vertical-margin
@@ -300,7 +297,6 @@
          :on-focus on-focus-m2
          :icon i/margin-right
          :class (stl/css :right-margin-wrapper)
-         :min 0
          :default nil
          :attr :m2
          :align :right
@@ -331,7 +327,6 @@
          :on-focus on-focus-m3
          :icon i/margin-bottom
          :class (stl/css :bottom-margin-wrapper)
-         :min 0
          :attr :m3
          :default nil
          :align :right
@@ -362,7 +357,6 @@
          :on-focus on-focus-m4
          :icon i/margin-left
          :class (stl/css :left-margin-wrapper)
-         :min 0
          :default nil
          :attr :m4
          :property "Left margin"