From 6e697cb5d8c5684b59fd4d6ab7d1732c64cff80b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 20 Feb 2026 23:49:15 +0100
Subject: [PATCH] Extend Recently Reviewed card to match sibling heights

Use flex-1 on the Recently Reviewed card so it stretches to fill the
remaining vertical space in the left column, aligning its bottom with
Juror Workload and Activity Feed. Add className prop to AnimatedCard.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/observer/observer-dashboard-content.tsx | 6 +++---
 src/components/shared/animated-container.tsx           | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/observer/observer-dashboard-content.tsx b/src/components/observer/observer-dashboard-content.tsx
index 44c3112..a7a240e 100644
--- a/src/components/observer/observer-dashboard-content.tsx
+++ b/src/components/observer/observer-dashboard-content.tsx
@@ -350,7 +350,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
       {/* Middle Row */}
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         {/* Left column: Score Distribution + Recently Reviewed stacked */}
-        <div className="space-y-6">
+        <div className="flex flex-col gap-6">
           {/* Score Distribution */}
           <AnimatedCard index={7}>
             <Card>
@@ -397,8 +397,8 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
           </AnimatedCard>
 
           {/* Recently Reviewed */}
-          <AnimatedCard index={10}>
-            <Card>
+          <AnimatedCard index={10} className="flex-1 flex flex-col">
+            <Card className="flex-1 flex flex-col">
               <CardHeader className="pb-3">
                 <CardTitle className="flex items-center gap-2.5 text-base">
                   <div className="rounded-lg bg-emerald-500/10 p-1.5">
diff --git a/src/components/shared/animated-container.tsx b/src/components/shared/animated-container.tsx
index debd459..5480118 100644
--- a/src/components/shared/animated-container.tsx
+++ b/src/components/shared/animated-container.tsx
@@ -3,9 +3,10 @@
 import { motion } from 'motion/react'
 import { type ReactNode } from 'react'
 
-export function AnimatedCard({ children, index = 0 }: { children: ReactNode; index?: number }) {
+export function AnimatedCard({ children, index = 0, className }: { children: ReactNode; index?: number; className?: string }) {
   return (
     <motion.div
+      className={className}
       initial={{ opacity: 0, y: 12 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3, delay: index * 0.05, ease: 'easeOut' }}