ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-06 06:10:00 +00:00
Code Issues Projects Releases Wiki Activity

fix: keep headers visible when scrolling left panes (#1485)

Browse Source 
Keeps headers visible when scrolling left panes as described in the
[issue 951
](https://github.com/maplibre/maputnik/issues/951)

The fix was manually confirmed to be working, see video below.

## Before (taken from the issue)
<img width="713" height="231" alt="image"
src="https://github.com/user-attachments/assets/c1eadb0d-6dbf-4199-8732-68b07d626003"
/>


## After

https://github.com/user-attachments/assets/ab5e4a6f-c5f9-44fd-850d-8eac58c35c68

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Jere Suikkila
2025-11-04 02:11:13 -05:00
committed by GitHub
parent 46f0d7620d
commit 5b34a3791f
7 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
cypress/e2e/layer-editor.cy.ts
View File

@@ -257,4 +257,24 @@ describe("layer editor", () => {
then(get.element(".cm-lint-marker-error")).shouldExist();
});
});
describe("sticky header", () => {
it("should keep layer header visible when scrolling properties", () => {
// Setup: Create a layer with many properties (e.g., symbol layer)
when.modal.fillLayers({
type: "symbol",
layer: "example",
});
when.wait(500);
const header = get.elementByTestId("layer-editor.header");
then(header).shouldBeVisible();
get.element(".maputnik-scroll-container").scrollTo("bottom", { ensureScrollable: false });
when.wait(200);
then(header).shouldBeVisible();
then(get.elementByTestId("skip-target-layer-editor")).shouldBeVisible();
});
});
});

23
cypress/e2e/layers-list.cy.ts
View File

@@ -515,4 +515,27 @@ describe("layers list", () => {
});
});
});
describe("sticky header", () => {
it("should keep header visible when scrolling layer list", () => {
// Setup: Create multiple layers to enable scrolling
for (let i = 0; i < 20; i++) {
when.modal.open();
when.modal.fillLayers({
id: `layer-${i}`,
type: "background",
});
}
when.wait(500);
const header = get.elementByTestId("layer-list.header");
then(header).shouldBeVisible();
// Scroll the layer list container (use ensureScrollable: false to avoid flakiness)
get.elementByTestId("layer-list").scrollTo("bottom", { ensureScrollable: false });
when.wait(200);
then(header).shouldBeVisible();
then(get.elementByTestId("layer-list:add-layer")).shouldBeVisible();
});
});
});