fix: align card footers to bottom on project and service cards

Cards with descriptions appeared taller than those without, causing
the 'Created at' and service count text to be misaligned across cards
in the same row.

- Add flex-col and mt-auto to project cards so footer sticks to bottom
- Add h-full to service card Link and Card so they fill the grid cell
This commit is contained in:
Amit
2026-05-02 22:40:38 +05:30
parent e0c6ed699d
commit 1ed41fe2f8
2 changed files with 4 additions and 4 deletions
@@ -344,7 +344,7 @@ export const ShowProjects = () => {
}
}}
>
<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border">
<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border flex flex-col">
<CardHeader>
<CardTitle className="flex items-center justify-between gap-2 overflow-clip">
<span className="flex flex-col gap-1.5 ">
@@ -491,7 +491,7 @@ export const ShowProjects = () => {
</div>
</CardTitle>
</CardHeader>
<CardFooter className="pt-4">
<CardFooter className="pt-4 mt-auto">
<div className="space-y-1 text-xs flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
<DateTooltip date={project.createdAt}>
Created
@@ -1620,9 +1620,9 @@ const EnvironmentPage = (
<ContextMenuTrigger asChild>
<Link
href={`/dashboard/project/${projectId}/environment/${environmentId}/services/${service.type}/${service.id}`}
className="block"
className="block h-full"
>
<Card className="flex flex-col group relative cursor-pointer bg-transparent transition-colors hover:bg-border">
<Card className="flex flex-col h-full group relative cursor-pointer bg-transparent transition-colors hover:bg-border">
{service.serverId && (
<div className="absolute -left-1 -top-2">
<ServerIcon className="size-4 text-muted-foreground" />