mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-02-11 15:25:16 -05:00
fix(frontend): add min-width-0 to ContentCard to prevent overflow (#12060)
### Changes 🏗️ Added `min-w-0` class to the ContentCard component in the ToolAccordion to prevent content overflow issues. This CSS fix ensures that the card properly respects its container width constraints and allows text truncation to work correctly when content is too wide. ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Verified that tool content displays correctly in the accordion - [x] Confirmed that long content properly truncates instead of overflowing - [x] Tested with various screen sizes to ensure responsive behavior #### For configuration changes: - [x] `.env.default` is updated or already compatible with my changes - [x] `docker-compose.yml` is updated or already compatible with my changes <!-- greptile_comment --> <h2>Greptile Overview</h2> <details><summary><h3>Greptile Summary</h3></summary> Added `min-w-0` class to `ContentCard` component to fix text truncation overflow in grid layouts. This is a standard CSS fix that allows grid items to shrink below their content size, enabling `truncate` classes on child elements (`ContentCardTitle`, `ContentCardSubtitle`) to work correctly. The fix follows the same pattern already used in `ContentCardHeader` (line 54) and `ToolAccordion` (line 54). </details> <details><summary><h3>Confidence Score: 5/5</h3></summary> - Safe to merge with no risk - Single-line CSS fix that addresses a well-known flexbox/grid layout issue. The change follows existing patterns in the codebase and is thoroughly tested. No logic changes, no breaking changes, no side effects. - No files require special attention </details> <!-- greptile_other_comments_section --> <!-- /greptile_comment -->
This commit is contained in:
@@ -30,7 +30,7 @@ export function ContentCard({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg bg-gradient-to-r from-purple-500/30 to-blue-500/30 p-[1px]",
|
||||
"min-w-0 rounded-lg bg-gradient-to-r from-purple-500/30 to-blue-500/30 p-[1px]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user