From e90b14eb3755cf8bf544c3c970c21d5592b9ace9 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 29 May 2026 08:51:32 +0200
Subject: [PATCH] :bug: Fix grid layout track menu button missing in
 WebKit/Safari

---
 .../ui/specs/inspect-layout.spec.js           | 43 +++++++++++++++++++
 .../viewport/grid_layout_editor.cljs          |  4 +-
 .../viewport/grid_layout_editor.scss          |  8 ++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/frontend/playwright/ui/specs/inspect-layout.spec.js b/frontend/playwright/ui/specs/inspect-layout.spec.js
index 4bcf1e0d32..3006cebf9b 100644
--- a/frontend/playwright/ui/specs/inspect-layout.spec.js
+++ b/frontend/playwright/ui/specs/inspect-layout.spec.js
@@ -5,6 +5,49 @@ test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
 });
 
+// Fix for https://tree.taiga.io/project/penpot/issue/8593
+test("Bug 8593 - Grid layout three dots button visible on hover in grid editor", async ({
+  page,
+}) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+  await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9042.json");
+  await workspacePage.mockRPC(
+    "get-file-fragment?file-id=*&fragment-id=*",
+    "workspace/get-file-fragment-9042.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "af2494d0-39ba-8184-8005-230696f6df5c",
+    pageId: "af2494d0-39ba-8184-8005-230696f6df5d",
+  });
+  await workspacePage.clickLeafLayer("Board");
+  await workspacePage.expectSelectedLayer("Board");
+
+  // Zoom in so tracks are wide enough (>= 110px) for the three-dots button to render.
+  // Board is 200x200 with 2 columns (100px each); zoom 2x makes them 200px.
+  await workspacePage.page.keyboard.press("Control+=");
+  await workspacePage.page.keyboard.press("Control+=");
+  await workspacePage.page.waitForTimeout(200);
+
+  // Enter grid editing mode
+  const layoutContainer = workspacePage.page.getByTestId("inspect-layout");
+  await layoutContainer.getByRole("button", { name: "Edit grid" }).click();
+  await workspacePage.page.waitForTimeout(500);
+
+  // The three-dots button should always exist in the DOM when track is large enough.
+  // Previously it was only rendered when JS hover state was true (broken in WebKit/Safari).
+  // Now it is always rendered and shown/hidden via CSS :hover.
+  const gridEditorButton = workspacePage.page.getByTestId("grid-track-options-btn").first();
+  await expect(gridEditorButton).toBeAttached();
+
+  // Hover over the track wrapper; CSS :hover should make the button visible.
+  // This approach works in all browsers including WebKit/Safari.
+  const gridEditorWrapper = workspacePage.page.getByTestId("grid-track-editor-wrapper").first();
+  await gridEditorWrapper.hover();
+  await expect(gridEditorButton).toBeVisible();
+});
+
 // Fix for https://tree.taiga.io/project/penpot/issue/9042
 test("Bug 9042 - Measurement unit dropdowns for columns are cut off in grid layout edit mode", async ({
   page,
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
index dbcf35e497..e59e984967 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
@@ -903,6 +903,7 @@
       (when (not small?)
         [:foreignObject {:x text-x :y text-y :width text-width :height text-height}
          [:div {:class (stl/css :grid-editor-wrapper)
+                :data-testid "grid-track-editor-wrapper"
                 :on-context-menu handle-show-track-menu
                 :on-pointer-down handle-pointer-down
                 :on-lost-pointer-capture handle-lost-pointer-capture
@@ -916,8 +917,9 @@
             :data-default-value (format-size track-data)
             :on-key-down handle-keydown-track-input
             :on-blur handle-blur-track-input}]
-          (when (and hovering? (not medium?) (not small?))
+          (when (and (not medium?) (not small?))
             [:button {:class (stl/css :grid-editor-button)
+                      :data-testid "grid-track-options-btn"
                       :on-click handle-show-track-menu} deprecated-icon/menu])]])]
 
      [:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))}
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
index 985b57473b..e9d929f847 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
@@ -20,6 +20,7 @@
 
 .grid-editor-wrapper {
   cursor: grab;
+  position: relative;
   width: 100%;
   height: 80%;
   display: flex;
@@ -62,6 +63,8 @@
   right: calc(deprecated.$s-20 / var(--zoom));
   width: calc(deprecated.$s-20 / var(--zoom));
   height: calc(deprecated.$s-20 / var(--zoom));
+  opacity: 0;
+  pointer-events: none;
 
   svg {
     position: absolute;
@@ -73,6 +76,11 @@
   }
 }
 
+.grid-editor-wrapper:hover .grid-editor-button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .grid-frame {
   fill: var(--grid-editor-marker-color);
   fill-opacity: 0.1;