From 4e4855f38060202e57b54e2fbdd135c386c30437 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 18:31:22 +0000
Subject: [PATCH] Stretch BookNest sidebar cards to align bottom borders with
 main column

---
 src/pages/BookNest.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/BookNest.tsx b/src/pages/BookNest.tsx
index 34c48a4..341c719 100644
--- a/src/pages/BookNest.tsx
+++ b/src/pages/BookNest.tsx
@@ -339,9 +339,9 @@ export default function BookNest() {
           </div>
         </div>
 
-        {/* Right sidebar — spans both rows so Favorites reaches up near the hero */}
-        <div className="flex flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}>
-          <div style={{ ...cardBase, padding: '22px' }}>
+        {/* Right sidebar — spans both rows so Favorites reaches up near the hero, and stretches to match the main column's full height */}
+        <div className="flex h-full flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}>
+          <div style={{ ...cardBase, padding: '22px', flex: '1.4 0 auto' }}>
             <h3 style={{ ...sectionTitle, fontSize: '12px', marginBottom: '18px' }}>Favorites</h3>
             <div className="flex flex-col" style={{ gap: '4px' }}>
               {favorites.map((f) => (
@@ -353,7 +353,7 @@ export default function BookNest() {
             </div>
           </div>
 
-          <div style={cardBase}>
+          <div style={{ ...cardBase, flex: '1 0 auto' }}>
             <h3 style={sectionTitle}>Recently Used</h3>
             <div className="flex flex-col" style={{ gap: '8px' }}>
               {recentlyUsed.map((r) => (
@@ -365,14 +365,16 @@ export default function BookNest() {
             </div>
           </div>
 
-          <div style={cardBase}>
+          <div style={{ ...cardBase, flex: '1 0 auto' }}>
             <h3 style={sectionTitle}>Link Health</h3>
             <Donut data={linkHealthData} centerLabel="312" />
           </div>
 
-          <div style={cardBase}>
-            <h3 style={sectionTitle}>Category Breakdown</h3>
-            <Donut data={categoryBreakdownData} />
+          <div className="justify-center" style={{ ...cardBase, flex: '1 0 auto', display: 'flex' }}>
+            <div className="flex flex-col" style={{ width: '100%' }}>
+              <h3 style={sectionTitle}>Category Breakdown</h3>
+              <Donut data={categoryBreakdownData} />
+            </div>
           </div>
         </div>
       </div>