Redirect /wip to the teams section and align card/button styles

The /wip redirect now targets /roadmap#teams, and the page scrolls the Editor viewport to the teams grid when it loads with that hash (native anchor navigation doesn't reach into the app's scroll container). Design pass: team cards now match FeatureCard padding (p-3/gap-3), the section header aligns with the page header at px-2, the heading gets scroll-mt breathing room, and the toolbar button drops a height override that broke OSButton's two-layer hover effect.

Generated-By: PostHog Code
Task-Id: 9ecd4529-67fb-4091-9d52-2f321cccc016

Author: joethreepwood

src/components/Roadmap/EarlyAccessFeaturesSection.tsx

@@ -1077,7 +1077,7 @@ export default function EarlyAccessFeaturesSection(): JSX.Element | null {
                             type="button"
                             size="md"
                             variant="secondary"
-                            className="!h-10 shrink-0"
+                            className="shrink-0"
                             onClick={() => openTeam(filterGridTeam.slug)}
                         >
                             View team goals

src/components/Roadmap/README.md

@@ -1,6 +1,6 @@
 # Roadmap board
 
-`EarlyAccessFeaturesSection` powers `/roadmap`. It presents the same early-access data and enrollment flows as the PostHog app in a compact, changelog-style board, followed by a quarter grid showing what every team is working on (the former `/wip` page, which now redirects here).
+`EarlyAccessFeaturesSection` powers `/roadmap`. It presents the same early-access data and enrollment flows as the PostHog app in a compact, changelog-style board, followed by a quarter grid showing what every team is working on (the former `/wip` page, which now redirects to `/roadmap#teams`; the page shell scrolls the Editor viewport to the grid when it sees that hash, since native anchor navigation doesn't reach into the app's own scroll container).
 
 ## Data ownership
 

src/components/Roadmap/TeamQuarterSection.tsx

@@ -28,7 +28,7 @@ const TeamCard = ({
             aria-haspopup="dialog"
             aria-expanded={active}
             onClick={onClick}
-            className={`flex w-full items-center gap-2.5 rounded-md border border-primary p-2.5 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red dark:focus-visible:ring-yellow ${
+            className={`flex w-full items-center gap-3 rounded-md border border-primary p-3 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red dark:focus-visible:ring-yellow ${
                 active ? 'bg-accent' : 'bg-primary'
             }`}
         >
@@ -70,9 +70,9 @@ const TeamQuarterSection = ({
     onTeamClick: (slug: string) => void
 }): JSX.Element => (
     <section aria-labelledby="teams" className="flex flex-col gap-3">
-        <header className="px-1">
+        <header className="px-2">
             <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
-                <h2 id="teams" className="m-0 text-xl text-primary">
+                <h2 id="teams" className="m-0 scroll-mt-4 text-xl text-primary">
                     What teams are working on this quarter
                 </h2>
                 <span className="shrink-0 whitespace-nowrap text-sm text-secondary">
@@ -88,7 +88,7 @@ const TeamQuarterSection = ({
             </p>
         </header>
         {teams.length === 0 ? (
-            <p className="m-0 px-1 text-sm text-muted">No teams match.</p>
+            <p className="m-0 px-2 text-sm text-muted">No teams match.</p>
         ) : (
             <ul className="m-0 grid list-none grid-cols-2 gap-2 p-0 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-6">
                 {teams.map((team) => (

src/pages/roadmap/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { IconChevronDown } from '@posthog/icons'
 import Editor from 'components/Editor'
 import OSButton from 'components/OSButton'
@@ -16,6 +16,16 @@ const RoadmapPage = () => {
         target.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' })
     }
 
+    // /wip redirects to /roadmap#teams; the Editor scrolls in its own viewport, so native
+    // anchor navigation doesn't reach the heading — scroll it into view after first paint.
+    useEffect(() => {
+        if (window.location.hash !== '#teams') {
+            return
+        }
+        const timeout = window.setTimeout(scrollToTeamGoals, 100)
+        return () => window.clearTimeout(timeout)
+    }, [])
+
     return (
         <>
             <SEO

vercel.json

@@ -1705,7 +1705,7 @@
         },
         {
             "source": "/wip",
-            "destination": "/roadmap"
+            "destination": "/roadmap#teams"
         },
         {
             "source": "/handbook/company/diversity",