web: grid scrolls inside its wrapper on narrow screens; page never overflows

Author: rigor789

web/src/App.vue

@@ -38,7 +38,7 @@ function label(key: string): string {
 </script>
 
 <template>
-	<header class="px-6 pt-6 pb-5">
+	<header class="max-w-full px-6 pt-6 pb-5">
 		<div class="flex items-start justify-between gap-4">
 			<h1 class="text-2xl font-semibold tracking-tight">NativeScript compatibility</h1>
 			<ThemeToggle />
@@ -63,7 +63,7 @@ function label(key: string): string {
 					type="search"
 					placeholder="Filter by package, version or tag…"
 					aria-label="Filter releases"
-					class="w-80 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-400 focus:border-declared focus:ring-2 focus:ring-declared/30 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
+					class="w-full rounded-lg border sm:w-80 border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-400 focus:border-declared focus:ring-2 focus:ring-declared/30 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
 				/>
 				<label class="flex cursor-pointer items-center gap-2 text-sm">
 					<input v-model="showPrereleases" type="checkbox" class="size-4 accent-declared" />

web/src/components/CompatGrid.vue

@@ -82,7 +82,9 @@ const headCell = `sticky z-10 bg-neutral-50 text-center font-semibold dark:bg-ne
 </script>
 
 <template>
-	<div class="border-y border-neutral-200 dark:border-neutral-700/80">
+	<!-- Below the desktop breakpoint the grid scrolls sideways inside this wrapper; above it, the
+	     table fits the page, the wrapper does not clip, and the header can stay pinned. -->
+	<div class="overflow-x-auto border-y border-neutral-200 lg:overflow-visible dark:border-neutral-700/80">
 		<table class="w-full min-w-[60rem] table-fixed border-separate border-spacing-0 text-sm">
 			<colgroup>
 				<col class="w-88" />

web/src/style.css

@@ -26,7 +26,7 @@
 		--color-bad: #f26b66;
 	}
 	body {
-		@apply bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100;
+		@apply overflow-x-hidden bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100;
 	}
 }