From 46e194e82256989ad6f9e1498e30fad95ba87423 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Thu, 8 Oct 2026 10:16:35 -0400
Subject: [PATCH] Journal, Peer Review and My Funding heroes share one compact
 height

- Journal and Peer Review: less padding (48px on desktop, 40px on phones), the card stack at its phone size so it no longer sets the height, and hidden below lg like My Funding's deck. About 450px down to 350px on desktop.
- Peer Review's three-step timeline fits a phone without scrolling sideways.
- My Funding's signed-in and welcome heroes take the same padding and are held to the same 350px from lg, with one deck size; shorter lines for signed-out and brand-new visitors.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/journal/page.tsx                          |  9 ++---
 app/my-funding/components/MyFundingPage.tsx   | 12 +++----
 .../components/MyFundingSignedOut.tsx         |  2 +-
 app/peer-review/PeerReviewHero.tsx            | 18 +++++-----
 .../Funding/dashboard/MyFundingHero.tsx       | 35 ++++++++-----------
 5 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/app/journal/page.tsx b/app/journal/page.tsx
index 61ff3e5fb..86850b5d0 100644
--- a/app/journal/page.tsx
+++ b/app/journal/page.tsx
@@ -37,7 +37,7 @@ const PIPELINE_STEPS = [
 ] as const;
 
 const JournalIssueCards = () => (
-  <div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0 sm:w-[13.5rem]">
+  <div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0">
     <div
       aria-hidden="true"
       className="absolute -inset-6 origin-bottom -rotate-[6deg] rounded-[2.5rem] bg-primary-500/25 blur-2xl"
@@ -83,7 +83,7 @@ const JournalIssueCards = () => (
 );
 
 const JournalTimeline = () => (
-  <div className="mt-8 w-full max-w-lg overflow-x-auto pb-1">
+  <div className="mt-6 w-full max-w-lg overflow-x-auto pb-1">
     <div className="grid grid-cols-2">
       {PIPELINE_STEPS.map((step, index) => {
         const isCurrent = step.href === null;
@@ -168,7 +168,7 @@ const MobileJournalDetails = () => (
 
 const JournalHero = () => (
   <div className="relative border-b border-gray-200 bg-gray-50">
-    <div className="relative z-10 mx-auto max-w-[1180px] px-4 py-16 tablet:!px-8 sm:py-20">
+    <div className="relative z-10 mx-auto max-w-[1180px] px-4 py-10 tablet:!px-8 sm:py-12">
       <div className="flex flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
         <div className="max-w-2xl">
           <h1
@@ -187,7 +187,8 @@ const JournalHero = () => (
           <JournalTimeline />
         </div>
 
-        <div className="flex justify-center lg:justify-end lg:pr-6">
+        {/* Wide screens only, and no taller than the text beside it, as on My Funding. */}
+        <div className="hidden lg:flex lg:justify-end lg:pr-6">
           <JournalIssueCards />
         </div>
       </div>
diff --git a/app/my-funding/components/MyFundingPage.tsx b/app/my-funding/components/MyFundingPage.tsx
index 3b2cf8e88..335168e92 100644
--- a/app/my-funding/components/MyFundingPage.tsx
+++ b/app/my-funding/components/MyFundingPage.tsx
@@ -338,7 +338,7 @@ export function MyFundingPage() {
 
   const hero = isEmpty ? (
     <MyFundingWelcomeHero
-      line="This page fills in as you take part: what you give, the RFPs you open, the proposals you write, and the scientists behind them."
+      line="This page fills in as you fund research, open RFPs, write proposals and review."
       actions={welcomeActions}
     />
   ) : !isSettled ? (
@@ -513,19 +513,19 @@ function heroCovers(
 function HeroSkeleton() {
   return (
     <div className="border-b border-gray-200 bg-gray-50" aria-hidden="true">
-      <div className="mx-auto max-w-[1012px] animate-pulse px-4 pt-10 tablet:!px-8 sm:pt-16">
-        <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_320px]">
+      <div className="mx-auto max-w-[1012px] animate-pulse px-4 pt-10 tablet:!px-8 sm:pt-12">
+        <div className="lg:grid lg:min-h-[302px] lg:grid-cols-[minmax(0,1fr)_320px] lg:grid-rows-[1fr_auto]">
           <div className="min-w-0 lg:col-start-1 lg:row-start-1 lg:self-center">
             <div className="h-10 w-11/12 rounded-lg bg-gray-200 sm:h-12" />
             <div className="mt-2 h-10 w-2/3 rounded-lg bg-gray-200 sm:h-12" />
             <div className="mt-5 h-5 w-3/4 rounded bg-gray-200" />
           </div>
-          <div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-16 lg:flex lg:items-center lg:justify-end">
-            <div className={cn('flex items-center justify-center', DECK_SIZE.hero.box)}>
+          <div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-12 lg:flex lg:items-center lg:justify-end">
+            <div className={cn('flex items-center justify-center', DECK_SIZE.box)}>
               <div className="h-[200px] w-[164px] -rotate-3 rounded-2xl bg-gray-200" />
             </div>
           </div>
-          <div className="mt-8 flex h-12 items-center gap-6 border-b border-gray-200 sm:mt-12 lg:col-start-1 lg:row-start-2 lg:self-end">
+          <div className="mt-8 flex h-12 items-center gap-6 border-b border-gray-200 sm:mt-10 lg:col-start-1 lg:row-start-2 lg:self-end">
             <div className="h-4 w-20 rounded bg-gray-200" />
             <div className="h-4 w-16 rounded bg-gray-200" />
             <div className="h-4 w-16 rounded bg-gray-200" />
diff --git a/app/my-funding/components/MyFundingSignedOut.tsx b/app/my-funding/components/MyFundingSignedOut.tsx
index 5822832ca..8cf543e22 100644
--- a/app/my-funding/components/MyFundingSignedOut.tsx
+++ b/app/my-funding/components/MyFundingSignedOut.tsx
@@ -25,7 +25,7 @@ export function MyFundingSignedOut() {
       rightSidebarTopOffset="aligned"
       topBanner={
         <MyFundingWelcomeHero
-          line="Sign in to see everything you have funded, raised and reviewed in one place: the scientists you back, the updates they post, and where your money went."
+          line="Sign in to see what you have funded, raised and reviewed, all in one place."
           actions={
             <>
               <button
diff --git a/app/peer-review/PeerReviewHero.tsx b/app/peer-review/PeerReviewHero.tsx
index da2f8965e..5ad6b7278 100644
--- a/app/peer-review/PeerReviewHero.tsx
+++ b/app/peer-review/PeerReviewHero.tsx
@@ -39,7 +39,7 @@ const HOW_IT_WORKS = [
 
 /** The journal's issue-card stack, dressed as an accepted proposal review. */
 const PeerReviewCards = () => (
-  <div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0 sm:w-[13.5rem]">
+  <div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0">
     <div
       aria-hidden="true"
       className="absolute -inset-6 origin-bottom -rotate-[6deg] rounded-[2.5rem] bg-orange-500/25 blur-2xl"
@@ -106,15 +106,16 @@ const PeerReviewCards = () => (
 );
 
 const PeerReviewTimeline = () => (
-  <div className="mt-8 w-full max-w-2xl overflow-x-auto pb-1">
-    <div className="min-w-[30rem]">
+  <div className="mt-6 w-full max-w-2xl overflow-x-auto pb-1">
+    {/* Three steps fit a phone's width with tighter gaps; wider screens keep the full spacing. */}
+    <div className="sm:min-w-[30rem]">
       <div className="grid grid-cols-3">
         {PIPELINE_STEPS.map((step, index) => {
           const next = PIPELINE_STEPS[index + 1];
           const number = String(index + 1).padStart(2, '0');
 
           return (
-            <div key={step.label} className={cn('flex items-center', index > 0 && 'pl-6')}>
+            <div key={step.label} className={cn('flex items-center', index > 0 && 'pl-4 sm:pl-6')}>
               <span
                 className={cn(
                   'font-mono text-2xl font-medium tracking-wide',
@@ -128,7 +129,7 @@ const PeerReviewTimeline = () => (
                 <span
                   aria-hidden="true"
                   className={cn(
-                    'ml-6 h-px flex-1 bg-gradient-to-r',
+                    'ml-3 h-px flex-1 bg-gradient-to-r sm:ml-6',
                     next.current
                       ? 'from-gray-300 to-orange-400'
                       : step.current
@@ -159,7 +160,7 @@ const PeerReviewTimeline = () => (
           );
 
           return (
-            <div key={step.label} className={cn(index > 0 && 'pl-6')}>
+            <div key={step.label} className={cn(index > 0 && 'pl-4 sm:pl-6')}>
               {step.href ? (
                 <Link href={step.href} className="group block">
                   {content}
@@ -177,7 +178,7 @@ const PeerReviewTimeline = () => (
 
 export const PeerReviewHero = () => (
   <div className="relative border-b border-gray-200 bg-gray-50">
-    <div className="relative z-10 mx-auto max-w-[1180px] px-4 py-16 tablet:!px-8 sm:py-20">
+    <div className="relative z-10 mx-auto max-w-[1180px] px-4 py-10 tablet:!px-8 sm:py-12">
       <div className="flex flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
         <div className="max-w-2xl">
           <h1
@@ -196,7 +197,8 @@ export const PeerReviewHero = () => (
           <PeerReviewTimeline />
         </div>
 
-        <div className="flex justify-center lg:justify-end lg:pr-6">
+        {/* Wide screens only, and no taller than the text beside it, as on My Funding. */}
+        <div className="hidden lg:flex lg:justify-end lg:pr-6">
           <PeerReviewCards />
         </div>
       </div>
diff --git a/components/Funding/dashboard/MyFundingHero.tsx b/components/Funding/dashboard/MyFundingHero.tsx
index 97605df3a..353e64e1f 100644
--- a/components/Funding/dashboard/MyFundingHero.tsx
+++ b/components/Funding/dashboard/MyFundingHero.tsx
@@ -71,8 +71,10 @@ interface MyFundingHeroProps {
 export function MyFundingHero({ headline, line, covers, tabs }: MyFundingHeroProps) {
   return (
     <section aria-label="Your funding" className="border-b border-gray-200 bg-gray-50">
-      <div className="mx-auto max-w-[1012px] px-4 pt-10 tablet:!px-8 sm:pt-16">
-        <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_320px]">
+      <div className="mx-auto max-w-[1012px] px-4 pt-10 tablet:!px-8 sm:pt-12">
+        {/* From lg, as tall as the Journal and Peer Review heroes (350px with the
+            padding above): the headline centers in the room above the tabs. */}
+        <div className="lg:grid lg:min-h-[302px] lg:grid-cols-[minmax(0,1fr)_320px] lg:grid-rows-[1fr_auto]">
           <div className="min-w-0 lg:col-start-1 lg:row-start-1 lg:self-center">
             <h1 className={HEADLINE} style={DISPLAY_FONT}>
               {headline}
@@ -80,10 +82,10 @@ export function MyFundingHero({ headline, line, covers, tabs }: MyFundingHeroPro
             {line && <p className="mt-4 text-lg text-gray-600">{line}</p>}
           </div>
           {/* Pulled up by the header's top padding, so the deck centers on the whole header. */}
-          <div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-16 lg:flex lg:items-center lg:justify-end">
-            <CoverDeck covers={covers} size="hero" />
+          <div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-12 lg:flex lg:items-center lg:justify-end">
+            <CoverDeck covers={covers} />
           </div>
-          <div className="mt-8 min-w-0 sm:mt-12 lg:col-start-1 lg:row-start-2 lg:self-end">
+          <div className="mt-8 min-w-0 sm:mt-10 lg:col-start-1 lg:row-start-2 lg:self-end">
             {tabs}
           </div>
         </div>
@@ -104,8 +106,9 @@ interface MyFundingWelcomeHeroProps {
 export function MyFundingWelcomeHero({ line, actions }: MyFundingWelcomeHeroProps) {
   return (
     <section aria-label="My Funding" className="border-b border-gray-200 bg-gray-50">
-      <div className="mx-auto max-w-[1012px] px-4 py-12 tablet:!px-8 sm:py-16">
-        <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+      <div className="mx-auto max-w-[1012px] px-4 py-10 tablet:!px-8 sm:py-12">
+        {/* From lg, as tall as the Journal and Peer Review heroes. */}
+        <div className="flex flex-col gap-8 lg:min-h-[254px] lg:flex-row lg:items-center lg:justify-between">
           <div className="min-w-0 max-w-2xl">
             <h1 className={HEADLINE} style={DISPLAY_FONT}>
               Fund the <HeadlineAmount>science</HeadlineAmount> you care about, or get yours funded.
@@ -128,26 +131,16 @@ const FAN_POSITIONS = [
 
 /**
  * Up to three cards fanned like the Journal's issue cards. Wide screens only.
- * The deck is laid out at one size and scaled to fit where it sits: beside the
- * welcome's headline, or in the signed-in header's right-hand column.
+ * The deck is laid out at one size and scaled to sit beside a headline.
  */
-export const DECK_SIZE = {
-  full: { box: 'h-[260px] w-[364px]', scale: 'scale-[0.866]' },
-  hero: { box: 'h-[246px] w-[345px]', scale: 'scale-[0.82]' },
-} as const;
+export const DECK_SIZE = { box: 'h-[246px] w-[345px]', scale: 'scale-[0.82]' } as const;
 
-function CoverDeck({
-  covers,
-  size = 'full',
-}: {
-  readonly covers: readonly HeroCover[];
-  readonly size?: keyof typeof DECK_SIZE;
-}) {
+function CoverDeck({ covers }: { readonly covers: readonly HeroCover[] }) {
   const shown = covers.slice(0, 3);
   if (shown.length === 0) return null;
   // One card sits in the middle; two take the outer places.
   const places = shown.length === 1 ? [1] : shown.length === 2 ? [0, 2] : [0, 1, 2];
-  const { box, scale } = DECK_SIZE[size];
+  const { box, scale } = DECK_SIZE;
   return (
     <div aria-hidden="true" className={cn('relative hidden flex-shrink-0 lg:block', box)}>
       <div className={cn('absolute left-0 top-0 h-[300px] w-[420px] origin-top-left', scale)}>