MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extend Recently Reviewed card to match sibling heights
Some checks are pending
Build and Push Docker Image / build (push) Waiting to run
Details

Browse Source 
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>
This commit is contained in:
Matt
2026-02-20 23:49:15 +01:00
parent a714c56e81
commit 6e697cb5d8
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/observer/observer-dashboard-content.tsx
View File

@@ -350,7 +350,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
{/* Middle Row */} {/* Middle Row */}
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* Left column: Score Distribution + Recently Reviewed stacked */} {/* Left column: Score Distribution + Recently Reviewed stacked */}
<div className="space-y-6"> <div className="flex flex-col gap-6">
{/* Score Distribution */} {/* Score Distribution */}
<AnimatedCard index={7}> <AnimatedCard index={7}>
<Card> <Card>
@@ -397,8 +397,8 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
</AnimatedCard> </AnimatedCard>
{/* Recently Reviewed */} {/* Recently Reviewed */}
<AnimatedCard index={10}> <AnimatedCard index={10} className="flex-1 flex flex-col">
<Card> <Card className="flex-1 flex flex-col">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2.5 text-base"> <CardTitle className="flex items-center gap-2.5 text-base">
<div className="rounded-lg bg-emerald-500/10 p-1.5"> <div className="rounded-lg bg-emerald-500/10 p-1.5">

3
src/components/shared/animated-container.tsx
View File

@@ -3,9 +3,10 @@
import { motion } from 'motion/react' import { motion } from 'motion/react'
import { type ReactNode } from '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 ( return (
<motion.div <motion.div
className={className}
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.05, ease: 'easeOut' }} transition={{ duration: 0.3, delay: index * 0.05, ease: 'easeOut' }}