From 3bb4111445b4a941b4ec99c7ab6e974921b9a059 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 29 Apr 2022 23:55:32 -0400
Subject: [PATCH] Make charity cards extend same length in row. Tweak image
 padding

---
 web/components/charity/charity-card.tsx | 6 +++---
 web/pages/charity/index.tsx             | 5 +----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/web/components/charity/charity-card.tsx b/web/components/charity/charity-card.tsx
index e50a9fe7..d86afde5 100644
--- a/web/components/charity/charity-card.tsx
+++ b/web/components/charity/charity-card.tsx
@@ -12,8 +12,8 @@ export function CharityCard(props: { charity: Charity }) {
 
   return (
     <Link href={`/charity/${slug}`} passHref>
-      <div className="card card-compact transition:shadow cursor-pointer border-2 bg-white hover:shadow-md">
-        <figure className="h-32">
+      <div className="card card-compact transition:shadow flex-1 cursor-pointer border-2 bg-white hover:shadow-md">
+        <figure className="h-32 px-4 pt-4">
           {photo ? (
             <img className="h-full w-full object-contain" src={photo} alt="" />
           ) : (
@@ -23,7 +23,7 @@ export function CharityCard(props: { charity: Charity }) {
         <div className="card-body">
           <h3 className="card-title line-clamp-3">{name}</h3>
           <div className="line-clamp-4 text-sm">{preview}</div>
-          <Row className="text-primary mt-4 items-end justify-center gap-1">
+          <Row className="text-primary mt-4 flex-1 items-end justify-center gap-2">
             <span className="text-3xl">${Math.floor((raised ?? 0) / 100)}</span>
             <span>raised</span>
           </Row>
diff --git a/web/pages/charity/index.tsx b/web/pages/charity/index.tsx
index c2b5a270..f481eaa3 100644
--- a/web/pages/charity/index.tsx
+++ b/web/pages/charity/index.tsx
@@ -6,7 +6,6 @@ import { Col } from '../../components/layout/col'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 
-// TODO: Fetch amount raised.
 const charities = charityList.map((charity) => ({
   ...charity,
   raised: 4001,
@@ -40,9 +39,7 @@ export default function Charity() {
         </Col>
         <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
           {filterCharities.map((charity) => (
-            <div key={charity.name}>
-              <CharityCard charity={charity} />
-            </div>
+            <CharityCard charity={charity} key={charity.name} />
           ))}
         </div>
         {filterCharities.length === 0 && (