From 4b26f43d4e995c194a7ecab56eb05ce7b69595ed Mon Sep 17 00:00:00 2001 From: "Elias W. BA" Date: Sun, 19 Apr 2026 13:17:04 +0000 Subject: [PATCH 1/2] Reserve scrollbar space on the main content area The #inner_content section in page_content uses overflow-y-auto, so the vertical scrollbar appears and disappears as content height changes. When the scrollbar toggles on, it pushes content ~15px to the left; when it toggles off, content shifts back. That shows up most clearly on the Project Settings page: switching between tall tabs (Setup) and short ones (Security, Collaboration) makes the page bounce horizontally. Setting scrollbar-gutter: stable reserves the gutter regardless of whether the scrollbar is currently showing, so switching tabs no longer moves content sideways. --- CHANGELOG.md | 3 +++ lib/lightning_web/components/layout_components.ex | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 90e82d0b6cf..8b93cf24f94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,9 @@ and this project adheres to - Bump `@openfn/ws-worker` from [`1.23.6` to `1.23.8`](https://github.com/OpenFn/kit/blob/@openfn/ws-worker@1.23.8/packages/ws-worker/CHANGELOG.md?plain=1#L3-L16) +- Reserve space for the scrollbar on the main content area so page content no + longer shifts horizontally when switching between tall and short tabs (e.g. on + the Project Settings page). ## [2.16.2-pre] - 2026-04-16 diff --git a/lib/lightning_web/components/layout_components.ex b/lib/lightning_web/components/layout_components.ex index cc5c9024022..41591fc6c80 100644 --- a/lib/lightning_web/components/layout_components.ex +++ b/lib/lightning_web/components/layout_components.ex @@ -186,7 +186,7 @@ defmodule LightningWeb.LayoutComponents do
{render_slot(@inner_block)}
From f9fa75e5691b356cb7697acc3f78b31d161d38a4 Mon Sep 17 00:00:00 2001 From: "Elias W. BA" Date: Sun, 19 Apr 2026 13:30:52 +0000 Subject: [PATCH 2/2] Use stable both-edges so content stays centered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit scrollbar-gutter: stable reserves the gutter on the right only. That matches what the scrollbar itself does, but for pages shorter than the viewport it now leaves a visible 15px of empty space on the right edge that wasn't there before — and any content that was centered relative to the viewport shifts 7.5px to the left. stable both-edges mirrors the reservation on the left edge too, keeping content symmetrically centered whether the scrollbar is currently rendered or not. The cost is 30px of reserved gutter instead of 15px (≈2% of a 1440px viewport) for a consistent look across every page. --- lib/lightning_web/components/layout_components.ex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/lightning_web/components/layout_components.ex b/lib/lightning_web/components/layout_components.ex index 41591fc6c80..57e7f1ba1b3 100644 --- a/lib/lightning_web/components/layout_components.ex +++ b/lib/lightning_web/components/layout_components.ex @@ -186,7 +186,7 @@ defmodule LightningWeb.LayoutComponents do
{render_slot(@inner_block)}