github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-09 17:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix grid layout track menu button missing in WebKit/Safari

Browse Source
This commit is contained in:
alonso.torres 2026-05-29 08:51:32 +02:00 committed by Alonso Torres
parent 16dc83616a
commit e90b14eb37
3 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/playwright/ui/specs/inspect-layout.spec.js
View File

@ -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,

4
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View File

@ -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)))}

8
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
View File

@ -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;