CodeIssuesPullsCIStacksSearchBranchesTags

Fix bento card layout and preview overlap#20

merged
main
fix/bento-grid-layout
opened18d agobySscreen-gd
4 files changed
View on GitHubRepository sync pausedPR last imported 8d ago

Changes

  • Let bento cards grow with their preview and copy instead of forcing fixed row heights.
  • Keep previews and action links in normal flow so they cannot overlap card content.
  • Keep narrow preview text within its card and remove the fade that obscured preview details.

Verification

  • npm run build
  • git diff --check
  • Impeccable layout detector

Live browser testing was not run, per project instructions.

Summary by CodeRabbit

  • Style
    • Updated feature previews and cards to use more consistent in-card layouts, with content anchored at the bottom.
    • Adjusted text behavior so search text truncates within its available space, category labels wrap, and keyboard shortcuts retain their width.
    • Removed the bottom fade from preview backgrounds and hover animations that shifted card content or scaled icons.
    • Card links and calls to action now remain in the normal content flow across screen sizes.

Checks

All checks passed
Sscreen-gdopened·18d ago
V
vercel[bot]·18d ago

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated
External image colReady ReadyPreviewSep 26, 2026 2:51am UTC
C
coderabbitai[bot]·18d ago

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

[!WARNING]

Review limit reached

Next included review available in 54 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: b20c1710-da12-49e3-8ac9-71c9b676abd0

📥 Commits

Reviewing files that changed from the base of the PR and between ad30aec919b8882f83b1a1f78c8c9421a212c437 and 37ddfc6a72ab355ac72d5bf2ad87d480929e9954.

📒 Files selected for processing (1)
  • components/LibraryExplorer.tsx

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 3e7ce5fb-167e-44e1-9af9-05e7e59944b7

📥 Commits

Reviewing files that changed from the base of the PR and between 0b0a365af7c2f51c0a49b513385be47f2bc6d61f and ad30aec919b8882f83b1a1f78c8c9421a212c437.

📒 Files selected for processing (3)
  • app/globals.css
  • components/WhatsInsideSection.tsx
  • components/ui/bento-grid.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

The bento grid removes fixed row heights and hover-driven effects. Its cards constrain background content and render CTA links in normal flow. Feature previews use normal flow, with updated search and category text handling. The bottom-fade mask is removed.

Changes

Bento layout

Layer / File(s)Summary
Bento grid and card layout
components/ui/bento-grid.tsx		BentoGrid removes fixed auto-row heights. BentoCard constrains its background content, anchors content at the bottom, removes hover movement and icon scaling, and renders its CTA link in normal flow.
Feature preview layout
components/WhatsInsideSection.tsx, app/globals.css		The six feature previews use normal flow instead of absolute positioning. Search text truncates within its available width, category labels wrap, and the grid stays at two columns. .bento-preview no longer has a bottom-fade mask.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to ad30a

The cards now grow with their previews and copy, and no concrete regression is established for the sole consumer. No actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1…Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly and concisely describes the main changes: fixing bento card layout and preview overlap.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

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

I’m a rabbit; I hop by the grid,
Where cards now sit steady, not slid.
The previews flow free,
And text wraps for me,
I nibble the fade—now it’s hid.

Comment @coderabbitai help to get the list of available commands.