# Fix bento card layout and preview overlap · PR \#20 · screen/col

[View on GitCafe](https://git.cafe/screen/col/pull/20)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

State: merged

Source repository: screen/col

Source branch: fix/bento-grid-layout

Target branch: main

Head commit: 37ddfc6a72ab355ac72d5bf2ad87d480929e9954

[Discussion and reviews](https://git.cafe/screen/col/pull/20)

[Commits](https://git.cafe/screen/col/pull/20/commits?format=markdown)

[Files changed](https://git.cafe/screen/col/pull/20/diffs?format=markdown)

## Description

---

## 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.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->