From bd61dc6b0c2c2075bd993f97fd86dd63d82119cf Mon Sep 17 00:00:00 2001
From: Shreeya Adhikari <adh.shreeya@gmail.com>
Date: Tue, 1 Sep 2026 15:57:54 -0400
Subject: [PATCH 1/2] aligned div to be in center

---
 apps/frontend/src/app/components/ProjectCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/components/ProjectCard.tsx b/apps/frontend/src/app/components/ProjectCard.tsx
index f9c3a5da..7e408c4d 100644
--- a/apps/frontend/src/app/components/ProjectCard.tsx
+++ b/apps/frontend/src/app/components/ProjectCard.tsx
@@ -68,7 +68,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                 across a row. */}
             <h4 className="line-clamp-2 break-words">{props.name}</h4>
 
-            <div className="flex min-w-0 flex-row items-stretch !gap-4 @max-[240px]:flex-col @max-[240px]:!gap-2">
+            <div className="flex min-w-0 flex-row items-center !gap-4 @max-[240px]:flex-col @max-[240px]:!gap-2">
                 <StatColumn
                     icon={<LuDollarSign aria-hidden />}
                     label="Budget"
@@ -79,7 +79,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                     }
                 />
                 <div
-                    className="!w-px shrink-0 self-stretch !bg-black-300 @max-[240px]:hidden"
+                    className="!h-14 !w-px shrink-0 self-center !bg-black-300 @max-[240px]:hidden"
                     aria-hidden
                 />
                 <StatColumn

From 66b8eab1853dbaf5d2c91287f933633b3dadddfa Mon Sep 17 00:00:00 2001
From: Shreeya Adhikari <adh.shreeya@gmail.com>
Date: Tue, 1 Sep 2026 20:29:30 -0400
Subject: [PATCH 2/2] made changes to the row

---
 apps/frontend/src/app/components/ProjectCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/app/components/ProjectCard.tsx b/apps/frontend/src/app/components/ProjectCard.tsx
index 7e408c4d..63fd99c5 100644
--- a/apps/frontend/src/app/components/ProjectCard.tsx
+++ b/apps/frontend/src/app/components/ProjectCard.tsx
@@ -40,7 +40,7 @@ function StatColumn({
     grow?: boolean;
 }) {
     return (
-        <div className={`flex min-w-0 flex-col !gap-2 ${grow ? 'flex-1' : 'shrink'}`}>
+        <div className={`flex min-w-0 flex-col justify-center !gap-2 ${grow ? 'flex-1' : 'shrink'}`}>
             <div className="flex flex-row items-center !gap-2">
                 <span className="flex h-6 w-6 shrink-0 items-center justify-center text-core-black [&>svg]:h-full [&>svg]:w-full">
                     {icon}
@@ -68,7 +68,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                 across a row. */}
             <h4 className="line-clamp-2 break-words">{props.name}</h4>
 
-            <div className="flex min-w-0 flex-row items-center !gap-4 @max-[240px]:flex-col @max-[240px]:!gap-2">
+            <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_1px_minmax(0,1fr)] items-center !gap-4 @max-[240px]:grid-cols-1 @max-[240px]:!gap-2">
                 <StatColumn
                     icon={<LuDollarSign aria-hidden />}
                     label="Budget"
@@ -79,7 +79,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                     }
                 />
                 <div
-                    className="!h-14 !w-px shrink-0 self-center !bg-black-300 @max-[240px]:hidden"
+                    className="!h-20 !w-px shrink-0 !bg-black-300 @max-[240px]:hidden"
                     aria-hidden
                 />
                 <StatColumn