sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stretch BookNest sidebar cards to align bottom borders with main column

Browse source
This commit is contained in:
Claude 2026-06-18 18:31:22 +00:00
parent 9d7fc518de
commit 4e4855f380
No known key found for this signature in database
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/pages/BookNest.tsx
View file

@ -339,9 +339,9 @@ export default function BookNest() {
</div> </div>
</div> </div>
{/* Right sidebar — spans both rows so Favorites reaches up near the hero */} {/* 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 flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}> <div className="flex h-full flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}>
<div style={{ ...cardBase, padding: '22px' }}> <div style={{ ...cardBase, padding: '22px', flex: '1.4 0 auto' }}>
<h3 style={{ ...sectionTitle, fontSize: '12px', marginBottom: '18px' }}>Favorites</h3> <h3 style={{ ...sectionTitle, fontSize: '12px', marginBottom: '18px' }}>Favorites</h3>
<div className="flex flex-col" style={{ gap: '4px' }}> <div className="flex flex-col" style={{ gap: '4px' }}>
{favorites.map((f) => ( {favorites.map((f) => (
@ -353,7 +353,7 @@ export default function BookNest() {
</div> </div>
</div> </div>
<div style={cardBase}> <div style={{ ...cardBase, flex: '1 0 auto' }}>
<h3 style={sectionTitle}>Recently Used</h3> <h3 style={sectionTitle}>Recently Used</h3>
<div className="flex flex-col" style={{ gap: '8px' }}> <div className="flex flex-col" style={{ gap: '8px' }}>
{recentlyUsed.map((r) => ( {recentlyUsed.map((r) => (
@ -365,17 +365,19 @@ export default function BookNest() {
</div> </div>
</div> </div>
<div style={cardBase}> <div style={{ ...cardBase, flex: '1 0 auto' }}>
<h3 style={sectionTitle}>Link Health</h3> <h3 style={sectionTitle}>Link Health</h3>
<Donut data={linkHealthData} centerLabel="312" /> <Donut data={linkHealthData} centerLabel="312" />
</div> </div>
<div style={cardBase}> <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> <h3 style={sectionTitle}>Category Breakdown</h3>
<Donut data={categoryBreakdownData} /> <Donut data={categoryBreakdownData} />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }