Fix homepage cards rendering at inconsistent heights by n0umen0n · Pull Request #2011 · hypha-dao/hypha-web

n0umen0n · 2026-03-16T09:05:52Z

Summary

keep space cards equal-height in shared card grids so short content does not shrink cards
truncate long card text in the body/title using Tailwind text-overflow utilities (truncate) to prevent overflow
improve responsive behavior at smaller breakpoints by changing card grids from 1/3 columns to 1/2/3 (base/sm/lg)
ensure card wrappers/links stretch full height and allow truncation via min-w-0

Testing

not run in this cloud environment (workspace dependencies are not installed; previous lint attempt failed with eslint: not found)

Summary by CodeRabbit

Style
- Refined space card layout for consistent heights and alignment across lists and grids; expanded clickable areas to cover full card height.
- Improved responsive grid row sizing so cards remain uniform.
- Prevented text overflow for titles, descriptions, and meta info; applied truncation with hover-tooltips for full descriptions.
- Added constraints to allow content to shrink and avoid layout overflow.

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

coderabbitai · 2026-03-16T09:05:58Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ea7cd077-68d4-4bd6-ba83-32cd7d0dda0c

📥 Commits

Reviewing files that changed from the base of the PR and between f3ca566 and 9aea5c3.

📒 Files selected for processing (1)

packages/epics/src/spaces/components/space-card.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/epics/src/spaces/components/space-card.tsx

📝 Walkthrough

Walkthrough

Applied Tailwind layout tweaks across space list and card components: added h-full, min-w-0, truncate, min-h-[2.5rem], and auto-rows-fr to enforce consistent card heights and prevent overflow; no data-flow, API, or logic changes. (50 words)

Changes

Cohort / File(s)	Summary
My Spaces page `apps/web/src/app/[lang]/my-spaces/page.tsx`	`Link` wrapping each space item gains `h-full` to extend clickable area.
Space Card with Discoverability `packages/epics/src/spaces/components/space-card-with-discoverability.tsx`	`Link` updated to include `h-full min-w-0` alongside existing flex classes to control sizing.
Space Card Containers `packages/epics/src/spaces/components/space-card.container.tsx`, `packages/epics/src/spaces/components/inner-space-card.container.tsx`	Grid containers add `auto-rows-fr`; each item wrapper adds `h-full min-w-0`; `Link` set to `flex flex-col h-full`.
Space Card internals `packages/epics/src/spaces/components/space-card.tsx`	Added `min-w-0` to content containers, applied `truncate` to title/createdAt, constrained description with `min-h-[2.5rem]` and `title` attribute to prevent overflow and enable ellipsis.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Feat/887 my spaces doesnt show all the spaces im a member of #1041 — Modifies the same space card and container components; related layout/className edits.
feat(#678): fixed spacing for spaces you might like section #758 — Adjusts layout/className of space item containers including Link wrappers.
Feat/1279 My Spaces - 3 space per row #1297 — Edits responsive grid and space-card container classNames affecting sizing/rows.

Suggested reviewers

DSanich
evgenibir

Poem

🐰 I hopped from row to card with glee,
Pushed h-full and min-w-0 beneath a tree.
Titles now trim, descriptions stay neat,
Cards stand even on every seat. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main objective of the changeset: fixing inconsistent card heights in the homepage UI.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch cursor/homepage-card-sizes-3a54

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/epics/src/spaces/components/space-card.tsx (1)

121-127: ⚠️ Potential issue | 🟡 Minor

Loading skeleton height no longer matches the reserved two-line description area.

Line 125 keeps height="26px" while Line 127 enforces min-h-[2.5rem] (40px), so cards can still jump in height between loading and loaded states.

Suggested fix

             <Skeleton
               loading={isLoading}
               className="mb-4"
               width="100%"
-              height="26px"
+              height="40px"
             >
               <div className="text-1 text-neutral-11 mb-4 line-clamp-2 min-h-[2.5rem]">
                 {description}
               </div>
             </Skeleton>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/epics/src/spaces/components/space-card.tsx` around lines 121 - 127,
The Skeleton's fixed height ("26px") doesn't match the content container's
reserved min height ("min-h-[2.5rem]" ≈ 40px) causing layout jumps; update the
Skeleton used around the description (the <Skeleton loading={isLoading} ...>
surrounding the div with className "text-1 ... min-h-[2.5rem]") so its height
matches the reserved space (e.g., change height to "40px" or "2.5rem") or remove
the min-h on the content div so both states reserve the same vertical space.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/epics/src/spaces/components/space-card.tsx`:
- Around line 121-127: The Skeleton's fixed height ("26px") doesn't match the
content container's reserved min height ("min-h-[2.5rem]" ≈ 40px) causing layout
jumps; update the Skeleton used around the description (the <Skeleton
loading={isLoading} ...> surrounding the div with className "text-1 ...
min-h-[2.5rem]") so its height matches the reserved space (e.g., change height
to "40px" or "2.5rem") or remove the min-h on the content div so both states
reserve the same vertical space.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 01b79d55-4cc0-4948-a1b0-069310e47d5c

📥 Commits

Reviewing files that changed from the base of the PR and between c923947 and 53609b4.

📒 Files selected for processing (4)

apps/web/src/app/[lang]/my-spaces/page.tsx
packages/epics/src/spaces/components/space-card-with-discoverability.tsx
packages/epics/src/spaces/components/space-card.container.tsx
packages/epics/src/spaces/components/space-card.tsx

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

coderabbitai

🧹 Nitpick comments (1)

packages/epics/src/spaces/components/space-card.tsx (1)
127-130: Switch to line-clamp-2 for better description preview while maintaining layout consistency.

The current truncate utility forces single-line truncation. Using line-clamp-2 would display more context to users while keeping the min-h-[2.5rem] row height consistent.
♻️ Suggested adjustment
               <div
-                className="text-1 text-neutral-11 mb-4 min-h-[2.5rem] truncate"
+                className="text-1 text-neutral-11 mb-4 min-h-[2.5rem] line-clamp-2"
                 title={description}
               >
The line-clamp-* utility is already supported and in use across the codebase (e.g., packages/ui/src/select.tsx, packages/epics/src/spaces/components/inner-space-card.tsx).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/epics/src/spaces/components/space-card.tsx` around lines 127 - 130,
In the space-card component replace the single-line truncation class on the
description div by swapping "truncate" for "line-clamp-2" so the element (the
div with className "text-1 text-neutral-11 mb-4 min-h-[2.5rem] truncate" and
title={description}) shows two lines of preview while keeping the existing
min-h-[2.5rem] height; update the className to "text-1 text-neutral-11 mb-4
min-h-[2.5rem] line-clamp-2" (no other logic changes needed).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/epics/src/spaces/components/space-card.tsx`:
- Around line 127-130: In the space-card component replace the single-line
truncation class on the description div by swapping "truncate" for
"line-clamp-2" so the element (the div with className "text-1 text-neutral-11
mb-4 min-h-[2.5rem] truncate" and title={description}) shows two lines of
preview while keeping the existing min-h-[2.5rem] height; update the className
to "text-1 text-neutral-11 mb-4 min-h-[2.5rem] line-clamp-2" (no other logic
changes needed).

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ef79267d-a3fa-43af-9741-51b0b16a818f

📥 Commits

Reviewing files that changed from the base of the PR and between 53609b4 and 30643d9.

📒 Files selected for processing (4)

packages/epics/src/spaces/components/inner-space-card.container.tsx
packages/epics/src/spaces/components/space-card-with-discoverability.tsx
packages/epics/src/spaces/components/space-card.container.tsx
packages/epics/src/spaces/components/space-card.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/epics/src/spaces/components/space-card-with-discoverability.tsx

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

n0umen0n · 2026-03-23T14:32:47Z

@cursoragent make sure that two lines are fully visible in the description

cursor · 2026-03-23T14:32:54Z

Taking a look!

n0umen0n · 2026-03-23T14:35:48Z

@cursoragent make sure that two lines are fully visible in the description

cursor · 2026-03-23T14:35:56Z

Handled proactively — I pushed an additional fix to ensure the description shows up to 2 full lines without clipping.

What I changed

In packages/epics/src/spaces/components/space-card.tsx, I updated the description block to use typography-token-based sizing:

kept line-clamp-2 (max 2 lines)
removed hardcoded height
set:
- lineHeight: calc(var(--text-1--line-height) * var(--text-1))
- minHeight: calc(var(--text-1--line-height) * var(--text-1) * 2)

This guarantees space for two complete lines based on the same text-1 token values used by the design system, so it won’t get cut at different breakpoints/themes.

Commit pushed: 9aea5c3c

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

Fix homepage space cards to equal heights

53609b4

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

cursor bot mentioned this pull request Mar 16, 2026

Cards on the homepage are different sizes. #2010

Open

n0umen0n marked this pull request as ready for review March 16, 2026 09:21

n0umen0n requested a review from DSanich March 16, 2026 09:21

coderabbitai bot reviewed Mar 16, 2026

View reviewed changes

Truncate card body text and fix small-screen grid

30643d9

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

coderabbitai bot reviewed Mar 16, 2026

View reviewed changes

cursoragent and others added 2 commits March 16, 2026 14:30

Clamp card body text to two lines

f3ca566

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

Enforce stable two-line card description clamp

1e113dc

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

Ensure two full description lines remain visible

9aea5c3

Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix homepage cards rendering at inconsistent heights#2011

Fix homepage cards rendering at inconsistent heights#2011
n0umen0n wants to merge 5 commits intomainfrom
cursor/homepage-card-sizes-3a54

n0umen0n commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

n0umen0n commented Mar 23, 2026

Uh oh!

cursor bot commented Mar 23, 2026

Uh oh!

n0umen0n commented Mar 23, 2026

Uh oh!

cursor bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

n0umen0n commented Mar 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Testing

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

n0umen0n commented Mar 23, 2026

Uh oh!

cursor bot commented Mar 23, 2026

Uh oh!

n0umen0n commented Mar 23, 2026

Uh oh!

cursor bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I changed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

n0umen0n commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

cursor bot commented Mar 23, 2026 •

edited

Loading