web: fix the page header; the grid pane scrolls in both directions

The header stays put and the pane below it is the only scroll container,
so column headers and the release column pin inside it on any viewport.
Small screens get a shorter header, a narrower release column and a
smaller grid minimum width.

Author: rigor789

index.html

@@ -7,7 +7,7 @@
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%233b82c4'/%3E%3C/svg%3E">
 </head>
 <body>
-<div id="app" class="min-w-(--grid-min-width)"></div>
+<div id="app" class="flex h-dvh flex-col"></div>
 <script type="module" src="/web/src/main.ts"></script>
 </body>
 </html>

web/src/App.vue

@@ -38,13 +38,12 @@ function label(key: string): string {
 </script>
 
 <template>
-	<!-- Sticky to the left so the page chrome stays put while a wide grid scrolls sideways. -->
-	<header class="sticky left-0 max-w-screen px-6 pt-6 pb-5">
+	<header class="shrink-0 px-4 pt-4 pb-4 md:px-6 md:pt-6 md:pb-5">
 		<div class="flex items-start justify-between gap-4">
 			<h1 class="text-2xl font-semibold tracking-tight">NativeScript compatibility</h1>
 			<ThemeToggle />
 		</div>
-		<p class="mt-1 max-w-3xl text-neutral-600 dark:text-neutral-400">
+		<p class="mt-1 hidden max-w-3xl text-neutral-600 md:block dark:text-neutral-400">
 			Which toolchains each runtime and CLI release supports, from published package metadata, CI
 			verification runs and maintainer advisories. Click a cell for the version-by-version picture.
 		</p>
@@ -67,7 +66,7 @@ function label(key: string): string {
 				</template>
 			</span>
 		</nav>
-		<div class="mt-5 flex flex-wrap items-center justify-between gap-x-8 gap-y-3">
+		<div class="mt-4 flex flex-wrap items-center justify-between gap-x-8 gap-y-3 md:mt-5">
 			<div class="flex flex-wrap items-center gap-5">
 				<input
 					v-model="query"
@@ -87,13 +86,15 @@ function label(key: string): string {
 		</div>
 	</header>
 
-	<main>
-		<p v-if="error" class="sticky left-0 max-w-screen px-6 text-bad">Could not load compatibility data: {{ error }}</p>
-		<p v-else-if="!document" class="sticky left-0 max-w-screen px-6 text-neutral-500 dark:text-neutral-400">Loading…</p>
-		<template v-else>
+	<!-- The pane below the header is the only thing that scrolls, in both directions, so the
+	     grid's sticky headers and anything pinned to its left edge resolve against it. -->
+	<main class="@container min-h-0 flex-1 overflow-auto">
+		<p v-if="error" class="px-6 text-bad">Could not load compatibility data: {{ error }}</p>
+		<p v-else-if="!document" class="px-6 text-neutral-500 dark:text-neutral-400">Loading…</p>
+		<div v-else class="min-w-(--grid-min-width)">
 			<CompatGrid v-model:open="open" v-model:expanded="expanded" :document="document" :query="query" :show-prereleases="showPrereleases" />
 
-			<section v-if="document.advisories.length" class="sticky left-0 max-w-screen px-6 pt-10">
+			<section v-if="document.advisories.length" class="sticky left-0 max-w-[100cqw] px-6 pt-10">
 				<h2 class="text-base font-semibold">Advisories</h2>
 				<ul class="mt-3 space-y-4 text-sm">
 					<li v-for="advisory in document.advisories" :key="advisory.id" class="flex gap-2.5">
@@ -117,6 +118,6 @@ function label(key: string): string {
 					</li>
 				</ul>
 			</section>
-		</template>
+		</div>
 	</main>
 </template>

web/src/components/CompatGrid.vue

@@ -83,17 +83,15 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 </script>
 
 <template>
-	<!-- The table overflows the document rather than a wrapper: a scrolling wrapper would
-	     become the sticky containing block and the column headers would scroll away. -->
 	<div class="border-y border-neutral-200 dark:border-neutral-700/80">
 		<table class="w-full min-w-(--grid-min-width) table-fixed border-separate border-spacing-0 text-sm">
 			<colgroup>
-				<col class="w-40 lg:w-88" />
+				<col class="w-32 md:w-40 lg:w-88" />
 				<col v-for="key in ALL_KEYS" :key="key" />
 			</colgroup>
 			<thead>
 				<tr>
-					<th rowspan="2" :class="headCell" class="top-0 left-0 z-20 px-6 py-3 text-left align-bottom">Release</th>
+					<th rowspan="2" :class="headCell" class="top-0 left-0 z-20 px-4 py-3 text-left align-bottom md:px-6">Release</th>
 					<th
 						v-for="group in COLUMNS"
 						:key="group.platform"
@@ -114,7 +112,7 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 						:colspan="ALL_KEYS.length + 1"
 						class="border-b border-neutral-200 bg-sky-50/70 py-2 text-left font-semibold dark:border-neutral-700/80 dark:bg-sky-900/25"
 					>
-						<div class="sticky left-0 inline-block px-6">
+						<div class="sticky left-0 inline-block px-4 md:px-6">
 						<a
 							:href="`https://www.npmjs.com/package/${group.name}`"
 							target="_blank"
@@ -131,7 +129,7 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 						<th
 							scope="row"
 							:class="border"
-							class="sticky left-0 z-[1] bg-white px-6 py-3 text-left align-top font-medium group-hover:bg-neutral-50 dark:bg-neutral-950 dark:group-hover:bg-neutral-800"
+							class="sticky left-0 z-[1] bg-white px-4 py-3 text-left align-top font-medium md:px-6 group-hover:bg-neutral-50 dark:bg-neutral-950 dark:group-hover:bg-neutral-800"
 						>
 							<a
 								:href="`https://www.npmjs.com/package/${group.name}/v/${version}`"
@@ -166,7 +164,7 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 					</tr>
 				</template>
 				<tr v-if="group.total > INITIAL_ROWS && !normalizedQuery">
-					<th scope="row" :class="border" class="sticky left-0 z-[1] bg-white px-6 py-2 text-left dark:bg-neutral-950">
+					<th scope="row" :class="border" class="sticky left-0 z-[1] bg-white px-4 py-2 text-left md:px-6 dark:bg-neutral-950">
 						<button
 							type="button"
 							class="rounded-lg border border-neutral-300 bg-neutral-100 px-3 py-1.5 text-sm font-medium hover:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700"
@@ -179,6 +177,6 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 				</tr>
 			</tbody>
 		</table>
-		<p v-if="!groups.length" class="sticky left-0 max-w-screen px-6 py-4 text-neutral-500 dark:text-neutral-400">No releases match.</p>
+		<p v-if="!groups.length" class="sticky left-0 max-w-[100cqw] px-6 py-4 text-neutral-500 dark:text-neutral-400">No releases match.</p>
 	</div>
 </template>

web/src/style.css

@@ -15,9 +15,14 @@
 	html {
 		font-feature-settings: "cv11", "ss01";
 		color-scheme: light;
-		/* Below this the document scrolls sideways and the page chrome pins itself to the left. */
+		/* Below this the grid pane scrolls sideways under the fixed page header. */
 		--grid-min-width: 66rem;
 	}
+	@media (width < 48rem) {
+		html {
+			--grid-min-width: 50rem;
+		}
+	}
 	html.dark {
 		color-scheme: dark;
 		/* Brighter status colours: the light-mode values sink into a dark background. */