Fix right-side alignment of content area on non-homepage pages

In 9f2a5ae ("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 9f2a5ae.

Assisted-by: Claude Opus 4.6
Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>

Author: dscho

assets/sass/layout.scss

@@ -471,6 +471,7 @@ table.benchmarks {
 
 #content-wrapper {
   display: flex;
+  justify-content: space-between;
 }
 
 // Breakpoint ----------------

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)
+})