From 5ff17f01939a7e9db164280ae5851489aea400af Mon Sep 17 00:00:00 2001
From: Johannes Schindelin <johannes.schindelin@gmx.de>
Date: Sun, 15 Feb 2026 12:29:58 +0100
Subject: [PATCH] Fix right-side alignment of content area on non-homepage
 pages

In 9f2a5aeb9 ("Continue to display sidebar when page scrolls"), the
layout of `#content-wrapper` was converted from floats to flexbox in
order to support `position: sticky` on the sidebar. That commit removed
`float: left` from `aside` and `float: right` from `#content`, and
added `display: flex` to `#content-wrapper`.

However, the old float layout relied on the fact that `#content` was
floated to the right: the sidebar (218px) and the content area (702px)
together only add up to 920px inside a 940px container, with the
remaining 20px forming a gap between them. With `float: right`, the
content area was pushed flush against the right edge of the container,
so its right edge aligned perfectly with the header above. After the
switch to flexbox, both children are packed to the left by default
(the initial value of `justify-content` is `flex-start`), leaving the
20px gap on the right side instead of between the two elements. This
caused the right edge of the content area to be visibly misaligned with
the right edge of the header's search bar and dark-mode toggle.

The fix is to add `justify-content: space-between` to `#content-wrapper`,
which restores the original float-era behavior: the sidebar sits at the
left edge and the content area sits at the right edge, with the 20px gap
between them.

A Playwright test is included that verifies the right edge of `#content`
is flush with the right edge of `#content-wrapper`. This test was used
to bisect and confirm that the regression was introduced in 9f2a5aeb9.

Assisted-by: Claude Opus 4.6
Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
---
 assets/sass/layout.scss |  1 +
 tests/git-scm.spec.js   | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 1b1d38e279..27c524b055 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -471,6 +471,7 @@ table.benchmarks {
 
 #content-wrapper {
   display: flex;
+  justify-content: space-between;
 }
 
 // Breakpoint ----------------
diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js
index 663fb83c6d..5423d8b2b6 100644
--- a/tests/git-scm.spec.js
+++ b/tests/git-scm.spec.js
@@ -349,3 +349,20 @@ test('dark mode', async({ page }) => {
   const autoLightBrightness = await getPageBrightness();
   expect(autoLightBrightness).toBeCloseTo(0.85, 0.1);
 });
+
+test('right-side alignment of header and content areas', async ({ page }) => {
+  await page.goto(`${url}about`)
+
+  // The sidebar (aside) and #content sit inside #content-wrapper (display: flex).
+  // Their combined widths must fill the container so the right edges align.
+  const containerBox = await page.locator('#content-wrapper').boundingBox()
+  const contentBox = await page.locator('#content').boundingBox()
+
+  expect(containerBox).not.toBeNull()
+  expect(contentBox).not.toBeNull()
+
+  const containerRight = containerBox.x + containerBox.width
+  const contentRight = contentBox.x + contentBox.width
+
+  expect(Math.abs(containerRight - contentRight)).toBeLessThanOrEqual(1)
+})