Allow worker detail pages to scroll from tablet gutters

[McHersheys]

Summary

On worker detail pages such as https://workers.iii.dev/workers/iii-directory, the page only scrolls when a touch/wheel gesture starts inside the centered content shell. On a wide tablet held by the edges, gestures that start in the left or right gutter do nothing, so reading long worker docs requires moving your hand into the middle of the screen.

The concrete user story: I am using the site on a tablet to read worker docs like a bedtime story. Holding the tablet naturally puts my thumbs/fingers near the margins, but the margins are not scrollable.

Reproduction

1. Open https://workers.iii.dev/workers/iii-directory in a tablet/landscape-size viewport, e.g. 1366x768.
2. Try to scroll with a gesture starting in the left gutter or right gutter outside the centered 1200px shell.
3. Try the same scroll gesture starting over the body/content area.

Actual

• Gutter gesture: no scroll.
• Body/content gesture: scrolls.

Playwright measurement on the live page at 1366x768:

{
  "liveScrollerBounds": { "left": 79, "right": 1277, "width": 1198 },
  "leftEdgeScrollTopAfterWheel": 0,
  "leftGutterScrollTopAfterWheel": 0,
  "centerScrollTopAfterWheel": 334,
  "rightGutterScrollTopAfterWheel": 0
}

The live DOM has a centered, max-width shell and the actual scroll container is only the inner pane:

html: overflow-y: hidden
outer shell: mx-auto w-full max-w-[1200px] ... h-screen ... flex flex-col
scroll pane: flex-1 overflow-y-auto flex flex-col

So touches beginning outside the 1200px shell land on non-scrollable body/html instead of the scroll pane.

Expected

On tablet/wide layouts, the visual content can remain centered, but the vertical scroll hit target should span the full viewport so edge/gutter swipes scroll the current worker page.

Tested tiny CSS fix

I could not find the deployed Next registry UI source in the public iii-hq/workers, iii-hq/iii, iii-hq/docs, or iii-hq/console repos/code search, so I am filing this with a tested CSS change instead of a PR. If the source lives elsewhere, point me at it and I can PR the same fix.

Static proof page:

• https://dreamcatcher-tech.github.io/workers/?cachebust=dc36d9ef

Patch concept:

div[class~="flex-1"][class~="overflow-y-auto"][class~="flex-col"] {
  --edge-scroll-gutter: max(0px, calc((100dvw - 100%) / 2 + 8px));
  width: calc(100dvw + 16px);
  margin-inline: calc(-1 * var(--edge-scroll-gutter));
  padding-inline: var(--edge-scroll-gutter);
  box-sizing: border-box;
}

That widens only the scroll hit target to the viewport, then adds equal inline padding so the content remains visually aligned with the centered shell.

Playwright measurement on the static proof at 1366x768:

{
  "fixedScrollerBounds": { "left": -13, "right": 1369, "width": 1382 },
  "leftEdgeScrollTopAfterWheel": 334,
  "leftGutterScrollTopAfterWheel": 334,
  "centerScrollTopAfterWheel": 334,
  "rightGutterScrollTopAfterWheel": 334
}

Visual QA at desktop, tablet landscape, and mobile did not show a new layout regression from the edge-scroll fix. The mobile tab row clipping is already present on the current live page.

[inverted-capital]

If you give us the source to the registry site, we can test the fix for you 🤷

[McHersheys]

Thanks — that’s exactly the blocker I hit.

I don’t have the registry site source. I checked the public iii-hq/workers, iii-hq/iii, iii-hq/docs, and iii-hq/console repos plus GitHub code search, but couldn’t find the deployed Next registry UI for workers.iii.dev.

The tested proof and patch concept are in the issue body, and the static proof page is here:

https://dreamcatcher-tech.github.io/workers/?cachebust=dc36d9ef

If the registry site source lives in another repo/path, or if you can make it available, point me at it and I’ll apply/test the fix there.