Sidebar resize react panels by KanishJebaMathewM · Pull Request #1870 · maplibre/maputnik

KanishJebaMathewM · 2026-05-09T14:17:26Z

Implements adjustable sidebar resizing using react-resizable-panels as a cleaner alternative to the custom implementation proposed in #1682.

This implementation:

adds resizable sidebar width
adds resizable split between layer list and properties drawer
replaces custom resize logic with library-based panels
simplifies resize handling and accessibility

The original PR #1682 was mainly used as UX/reference inspiration, but this implementation is rebuilt around react-resizable-panels for maintainability.

- Convert AppLayout from class to functional component - Add outer resize handle between sidebar and map (drag to resize) - Add inner resize handle between layer list and properties drawer - Use CSS custom properties for dynamic sidebar/panel widths - Persist both sidebar width and list/drawer ratio to localStorage - Fix layer click selection: clicking layer name text now opens properties - Extract sidebar helpers to src/libs/sidebar.ts - Add unit tests for sidebar helpers - Add Cypress e2e test for resize handles

…e, required onSelect

codecov-commenter · 2026-05-09T14:18:24Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 46.45%. Comparing base (00b20af) to head (167977e).
⚠️ Report is 23 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (00b20af) and HEAD (167977e). Click for more details.

HEAD has 2 uploads less than BASE

Flag BASE (00b20af) HEAD (167977e)

3 1

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #1870       +/-   ##
===========================================
- Coverage   71.57%   46.45%   -25.13%     
===========================================
  Files         102        3       -99     
  Lines        7037      127     -6910     
  Branches     2123       35     -2088     
===========================================
- Hits         5037       59     -4978     
+ Misses       1998       55     -1943     
- Partials        2       13       +11

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

HarelM · 2026-05-12T12:43:47Z

This looks good overall, Besides the translation I think this can be merged.

KanishJebaMathewM · 2026-05-12T12:58:24Z

So do I need to make any changes here?

HarelM · 2026-05-12T13:07:17Z

Yes, Fix the translation files.

KanishJebaMathewM · 2026-05-12T13:22:16Z

Yeahh made those translations

HarelM · 2026-05-12T16:07:33Z

Please fill the others as well.

KanishJebaMathewM · 2026-05-12T16:46:27Z

Please fill the others as well.

Sorry didn't notice

HarelM · 2026-05-12T17:27:07Z

Are you sure the e2e tests are passing?

KanishJebaMathewM · 2026-05-13T12:41:26Z

Yeah it passes

HarelM · 2026-05-13T12:46:31Z

Looks like the tests you added are failing in the CI:

2 failing

  1) sidebar resize
       dragging the handle changes sidebar width:

      Timed out retrying after 4000ms
      + expected - actual


      at Context.eval (webpack://maputnik/./cypress/e2e/sidebar-resize.cy.ts:30:31)
      at <unknown> (http://localhost:8888/__cypress/runner/cypress_runner.js:122365:17)
      at tryCatcher (http://localhost:8888/__cypress/runner/cypress_runner.js:1777:23)
      at Promise.attempt.Promise.try (http://localhost:8888/__cypress/runner/cypress_runner.js:4285:29)
      at Context.shouldFnWithCallback (http://localhost:8888/__cypress/runner/cypress_runner.js:122362:66)
      at Context.shouldFn (http://localhost:8888/__cypress/runner/cypress_runner.js:122405:37)

  2) sidebar resize
       dragging inner handle changes list/drawer split:

      Timed out retrying after 4000ms
      + expected - actual

So you'll need to investigate as to why.
You can use codespaces to simulate a similar environment to how the CI is running, to some extent...

KanishJebaMathewM · 2026-05-18T07:24:31Z

@HarelM can you review this

HarelM · 2026-05-18T07:57:48Z

I keep repeating the same code review comments, this is frustrating. If this is generated by AI please make sure to review this before you ask me to review it.
This is a final warning.

for more information, see https://pre-commit.ci

KanishJebaMathewM · 2026-05-18T08:29:05Z

Apologies for the frustration. I reviewed this carefully — moved all cy.document().trigger calls into the pointerDrag helper. Tested the sidebar resize on the frontend and everything works smoothly, so I committed the changes.

HarelM · 2026-06-03T12:32:02Z

CI is failing, I think some of the buttons and maybe the map is covered by the panel after the tests.
I ran them a few times and they still fail...

HarelM · 2026-06-03T18:18:35Z

 - Fixed headers in left panes (Layers list and Layer editor) to remain visible when scrolling
 - Fix error when using a source from localhost
 - Fix an issue with scrolling when using the code editor
+- Fix Cypress E2E test failures caused by resizable panel sizes persisting in localStorage.


No need to add this, this is part of the feature...

sank64 and others added 5 commits March 2, 2026 18:58

Merge branch 'main' into feature/sidebar-resize

b33a920

fix: address review feedback driver pattern, i18n titles, inline styl…

7219c55

…e, required onSelect

Merge branch 'main' into feature/sidebar-resize

a2c5acf

feat: implement sidebar resizing using react-resizable-panels

28f5a4b

HarelM reviewed May 12, 2026

View reviewed changes

Comment thread src/locales/zh/translation.json Outdated

HarelM reviewed May 12, 2026

View reviewed changes

Comment thread src/locales/fr/translation.json Outdated

HarelM mentioned this pull request May 12, 2026

feat: add adjustable sidebar width with drag handles #1682

Closed

Add Chinese and French translations for resize UI strings

fbea51a

updated translations

be05842

KanishJebaMathewM and others added 2 commits May 14, 2026 16:18

e22e test passing

b099797

Merge branch 'main' into sidebar-resize-react-panels

5aebb40

HarelM reviewed May 14, 2026

View reviewed changes

Comment thread cypress/e2e/maputnik-driver.ts Outdated

test: replace cy.visit with helper.when.visit based on PR feedback

7267aac

HarelM reviewed May 18, 2026

View reviewed changes

Comment thread cypress/e2e/sidebar-resize.cy.ts Outdated

KanishJebaMathewM and others added 2 commits May 18, 2026 13:54

test: move pointer drag events to helper

f64fe0b

[pre-commit.ci] auto fixes from pre-commit.com hooks

631220c

for more information, see https://pre-commit.ci

Merge branch 'main' into sidebar-resize-react-panels

35a05ab

HarelM approved these changes Jun 3, 2026

View reviewed changes

HarelM enabled auto-merge (squash) June 3, 2026 09:27

test: reset react-resizable-panels storage between tests

167977e

auto-merge was automatically disabled June 3, 2026 17:08
Head branch was pushed to by a user without write access

HarelM reviewed Jun 3, 2026

View reviewed changes

Uh oh!

Conversation

KanishJebaMathewM commented May 9, 2026

Uh oh!

codecov-commenter commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

HarelM commented May 12, 2026

Uh oh!

KanishJebaMathewM commented May 12, 2026

Uh oh!

HarelM commented May 12, 2026

Uh oh!

KanishJebaMathewM commented May 12, 2026

Uh oh!

HarelM commented May 12, 2026

Uh oh!

KanishJebaMathewM commented May 12, 2026

Uh oh!

HarelM commented May 12, 2026

Uh oh!

KanishJebaMathewM commented May 13, 2026

Uh oh!

HarelM commented May 13, 2026

Uh oh!

Uh oh!

KanishJebaMathewM commented May 18, 2026

Uh oh!

Uh oh!

HarelM commented May 18, 2026

Uh oh!

KanishJebaMathewM commented May 18, 2026

Uh oh!

HarelM commented Jun 3, 2026

Uh oh!

HarelM Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov-commenter commented May 9, 2026 •

edited

Loading