From 9b7e68487d93a12213b65404b69ba2171f9dd2d4 Mon Sep 17 00:00:00 2001
From: Gabe Farrell <gabe@mnrva.dev>
Date: Wed, 31 Dec 2025 17:53:00 -0500
Subject: [PATCH] add header, adjust ui

---
 client/app/components/rewind/Rewind.tsx         | 2 +-
 client/app/components/rewind/RewindStatText.tsx | 2 +-
 client/app/components/rewind/RewindTopItem.tsx  | 2 +-
 client/app/routes/RewindPage.tsx                | 7 ++++++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/app/components/rewind/Rewind.tsx b/client/app/components/rewind/Rewind.tsx
index 45b32db..21878c5 100644
--- a/client/app/components/rewind/Rewind.tsx
+++ b/client/app/components/rewind/Rewind.tsx
@@ -38,7 +38,7 @@ export default function Rewind(props: Props) {
         includeTime={props.includeTime}
       />
 
-      <div className="grid grid-cols-3 gap-5">
+      <div className="grid grid-cols-3 gap-y-5">
         <RewindStatText
           figure={`${props.stats.minutes_listened}`}
           text="Minutes listened"
diff --git a/client/app/components/rewind/RewindStatText.tsx b/client/app/components/rewind/RewindStatText.tsx
index 6a86a57..5ccec87 100644
--- a/client/app/components/rewind/RewindStatText.tsx
+++ b/client/app/components/rewind/RewindStatText.tsx
@@ -6,7 +6,7 @@ interface Props {
 export default function RewindStatText(props: Props) {
   return (
     <div className="flex items-baseline gap-1.5">
-      <div className="w-20 text-end shrink-0">
+      <div className="w-23 text-end shrink-0">
         <span
           className="
             relative inline-block
diff --git a/client/app/components/rewind/RewindTopItem.tsx b/client/app/components/rewind/RewindTopItem.tsx
index d761b5a..171a8f8 100644
--- a/client/app/components/rewind/RewindTopItem.tsx
+++ b/client/app/components/rewind/RewindTopItem.tsx
@@ -20,7 +20,7 @@ export function RewindTopItem<
   return (
     <div className="flex gap-5">
       <div className="rewind-top-item-image">
-        <img className="w-50 h-50" src={imageSrc} />
+        <img className="max-w-48 max-h-48" src={imageSrc} />
       </div>
 
       <div className="flex flex-col gap-1">
diff --git a/client/app/routes/RewindPage.tsx b/client/app/routes/RewindPage.tsx
index b3ef0da..5b4e518 100644
--- a/client/app/routes/RewindPage.tsx
+++ b/client/app/routes/RewindPage.tsx
@@ -12,5 +12,10 @@ export default function RewindPage() {
   useEffect(() => {
     getRewindStats({ year: 2025 }).then((r) => setStats(r));
   }, []);
-  return <>{stats !== undefined && <Rewind stats={stats} />}</>;
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="mt-12">Your 2025 Rewind</h2>
+      {stats !== undefined && <Rewind stats={stats} />}
+    </div>
+  );
 }