Fix homepage cards rendering at inconsistent heights#2011
Fix homepage cards rendering at inconsistent heights#2011
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughTailwind layout tweaks applied across space list and card components to enforce consistent heights and prevent overflow: added Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 | 🟡 MinorLoading skeleton height no longer matches the reserved two-line description area.
Line 125 keeps
height="26px"while Line 127 enforcesmin-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
📒 Files selected for processing (4)
apps/web/src/app/[lang]/my-spaces/page.tsxpackages/epics/src/spaces/components/space-card-with-discoverability.tsxpackages/epics/src/spaces/components/space-card.container.tsxpackages/epics/src/spaces/components/space-card.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/epics/src/spaces/components/space-card.tsx (1)
127-130: Switch toline-clamp-2for better description preview while maintaining layout consistency.The current
truncateutility forces single-line truncation. Usingline-clamp-2would display more context to users while keeping themin-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
📒 Files selected for processing (4)
packages/epics/src/spaces/components/inner-space-card.container.tsxpackages/epics/src/spaces/components/space-card-with-discoverability.tsxpackages/epics/src/spaces/components/space-card.container.tsxpackages/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
|
@cursoragent make sure that two lines are fully visible in the description |
|
Taking a look!   |
|
@cursoragent make sure that two lines are fully visible in the description |
|
Handled proactively — I pushed an additional fix to ensure the description shows up to 2 full lines without clipping. What I changedIn
This guarantees space for two complete lines based on the same Commit pushed: |
|
@cursoragent now it is all good when the screen is very wide also good when the screen is for mobile. But there is still problem when the width of the screen is medium (check screenshot). Problem is that the date gets out of the card, there is too much spacing between the description and agreements/members. And the tag Sandbox/Pilot etc. should be placed in the right corner on top of the communities image, otherwise with certain widths it overlaps with other data in the card. 
|
|
Implemented proactively based on that PR comment, and pushed a targeted fix for the medium-width layout issues. What I changedIn
Commit pushed
|
|
@cursoragent make some changes
|
|
Done — I made both requested changes and pushed them. ✅ Changes implemented
File changed
Commit pushed
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/epics/src/spaces/components/space-card.tsx`:
- Around line 131-142: Extract the inline style block applied to the description
div into a reusable CSS/Tailwind utility (e.g., .description-2-lines) and
replace the inline style in the JSX with that class; update the component
surrounding the Skeleton and the div (the div using className "text-1
text-neutral-11 mb-0 line-clamp-2" and title={description}) to include the new
utility instead of the inline lineHeight and minHeight calculations, and add the
utility to your stylesheet or Tailwind config using the same calc(...)
expressions referencing --text-1--line-height and --text-1 so the two-line
height behavior is preserved and reusable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 3cb3f287-7692-45fb-a0d5-9671b97c5e69
📒 Files selected for processing (1)
packages/epics/src/spaces/components/space-card.tsx
| <Skeleton loading={isLoading} className="mb-4" width="100%" height="26px"> | ||
| <div | ||
| className="text-1 text-neutral-11 mb-0 line-clamp-2" | ||
| style={{ | ||
| lineHeight: 'calc(var(--text-1--line-height) * var(--text-1))', | ||
| minHeight: 'calc(var(--text-1--line-height) * var(--text-1) * 2)', | ||
| }} | ||
| title={description} | ||
| > | ||
| <div className="text-1 text-neutral-11 mb-4 line-clamp-2"> | ||
| {description} | ||
| </div> | ||
| </Skeleton> | ||
| </div> | ||
| <div className="flex gap-2 text-xs items-center"> | ||
| <div className="flex flex-col gap-y-2 gap-x-4 flex-wrap"> | ||
| {description} | ||
| </div> | ||
| </Skeleton> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider extracting inline style calculations to a CSS class.
The inline styles using CSS custom properties are functionally correct and ensure a consistent 2-line description area as per PR objectives. However, mixing inline styles with Tailwind classes reduces consistency.
If these CSS variables (--text-1--line-height, --text-1) are part of your design system, consider adding a utility class in your Tailwind config or CSS that encapsulates this 2-line height pattern for reuse elsewhere.
Example utility class approach
In your CSS/design system:
.description-2-lines {
line-height: calc(var(--text-1--line-height) * var(--text-1));
min-height: calc(var(--text-1--line-height) * var(--text-1) * 2);
}Then in the component:
<div
- className="text-1 text-neutral-11 mb-0 line-clamp-2"
- style={{
- lineHeight: 'calc(var(--text-1--line-height) * var(--text-1))',
- minHeight: 'calc(var(--text-1--line-height) * var(--text-1) * 2)',
- }}
+ className="text-1 text-neutral-11 mb-0 line-clamp-2 description-2-lines"
title={description}
>🤖 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 131 - 142,
Extract the inline style block applied to the description div into a reusable
CSS/Tailwind utility (e.g., .description-2-lines) and replace the inline style
in the JSX with that class; update the component surrounding the Skeleton and
the div (the div using className "text-1 text-neutral-11 mb-0 line-clamp-2" and
title={description}) to include the new utility instead of the inline lineHeight
and minHeight calculations, and add the utility to your stylesheet or Tailwind
config using the same calc(...) expressions referencing --text-1--line-height
and --text-1 so the two-line height behavior is preserved and reusable.
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
Co-authored-by: n0umen0n <n0umen0n@users.noreply.github.com>
n0umen0n
force-pushed
the
cursor/homepage-card-sizes-3a54
branch
from
d0c47cb to
668b786
Compare
…thHeader hook and improve error logging in useCreateProfile hook. Also, refactor SpaceCard component for better readability and maintainability.
2 participants
Summary
truncate) to prevent overflow1/3columns to1/2/3(base/sm/lg)min-w-0Testing
eslint: not found)Summary by CodeRabbit