web: header owns the grid's top border; timeline icons stay under the sticky headers

Author: rigor789

web/src/App.vue

@@ -38,7 +38,7 @@ function label(key: string): string {
 </script>
 
 <template>
-	<header class="shrink-0 px-4 pt-4 pb-4 md:px-6 md:pt-6 md:pb-5">
+	<header class="shrink-0 border-b border-neutral-200 px-4 pt-4 pb-4 md:px-6 md:pt-6 md:pb-5 dark:border-neutral-700/80">
 		<div class="flex items-start justify-between gap-4">
 			<h1 class="text-2xl font-semibold tracking-tight">NativeScript compatibility</h1>
 			<ThemeToggle />

web/src/components/CellDetails.vue

@@ -70,7 +70,8 @@ function shortDate(version: string): string {
 </script>
 
 <template>
-	<div>
+	<!-- isolate: the timeline raises its icons above the track, and that must not reach the grid's sticky headers. -->
+	<div class="isolate">
 		<p class="text-sm">
 			<strong>{{ label }}</strong>
 			<template v-if="summary.rawRange">

web/src/components/CompatGrid.vue

@@ -83,7 +83,7 @@ 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">
+	<div class="border-b 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-32 md:w-40 lg:w-88" />