chore(deps): Bump maplibre-gl from 6.7.0 to 6.8.0 (#2156)

Bumps [maplibre-gl](https://github.com/maplibre/maplibre-gl-js) from
6.7.0 to 6.8.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/maplibre/maplibre-gl-js/releases">maplibre-gl's
releases</a>.</em></p>
<blockquote>
<h2>v6.8.0</h2>
<h3>✨ Features and improvements</h3>
<ul>
<li>Add <code>map.getStyleUrl()</code>, which returns the URL the style
was loaded from, or <code>null</code> when the style was given as an
object (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/7109">#7109</a>)
(by <a
href="https://github.com/bradymadden97"><code>@​bradymadden97</code></a>
and <a href="https://github.com/giswqs"><code>@​giswqs</code></a>)</li>
<li>Sample terrain render-to-texture output through mipmaps with
trilinear filtering, so draped layers stop shimmering and aliasing at
high pitch (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8328">#8328</a>,
continues <a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/7673">#7673</a>)
(by <a
href="https://github.com/AveryanAlex"><code>@​AveryanAlex</code></a>)</li>
<li>Build the <code>Intl.Segmenter</code> instances used for text
shaping on first use instead of at import, shaving several milliseconds
off loading MapLibre on the main thread (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8337">#8337</a>)
(by <a
href="https://github.com/cherenkov"><code>@​cherenkov</code></a>)</li>
<li>Link shader programs before reading their compile status, so the
driver can overlap the compiles and the main thread waits less on shader
compilation (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8338">#8338</a>)
(by <a
href="https://github.com/cherenkov"><code>@​cherenkov</code></a>)</li>
<li>Build the default <code>Marker</code> pin once and clone it per
marker, so creating many default markers takes roughly half the
constructor time (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8340">#8340</a>)
(by <a
href="https://github.com/cherenkov"><code>@​cherenkov</code></a>)</li>
<li>Add SDF rendering support for fill patterns, using
<code>fill-color</code> as the foreground color (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/7747">#7747</a>)
(by <a
href="https://github.com/bradymadden97"><code>@​bradymadden97</code></a>
and <a
href="https://github.com/deniial00"><code>@​deniial00</code></a>)</li>
<li>Warn once when the canvas is clamped to <code>maxCanvasSize</code>,
which previously lowered the rendered resolution silently (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8200">#8200</a>)
(by <a
href="https://github.com/str0kes"><code>@​str0kes</code></a>)</li>
</ul>
<h3>🐞 Bug fixes</h3>
<ul>
<li>Fix a marker's popup jumping to another world copy when the marker
is moved across the antimeridian on a zoomed-out map (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/5655">#5655</a>,
<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8326">#8326</a>,
continues <a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5956">#5956</a>)
(by <a
href="https://github.com/yuiseki"><code>@​yuiseki</code></a>)</li>
<li>Fix terrain drape textures not being refreshed after zoom changes,
causing stale rendering at the new zoom level (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8251">#8251</a>)
(by <a href="https://github.com/patte"><code>@​patte</code></a>)</li>
<li>Fix a gap between the sky and the ground at high pitch while globe
transitions to mercator (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/7382">#7382</a>)
(by <a
href="https://github.com/birkskyum"><code>@​birkskyum</code></a>)</li>
<li>Treat an empty tile response (e.g. HTTP 204) as no data: raster-DEM
tiles now load without elevation instead of failing with a <code>dem
dimension mismatch</code> error, and empty raster tiles render as
transparent (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/1551">#1551</a>)
(by <a
href="https://github.com/clement-igonet"><code>@​clement-igonet</code></a>)</li>
<li>Validate the <code>before</code> layer in <code>map.moveLayer</code>
before reordering, so passing the id of a layer that does not exist
leaves the layer order untouched instead of dropping the moved layer out
of it (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8301">#8301</a>)
(by <a href="https://github.com/lazerg"><code>@​lazerg</code></a>)</li>
<li>Fix visible seams between hillshade tiles when using linear
interpolation. (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8302">#8302</a>)
(by <a
href="https://github.com/Turbo87"><code>@​Turbo87</code></a>)</li>
<li>Fix the map freezing when a render task throws an error (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6093">#6093</a>)
(by <a
href="https://github.com/UberMouse"><code>@​UberMouse</code></a>)</li>
<li>Fix <code>getCameraAltitude()</code> returning <code>NaN</code>
under <code>globe</code> and <code>vertical-perspective</code>, which
disabled marker terrain occlusion and the camera terrain check; the
altitude now follows the sphere (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6584">#6584</a>)
(by <a
href="https://github.com/bigmistqke"><code>@​bigmistqke</code></a> and
<a href="https://github.com/patte"><code>@​patte</code></a>)</li>
<li>Draw an elevated symbol on globe when the symbol itself is in view
but the ground under it is behind the horizon; occlusion now follows the
line of sight to the elevated point (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8253">#8253</a>)
(by <a
href="https://github.com/clement-igonet"><code>@​clement-igonet</code></a>)</li>
<li>Fix <code>setTiles</code> producing stale tile URLs when
<code>loadTile</code> runs in the same frame (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8323">#8323</a>)
(by <a
href="https://github.com/johncarmack1984"><code>@​johncarmack1984</code></a>
and <a
href="https://github.com/nostrorom"><code>@​nostrorom</code></a>)</li>
<li>Keep the tile under an elevated symbol from being culled near the
horizon, so a symbol with a large <code>symbol-height-offset</code>
stays visible until it is behind the planet (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8316">#8316</a>)
(by <a
href="https://github.com/clement-igonet"><code>@​clement-igonet</code></a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md">maplibre-gl's
changelog</a>.</em></p>
<blockquote>
<h2>6.8.0</h2>
<h3>✨ Features and improvements</h3>
<ul>
<li>Add <code>map.getStyleUrl()</code>, which returns the URL the style
was loaded from, or <code>null</code> when the style was given as an
object (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/7109">#7109</a>)
(by <a
href="https://github.com/bradymadden97"><code>@​bradymadden97</code></a>
and <a href="https://github.com/giswqs"><code>@​giswqs</code></a>)</li>
<li>Sample terrain render-to-texture output through mipmaps with
trilinear filtering, so draped layers stop shimmering and aliasing at
high pitch (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8328">#8328</a>,
continues <a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/7673">#7673</a>)
(by <a
href="https://github.com/AveryanAlex"><code>@​AveryanAlex</code></a>)</li>
<li>Build the <code>Intl.Segmenter</code> instances used for text
shaping on first use instead of at import, shaving several milliseconds
off loading MapLibre on the main thread (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8337">#8337</a>)
(by <a
href="https://github.com/cherenkov"><code>@​cherenkov</code></a>)</li>
<li>Link shader programs before reading their compile status, so the
driver can overlap the compiles and the main thread waits less on shader
compilation (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8338">#8338</a>)
(by <a
href="https://github.com/cherenkov"><code>@​cherenkov</code></a>)</li>
<li>Build the default <code>Marker</code> pin once and clone it per
marker, so creating many default markers takes roughly half the
constructor time (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8340">#8340</a>)
(by <a
href="https://github.com/cherenkov"><code>@​cherenkov</code></a>)</li>
<li>Add SDF rendering support for fill patterns, using
<code>fill-color</code> as the foreground color (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/7747">#7747</a>)
(by <a
href="https://github.com/bradymadden97"><code>@​bradymadden97</code></a>
and <a
href="https://github.com/deniial00"><code>@​deniial00</code></a>)</li>
<li>Warn once when the canvas is clamped to <code>maxCanvasSize</code>,
which previously lowered the rendered resolution silently (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8200">#8200</a>)
(by <a
href="https://github.com/str0kes"><code>@​str0kes</code></a>)</li>
</ul>
<h3>🐞 Bug fixes</h3>
<ul>
<li>Fix a marker's popup jumping to another world copy when the marker
is moved across the antimeridian on a zoomed-out map (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/5655">#5655</a>,
<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8326">#8326</a>,
continues <a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5956">#5956</a>)
(by <a
href="https://github.com/yuiseki"><code>@​yuiseki</code></a>)</li>
<li>Fix terrain drape textures not being refreshed after zoom changes,
causing stale rendering at the new zoom level (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8251">#8251</a>)
(by <a href="https://github.com/patte"><code>@​patte</code></a>)</li>
<li>Fix a gap between the sky and the ground at high pitch while globe
transitions to mercator (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/7382">#7382</a>)
(by <a
href="https://github.com/birkskyum"><code>@​birkskyum</code></a>)</li>
<li>Treat an empty tile response (e.g. HTTP 204) as no data: raster-DEM
tiles now load without elevation instead of failing with a <code>dem
dimension mismatch</code> error, and empty raster tiles render as
transparent (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/1551">#1551</a>)
(by <a
href="https://github.com/clement-igonet"><code>@​clement-igonet</code></a>)</li>
<li>Read the map container's dimensions before mutating it in
<code>Map#_setupContainer</code>, avoiding a forced synchronous layout
reflow on every map initialization (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8307">#8307</a>)
(by <a href="https://github.com/lazerg"><code>@​lazerg</code></a>)</li>
<li>Validate the <code>before</code> layer in <code>map.moveLayer</code>
before reordering, so passing the id of a layer that does not exist
leaves the layer order untouched instead of dropping the moved layer out
of it (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8301">#8301</a>)
(by <a href="https://github.com/lazerg"><code>@​lazerg</code></a>)</li>
<li>Fix visible seams between hillshade tiles when using linear
interpolation. (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8302">#8302</a>)
(by <a
href="https://github.com/Turbo87"><code>@​Turbo87</code></a>)</li>
<li>Fix the map freezing when a render task throws an error (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6093">#6093</a>)
(by <a
href="https://github.com/UberMouse"><code>@​UberMouse</code></a>)</li>
<li>Fix <code>getCameraAltitude()</code> returning <code>NaN</code>
under <code>globe</code> and <code>vertical-perspective</code>, which
disabled marker terrain occlusion and the camera terrain check; the
altitude now follows the sphere (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6584">#6584</a>)
(by <a
href="https://github.com/bigmistqke"><code>@​bigmistqke</code></a> and
<a href="https://github.com/patte"><code>@​patte</code></a>)</li>
<li>Draw an elevated symbol on globe when the symbol itself is in view
but the ground under it is behind the horizon; occlusion now follows the
line of sight to the elevated point (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8253">#8253</a>)
(by <a
href="https://github.com/clement-igonet"><code>@​clement-igonet</code></a>)</li>
<li>Fix <code>setTiles</code> producing stale tile URLs when
<code>loadTile</code> runs in the same frame (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/8323">#8323</a>)
(by <a
href="https://github.com/johncarmack1984"><code>@​johncarmack1984</code></a>
and <a
href="https://github.com/nostrorom"><code>@​nostrorom</code></a>)</li>
<li>Keep the tile under an elevated symbol from being culled near the
horizon, so a symbol with a large <code>symbol-height-offset</code>
stays visible until it is behind the planet (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8316">#8316</a>)
(by <a
href="https://github.com/clement-igonet"><code>@​clement-igonet</code></a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/9df21da874e49ee4943aecb3350db9dfd98e7d1b"><code>9df21da</code></a>
Bump js version to 6.8.0 (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8371">#8371</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/05302adadc681543ee15ff60290bb70b8348a978"><code>05302ad</code></a>
fix: compute pixelsPerMeter in the transform helper so
getCameraAltitude() wo...</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/cf1781cb5ea3af00f9f9665649431d89ebd0856e"><code>cf1781c</code></a>
test: serve the browser tests' tiles and styles from local fixtures (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8367">#8367</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/055db89755ae902f4a1840308b270bc0313b0784"><code>055db89</code></a>
refactor: unify bucket dependency finalization through addFeatures (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8347">#8347</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/045a3ce58615fcb0ac155ac309bf9dbf23d1cbd6"><code>045a3ce</code></a>
Warn when the canvas is clamped to maxCanvasSize (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8275">#8275</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/d2d0371abacb40e6b8f3136af1eba5e93deecdb1"><code>d2d0371</code></a>
Keep tiles under elevated symbols from being culled near the horizon (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8319">#8319</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/0b33607be5d0ac25844696a7ba2eac1d8ea9dfe3"><code>0b33607</code></a>
chore(deps-dev): bump puppeteer from 25.9.0 to 25.10.0 (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8359">#8359</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/86d30b0234131b16d1b77681c946be53f88dc91a"><code>86d30b0</code></a>
chore(deps-dev): bump devtools-protocol from 0.0.1687809 to 0.0.1692173
(<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8354">#8354</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/9a0884f180d7f591323183ff6694af0a2805803e"><code>9a0884f</code></a>
chore(deps-dev): bump cspell from 10.2.0 to 10.2.1 (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8360">#8360</a>)</li>
<li><a
href="https://github.com/maplibre/maplibre-gl-js/commit/3d42c642babf9d31d8fea3967f62c78d1facc2c5"><code>3d42c64</code></a>
chore(deps-dev): bump postcss from 8.5.26 to 8.5.28 (<a
href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/8362">#8362</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/maplibre/maplibre-gl-js/compare/v6.7.0...v6.8.0">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=maplibre-gl&package-manager=npm_and_yarn&previous-version=6.7.0&new-version=6.8.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -5,7 +5,6 @@
 - Upgrade to MapLibre GL JS 6 and Vite 8, and update the remaining dependencies
 - Serve the RTL text plugin from `@mapbox/mapbox-gl-rtl-text` instead of a pinned CDN URL, so its version is tracked in `package.json`
 - Exported HTML now loads MapLibre GL JS as an ES module, since v6 no longer ships a UMD bundle
-- The sidebar can now be resized, both as a whole and in the split between the layer list and the layer editor
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

e2e/playwright-helper.ts

@@ -122,8 +122,6 @@ export class Assertable<T> {
   // Value assertions (auto-retrying for Query targets).
   shouldEqual = (value: any) => this.assertValue((actual) => expect(actual).toBe(value));
 
-  shouldBeGreaterThan = (value: number) => this.assertValue((actual) => expect(actual).toBeGreaterThan(value));
-
   shouldInclude = (value: any) =>
     this.assertValue((actual) => {
       if (typeof value === "object" && value !== null) {
@@ -351,15 +349,6 @@ export class PlaywrightHelper {
       await this.page.mouse.up();
     },
 
-    /** Presses at the centre of an element and drags it by the given offset. */
-    dragBy: async (testId: string, deltaX: number, deltaY = 0) => {
-      const { x, y } = await centerOf(this.testId(testId));
-      await this.page.mouse.move(x, y);
-      await this.page.mouse.down();
-      await this.page.mouse.move(x + deltaX, y + deltaY, { steps: 10 });
-      await this.page.mouse.up();
-    },
-
     clickCenter: async (testId: string) => {
       const { x, y } = await centerOf(this.testId(testId));
       await this.page.mouse.move(x, y);
@@ -457,13 +446,6 @@ export class PlaywrightHelper {
 
     inputValue: (testId: string) => new Query<string>(() => this.testId(testId).first().inputValue()),
 
-    elementWidth: (testId: string) =>
-      new Query<number>(async () => {
-        const box = await this.testId(testId).first().boundingBox();
-        if (!box) throw new Error(`Element "${testId}" has no bounding box`);
-        return box.width;
-      }),
-
     elementsText: (testId: string) => new Query<string>(() => this.testId(testId).first().innerText()),
 
     locationHash: () => new Query<string>(async () => new URL(this.page.url()).hash),

e2e/sidebar-resize.spec.ts

@@ -1,27 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("sidebar resize", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("layer");
-  });
-
-  test("dragging the outer handle widens the sidebar", async () => {
-    const initialWidth = await get.elementWidth("sidebar-panel").get();
-
-    await when.dragBy("sidebar-resize-handle", 100);
-
-    await then(get.elementWidth("sidebar-panel")).shouldBeGreaterThan(initialWidth + 50);
-  });
-
-  test("dragging the inner handle widens the layer list", async () => {
-    const initialWidth = await get.elementWidth("layer-list-panel").get();
-
-    await when.dragBy("inner-resize-handle", 50);
-
-    await then(get.elementWidth("layer-list-panel")).shouldBeGreaterThan(initialWidth + 20);
-  });
-});

package-lock.json

@@ -42,7 +42,7 @@
         "lodash.get": "^4.4.2",
         "lodash.isequal": "^4.5.0",
         "lodash.throttle": "^4.1.1",
-        "maplibre-gl": "^6.7.0",
+        "maplibre-gl": "^6.8.0",
         "maputnik-design": "github:maputnik/design#172b06c",
         "ol": "^10.10.0",
         "ol-mapbox-style": "^13.4.3",
@@ -58,7 +58,6 @@
         "react-i18next": "^17.0.13",
         "react-icons": "^5.7.0",
         "react-markdown": "^10.1.0",
-        "react-resizable-panels": "^4.11.0",
         "reconnecting-websocket": "^4.4.0",
         "slugify": "^1.6.9",
         "string-hash": "^1.1.3",
@@ -108,7 +107,7 @@
         "stylelint-config-recommended-scss": "^17.0.1",
         "stylelint-scss": "^7.2.0",
         "typescript": "^6.0.3",
-        "typescript-eslint": "^8.69.0",
+        "typescript-eslint": "^8.70.0",
         "uuid": "^14.0.2",
         "vite": "^8.2.2",
         "vite-plugin-istanbul": "^9.0.1",
@@ -1720,9 +1719,9 @@
       }
     },
     "node_modules/@maplibre/mlt": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@maplibre/mlt/-/mlt-1.2.0.tgz",
-      "integrity": "sha512-g45M8gEI4sMO3X9ib4K7n3ZKFf0qQOL+NMkHCnEK51lOrYFHiEssOuZncx1+miIgi1IEE2NcbRMcq8RBkL+QHA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@maplibre/mlt/-/mlt-1.2.1.tgz",
+      "integrity": "sha512-5n5dgolE2EYxwCKgx8vlwURCB8A+kyfJJyThlYimjlGgOcOe2Bhw9VxxnnHC91OC9PgHg+nVdgVPTYPkIo62vg==",
       "license": "(MIT OR Apache-2.0)",
       "dependencies": {
         "@mapbox/point-geometry": "^1.1.0"
@@ -3079,17 +3078,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.69.0.tgz",
-      "integrity": "sha512-t5jQTKPIgVW1PE6dR6H6Qz5gm8zjMlX5/2gRaOGd9eO6V7J+tQc6iWKukEe7dY8u9HyYasQ0yfF0/FSSTEO2gA==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.70.0.tgz",
+      "integrity": "sha512-/v8HZt6RlyIZxB3ntehELOcUcfxKPVGWXnQdJuHRmzrqgF8nQypcC/oxGW+Ot4VGKDq81XugPKxx0n5PBtf9PA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.69.0",
-        "@typescript-eslint/type-utils": "8.69.0",
-        "@typescript-eslint/utils": "8.69.0",
-        "@typescript-eslint/visitor-keys": "8.69.0",
+        "@typescript-eslint/scope-manager": "8.70.0",
+        "@typescript-eslint/type-utils": "8.70.0",
+        "@typescript-eslint/utils": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.5.0"
@@ -3102,15 +3101,15 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.69.0",
+        "@typescript-eslint/parser": "^8.70.0",
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.8.tgz",
-      "integrity": "sha512-YYNsSlXBjMk92SKnkwvB5LOVSa6OznlFUGcsvrFgNJbJCd0M1XKeFVRc8ZByeCqz32FivYNHJVooLmdqrmvp/Q==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.9.tgz",
+      "integrity": "sha512-brTTsvFRt5C1gGHtPst/281UjPD5t9fBqbgoMPlVWy11ZLTPfu7HxK4ZYqO9H7o/yC9rSTCI85EaQ4OoY12qYw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3118,16 +3117,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.69.0.tgz",
-      "integrity": "sha512-l4b0DhWioGg6Gt2ebGlvfkFMOjRsauxtsnDRwUSRX1qHq3HdTfQHV8wW9zEXeciai6HfeaKOedQn2Zoofx3WBw==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.70.0.tgz",
+      "integrity": "sha512-zYvrmj9Yxd63UGaXw+kdt6A0F0s0qveJyuatIM77bYC2DE4pgmg7a50u8LR7PRtXd0x+h+Tl3eXabGm06SWd3Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.69.0",
-        "@typescript-eslint/types": "8.69.0",
-        "@typescript-eslint/typescript-estree": "8.69.0",
-        "@typescript-eslint/visitor-keys": "8.69.0",
+        "@typescript-eslint/scope-manager": "8.70.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3143,14 +3142,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.69.0.tgz",
-      "integrity": "sha512-yi4obFrHMmnsesWehHbkg9zMA7Jt8cXT+mKM08G999pH1yT6nqgsHx7MYm0uY1wAj8CqiBXYRJ7WAT0QdQHQXg==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.70.0.tgz",
+      "integrity": "sha512-hFHbTNqhU9G+2eKFXCBVb1tjFT/LceiJ4+HfLO4pTpDI0KHi6iajpcFFkaSQ9gXmCh7n82A0PthaayEdN6mspQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.69.0",
-        "@typescript-eslint/types": "^8.69.0",
+        "@typescript-eslint/tsconfig-utils": "^8.70.0",
+        "@typescript-eslint/types": "^8.70.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3165,14 +3164,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.69.0.tgz",
-      "integrity": "sha512-ewfspqWvSxKSOaplqAUNbaSFO0eB6w1EtQ+esfYFRm3614Ty4uNtExkcbgd6nWsXphbqKyf9ZYdbZdv2xEoWEQ==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.70.0.tgz",
+      "integrity": "sha512-8nP3Kwh5hlgZ4FicGvmznAmJe8UL4sdU8tLukrPaMuQmDuk4Y8xYfzu/aYZW4xT2JCgc7H/TpDI5cGlxcWJSqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.69.0",
-        "@typescript-eslint/visitor-keys": "8.69.0"
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3183,9 +3182,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.69.0.tgz",
-      "integrity": "sha512-xNqK7YTDZsLniQMV/4rpFR8Z5JlqeRvVjuG1YgF/mdPVH84HSD19L8CczMA0qg2RfwEV231GHH3VnToJDo4MfQ==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.70.0.tgz",
+      "integrity": "sha512-adnkeeNq9Sq1sUf4+FRVc0KdgYghzsgFpZSQVZVvY0LCuUuN0FnQgyGzCJeC4fW1cdXseBAjU2EOqUIjbNcZUw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3200,15 +3199,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.69.0.tgz",
-      "integrity": "sha512-ZfoJAVg3JZndQEpEl9petVlxau3lRuElc4HRMuAlLCf8to04/iHz692RUSNmXKDjEuJmIL+KZ2/BsOcBc16dsA==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.70.0.tgz",
+      "integrity": "sha512-NUMKIhYVaVIVLnRL9CRt+VVcuLgSHUCpXn4/+K8wql+vdInUzvx8BjUO1oJ7cG9shjFJKtF8F8Hh2kCh3/KBVw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.69.0",
-        "@typescript-eslint/typescript-estree": "8.69.0",
-        "@typescript-eslint/utils": "8.69.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0",
+        "@typescript-eslint/utils": "8.70.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.5.0"
       },
@@ -3225,9 +3224,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.69.0.tgz",
-      "integrity": "sha512-K3VrubUPhlo9VDBS6QdI8YB5j7ClpqLRdefcz6PFrhnwicehBweqQ9Evhl4l+FYz0HdDmMqIiSX0aldGRYtDCA==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.70.0.tgz",
+      "integrity": "sha512-asTOIYhDg4zdzOScCyaytrsV3cR6B4ecPQlXw/dJIm7J/MZTtCtfVII9JD8Geh4jTCrK/Xe6cg5UevoleMcoJQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3239,16 +3238,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.69.0.tgz",
-      "integrity": "sha512-AdFkgqck3Vudb/kWnxlyafU/4aBhHrbQ9locP2N4psXTy5mOBg0SHJumnLvx7r6g1gV4DKvUFwV2nJZBoqOD8w==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.70.0.tgz",
+      "integrity": "sha512-d9NmHMPEKQ7QCLLm1jI3zmoQBwT5KwFYjXBJ9ymZfKCUU+5rmTRykKAFvH5Qn/ZCds3CEAFS9OC9M/jkl0X2bA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.69.0",
-        "@typescript-eslint/tsconfig-utils": "8.69.0",
-        "@typescript-eslint/types": "8.69.0",
-        "@typescript-eslint/visitor-keys": "8.69.0",
+        "@typescript-eslint/project-service": "8.70.0",
+        "@typescript-eslint/tsconfig-utils": "8.70.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0",
         "debug": "^4.4.3",
         "minimatch": "^10.2.2",
         "semver": "^7.7.3",
@@ -3306,16 +3305,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.69.0.tgz",
-      "integrity": "sha512-tUbx60BBqQa31kXF5MCsOOLL5E/WzUuxIn7YpAvq+eaUlqvk8/NXnXMBNAdLCr0icjkzem7iUA5QqWHe/hJ1aw==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.70.0.tgz",
+      "integrity": "sha512-oZmtKJz/4fufZ2p3+Cn3ijEojcdfR+1zYDH2xKYrEly0dR/Q/1xUPRCOlKGxod78nWlU2UnDe09GZ3TaknBFGA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.69.0",
-        "@typescript-eslint/types": "8.69.0",
-        "@typescript-eslint/typescript-estree": "8.69.0"
+        "@typescript-eslint/scope-manager": "8.70.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3330,13 +3329,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.69.0.tgz",
-      "integrity": "sha512-+rmdgPA+EXkNgKYvHvFfhrs35utXbwaC5PGpDquSXcoXQDKUA5UjV0LmTucG/4JXkM31BTu4TilHtrN8IVBe8w==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.70.0.tgz",
+      "integrity": "sha512-BoC8PiO4Hkdo0TVJh9Ntxr5MxPDI7/oFsrygN5ADelFSeXG/qgNuucIGA+L5Z6JpPTE/uRfcTWtscjbUaufepQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.69.0",
+        "@typescript-eslint/types": "8.70.0",
         "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
@@ -8395,9 +8394,9 @@
       "license": "BSD-2-Clause"
     },
     "node_modules/maplibre-gl": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-6.7.0.tgz",
-      "integrity": "sha512-Y1Q1+UP9WXou0DUrnaFdDsoMqiMCWy6aS968IBUaQ2eZi6H1/kPCfpfZOWXFJZbeKMkX9Wo6OFzY/k48qqPf3Q==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-6.8.0.tgz",
+      "integrity": "sha512-+ZkjKTodsVLY0ewQThvXRxXQsclcsSgOm5LlnrBM3G8AloMJKt6Haw8mY4xrOl8T0WMqH6DTYjktZ9zGQXZd4w==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@mapbox/point-geometry": "^1.1.0",
@@ -8406,7 +8405,7 @@
         "@mapbox/vector-tile": "^3.0.0",
         "@maplibre/geojson-vt": "^6.1.1",
         "@maplibre/maplibre-gl-style-spec": "^26.4.1",
-        "@maplibre/mlt": "^1.2.0",
+        "@maplibre/mlt": "^1.2.1",
         "@maplibre/vt-pbf": "^4.3.2",
         "@types/geojson": "^7946.0.16",
         "earcut": "^3.2.3",
@@ -10733,16 +10732,6 @@
         "react": ">=18"
       }
     },
-    "node_modules/react-resizable-panels": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.11.0.tgz",
-      "integrity": "sha512-LPk/AkFDGkg7SsbOyL93ojrE6E7lhrxxDwnYNjfmnSeI6BE7Sje6dB24PXgZk8DeugdeXNk1LO+ohRqIjhxiLw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/reactcss": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
@@ -12441,16 +12430,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.69.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.69.0.tgz",
-      "integrity": "sha512-B3MltX0VqjUBNEe3b3sSuiRbfa6XrfHFtBiPamjT5AsW/dfq+y+bc0wyuS9DxAS1LyzCxRp2+rxzpLUvqM2BvA==",
+      "version": "8.70.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.70.0.tgz",
+      "integrity": "sha512-P/W5cz70/cQAuKfY3xwQMWWTV7BvJ0mAQmi+9mBcsVPaBUpd6Ohpa+fECv9rBFrQcig86jAiNBFNWUqnTjr4pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.69.0",
-        "@typescript-eslint/parser": "8.69.0",
-        "@typescript-eslint/typescript-estree": "8.69.0",
-        "@typescript-eslint/utils": "8.69.0"
+        "@typescript-eslint/eslint-plugin": "8.70.0",
+        "@typescript-eslint/parser": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0",
+        "@typescript-eslint/utils": "8.70.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"

package.json

@@ -60,7 +60,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^6.7.0",
+    "maplibre-gl": "^6.8.0",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^10.10.0",
     "ol-mapbox-style": "^13.4.3",
@@ -76,7 +76,6 @@
     "react-i18next": "^17.0.13",
     "react-icons": "^5.7.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^4.11.0",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.6.9",
     "string-hash": "^1.1.3",
@@ -143,7 +142,7 @@
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.69.0",
+    "typescript-eslint": "^8.70.0",
     "uuid": "^14.0.2",
     "vite": "^8.2.2",
     "vite-plugin-istanbul": "^9.0.1",

src/components/AppLayout.tsx

@@ -1,23 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels";
+import React from "react";
 import { ScrollContainer } from "./ScrollContainer";
-import { useTranslation } from "react-i18next";
+import { type WithTranslation, withTranslation } from "react-i18next";
 import { IconContext } from "react-icons";
 
-// Keep these in sync with $layout-list-width/$layout-editor-width in _vars.scss
-const DEFAULT_LIST_WIDTH = 200;
-const DEFAULT_DRAWER_WIDTH = 370;
-const DEFAULT_SIDEBAR_WIDTH = DEFAULT_LIST_WIDTH + DEFAULT_DRAWER_WIDTH;
-const PANEL_STYLE: React.CSSProperties = { overflow: "hidden" };
-
-const SIDEBAR_LAYOUT_ID = "maputnik:sidebar-layout";
-const SIDEBAR_INNER_LAYOUT_ID = "maputnik:sidebar-inner-layout";
-const SIDEBAR_PANEL_ID = "sidebar";
-const MAP_PANEL_ID = "map";
-const LIST_PANEL_ID = "list";
-const DRAWER_PANEL_ID = "drawer";
-
-type AppLayoutProps = {
+type AppLayoutInternalProps = {
   toolbar: React.ReactElement
   layerList: React.ReactElement
   layerEditor?: React.ReactElement
@@ -25,108 +11,43 @@ type AppLayoutProps = {
   map: React.ReactElement
   bottom?: React.ReactElement
   modals?: React.ReactNode
-};
+} & WithTranslation;
 
-export const AppLayout: React.FC<AppLayoutProps> = (props) => {
-  const { t, i18n } = useTranslation();
+class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
 
-  const sidebarLayout = useDefaultLayout({
-    id: SIDEBAR_LAYOUT_ID,
-    panelIds: [SIDEBAR_PANEL_ID, MAP_PANEL_ID],
-  });
-  const innerLayout = useDefaultLayout({
-    id: SIDEBAR_INNER_LAYOUT_ID,
-    panelIds: [LIST_PANEL_ID, DRAWER_PANEL_ID],
-  });
+  render() {
+    document.body.dir = this.props.i18n.dir();
 
-  // The bottom panel is position: fixed, so it can't be a flex sibling of the
-  // map panel; it follows the sidebar through this custom property instead.
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
-
-  useEffect(() => {
-    document.body.dir = i18n.dir();
-  }, [i18n, i18n.language]);
-
-  return <IconContext.Provider value={{size: "14px"}}>
-    <div
-      className="maputnik-layout"
-      style={{"--sidebar-width": `${sidebarWidth}px`} as React.CSSProperties}
-    >
-      {props.toolbar}
-      <div className="maputnik-layout-main">
-        <Group
-          className="maputnik-layout-panels"
-          orientation="horizontal"
-          id={SIDEBAR_LAYOUT_ID}
-          defaultLayout={sidebarLayout.defaultLayout}
-          onLayoutChanged={sidebarLayout.onLayoutChanged}
-        >
-          <Panel
-            id={SIDEBAR_PANEL_ID}
-            data-wd-key="sidebar-panel"
-            className={props.codeEditor ? "maputnik-layout-code-editor" : "maputnik-layout-sidebar"}
-            style={PANEL_STYLE}
-            defaultSize={`${DEFAULT_SIDEBAR_WIDTH}px`}
-            minSize="280px"
-            onResize={({inPixels}) => setSidebarWidth(inPixels)}
-          >
-            {props.codeEditor && <ScrollContainer>
-              {props.codeEditor}
+    return <IconContext.Provider value={{size: "14px"}}>
+      <div className="maputnik-layout">
+        {this.props.toolbar}
+        <div className="maputnik-layout-main">
+          {this.props.codeEditor && <div className="maputnik-layout-code-editor">
+            <ScrollContainer>
+              {this.props.codeEditor}
             </ScrollContainer>
-            }
-            {!props.codeEditor && <Group
-              className="maputnik-layout-sidebar-panels"
-              orientation="horizontal"
-              id={SIDEBAR_INNER_LAYOUT_ID}
-              defaultLayout={innerLayout.defaultLayout}
-              onLayoutChanged={innerLayout.onLayoutChanged}
-            >
-              <Panel
-                id={LIST_PANEL_ID}
-                data-wd-key="layer-list-panel"
-                className="maputnik-layout-list"
-                style={PANEL_STYLE}
-                defaultSize={`${DEFAULT_LIST_WIDTH}px`}
-                minSize="100px"
-              >
-                {props.layerList}
-              </Panel>
-              <Separator
-                className="maputnik-layout-resize-handle"
-                data-wd-key="inner-resize-handle"
-                title={t("Drag to resize the layer list")}
-                aria-label={t("Drag to resize the layer list")}
-              />
-              <Panel
-                id={DRAWER_PANEL_ID}
-                className="maputnik-layout-drawer"
-                style={PANEL_STYLE}
-                defaultSize={`${DEFAULT_DRAWER_WIDTH}px`}
-                minSize="150px"
-              >
-                <ScrollContainer>
-                  {props.layerEditor}
-                </ScrollContainer>
-              </Panel>
-            </Group>
-            }
-          </Panel>
-          <Separator
-            className="maputnik-layout-resize-handle"
-            data-wd-key="sidebar-resize-handle"
-            title={t("Drag to resize the sidebar")}
-            aria-label={t("Drag to resize the sidebar")}
-          />
-          <Panel id={MAP_PANEL_ID} className="maputnik-layout-map" style={PANEL_STYLE} minSize="200px">
-            {props.map}
-          </Panel>
-        </Group>
+          </div>
+          }
+          {!this.props.codeEditor && <>
+            <div className="maputnik-layout-list">
+              {this.props.layerList}
+            </div>
+            <div className="maputnik-layout-drawer">
+              <ScrollContainer>
+                {this.props.layerEditor}
+              </ScrollContainer>
+            </div>
+          </>}
+          {this.props.map}
+        </div>
+        {this.props.bottom && <div className="maputnik-layout-bottom">
+          {this.props.bottom}
+        </div>
+        }
+        {this.props.modals}
       </div>
-      {props.bottom && <div className="maputnik-layout-bottom">
-        {props.bottom}
-      </div>
-      }
-      {props.modals}
-    </div>
-  </IconContext.Provider>;
-};
+    </IconContext.Provider>;
+  }
+}
+
+export const AppLayout = withTranslation()(AppLayoutInternal);

src/locales/de/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "Ausdruck löschen",
   "Delete filter block": "Filterblock löschen",
   "Deuteranopia filter": "Deuteranopie-Filter",
-  "Drag to resize the layer list": "Ziehen, um die Ebenenliste zu skalieren",
-  "Drag to resize the sidebar": "Ziehen, um die Seitenleiste zu skalieren",
   "Duplicate": "Duplizieren",
   "Encoding": "Kodierung",
   "Enter URL...": "URL eingeben...",

src/locales/fr/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "Supprimer l'expression",
   "Delete filter block": "Supprimer le bloc de filtre",
   "Deuteranopia filter": "Filtre Deutéranopie",
-  "Drag to resize the layer list": "Glisser pour redimensionner la liste des calques",
-  "Drag to resize the sidebar": "Glisser pour redimensionner la barre latérale",
   "Duplicate": "Dupliquer",
   "Encoding": "Encodage",
   "Enter URL...": "Entrez l'URL...",

src/locales/he/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "מחיקת ביטוי",
   "Delete filter block": "מחיקת גוש מסנן",
   "Deuteranopia filter": "Deuteranopia filter",
-  "Drag to resize the layer list": "יש לגרור כדי לשנות את גודל רשימת השכבות",
-  "Drag to resize the sidebar": "יש לגרור כדי לשנות את גודל סרגל הצד",
   "Duplicate": "שכפול",
   "Encoding": "קידוד",
   "Enter URL...": "הכנסו כתובת",

src/locales/it/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "Elimina espressione",
   "Delete filter block": "Elimina blocco filtro",
   "Deuteranopia filter": "Filtro deuteranopia",
-  "Drag to resize the layer list": "Trascina per ridimensionare l'elenco dei livelli",
-  "Drag to resize the sidebar": "Trascina per ridimensionare la barra laterale",
   "Duplicate": "Duplica",
   "Encoding": "Codifica",
   "Enter URL...": "Inserisci URL...",

src/locales/ja/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "式を削除",
   "Delete filter block": "フィルタブロックを削除",
   "Deuteranopia filter": "緑色盲フィルタ",
-  "Drag to resize the layer list": "ドラッグしてレイヤーリストのサイズを変更",
-  "Drag to resize the sidebar": "ドラッグしてサイドバーのサイズを変更",
   "Duplicate": "複製",
   "Encoding": "エンコーディング",
   "Enter URL...": "URLを入力",

src/locales/ko/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "표현식 삭제",
   "Delete filter block": "필터 블록 삭제",
   "Deuteranopia filter": "녹색맹 필터",
-  "Drag to resize the layer list": "드래그하여 레이어 목록 크기 조정",
-  "Drag to resize the sidebar": "드래그하여 사이드바 크기 조정",
   "Duplicate": "복제",
   "Encoding": "인코딩",
   "Enter URL...": "URL 입력...",

src/locales/tr/translation.json

@@ -55,8 +55,6 @@
   "Delete filter block": "Filtre bloğunu sil",
   "Deuteranopia filter": "Döteranopi filtresi",
   "Drag and drop a style JSON file here or click to browse": "Bir stil JSON dosyasını buraya sürükleyip bırakın veya göz atmak için tıklayın",
-  "Drag to resize the layer list": "Katman listesini yeniden boyutlandırmak için sürükleyin",
-  "Drag to resize the sidebar": "Kenar çubuğunu yeniden boyutlandırmak için sürükleyin",
   "Duplicate": "Kopyala",
   "Encoding": "Kodlama",
   "Enter URL...": "URL girin...",

src/locales/zh/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "删除表达式",
   "Delete filter block": "删除过滤器块",
   "Deuteranopia filter": "绿色盲滤镜",
-  "Drag to resize the layer list": "拖动以调整图层列表大小",
-  "Drag to resize the sidebar": "拖动以调整侧边栏大小",
   "Duplicate": "复制",
   "Encoding": "编码",
   "Enter URL...": "输入URL...",

src/styles/_components.scss

@@ -6,8 +6,7 @@
 .maputnik-map__container {
   background: white;
   display: flex;
-  width: 100%;
-  height: 100%;
+  width: vars.$layout-map-width;
 
   &--error {
     align-items: center;

src/styles/_layout.scss

@@ -13,9 +13,6 @@
 
 //APP LAYOUT
 .maputnik-layout {
-  // Kept up to date by AppLayout as the sidebar is resized.
-  --sidebar-width: #{vars.$layout-list-width + vars.$layout-editor-width};
-
   font-family: vars.$font-family;
   color: vars.$color-white;
 
@@ -31,76 +28,31 @@
     display: flex;
   }
 
-  // The resizable panel group filling the main area.
-  &-panels {
-    flex: 1;
-    min-width: 0;
-    height: 100%;
+  &-list {
+    width: 200px;
+    background-color: vars.$color-black;
   }
 
-  &-sidebar-panels,
-  &-sidebar,
-  &-code-editor,
-  &-list,
-  &-drawer,
-  &-map {
-    height: 100%;
+  &-drawer {
+    width: 370px;
+    background-color: vars.$color-black;
     // scroll-container is position: absolute
     position: relative;
   }
 
-  &-sidebar,
-  &-code-editor,
-  &-list,
-  &-drawer {
+  &-code-editor {
+    width: 570px;
     background-color: vars.$color-black;
-  }
-
-  &-resize-handle {
-    width: 5px;
-    background-color: transparent;
+    // scroll-container is position: absolute
     position: relative;
-    z-index: 5;
-    transition: background-color 0.15s ease;
-
-    &:hover,
-    &:active,
-    &:focus-visible {
-      background-color: rgba(vars.$color-lowgray, 0.5);
-    }
-
-    // The separator is keyboard resizable, so it needs a visible focus ring.
-    &:focus-visible {
-      outline: #8e8e8e auto 1px;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 3px;
-      height: 30px;
-      border-radius: 2px;
-      background-color: vars.$color-lowgray;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-    }
-
-    &:hover::after,
-    &:active::after,
-    &:focus-visible::after {
-      opacity: 0.7;
-    }
   }
 
   &-bottom {
     position: fixed;
     bottom: 0;
+    right: 0;
     z-index: 10;
-    inset-inline-start: var(--sidebar-width);
-    inset-inline-end: 0;
+    width: vars.$layout-map-width;
     background-color: vars.$color-black;
   }
 }

src/styles/_vars.scss

@@ -23,6 +23,7 @@ $toolbar-offset: 0;
 
 $layout-list-width: 200px;
 $layout-editor-width: 370px;
+$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
 
 // 'menu-down' from 'https://materialdesignicons.com/'
 // See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>