Skip to content

fix(frontend): Featured agents cards layout+sizing #9482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 10 commits into from
Mar 5, 2025
Merged

fix(frontend): Featured agents cards layout+sizing #9482

merged 10 commits into from
Mar 5, 2025

Conversation

Bentlybro
Copy link
Member

Changes 🏗️

right now the featured agents cards dont have a set width/height, so they change depending on the content, and the description is duplicated. also, the "by {creator username}" was removed. currently it looks like this:

chrome_SBwRrkEN28

with my changes, i set a fixed width and height so they dont change, the description now only shows on hover and is truncated to 11 lines, and i added back the "by {creator username}"

chrome_qujRVF4LsX

@Bentlybro Bentlybro requested a review from a team as a code owner February 14, 2025 15:59
@Bentlybro Bentlybro requested review from kcze and majdyz and removed request for a team February 14, 2025 15:59
@github-actions github-actions bot added platform/frontend AutoGPT Platform - Front end platform/backend AutoGPT Platform - Back end labels Feb 14, 2025
@deepsource-io deepsource.io
Copy link

deepsource-io bot commented Feb 14, 2025 •
edited
Loading

Here's the code health analysis summary for commits 55d6495..902e53b. View details on DeepSource ↗.

Analysis Summary

AnalyzerStatusSummaryLink
DeepSource JavaScript LogoJavaScript✅ Success
❗ 1 occurence introduced
🎯 2 occurences resolved
View Check ↗
DeepSource Python LogoPython✅ SuccessView Check ↗
💡 If you’re a repository administrator, you can configure the quality gates from the settings.

@netlify Netlify
Copy link

netlify bot commented Feb 14, 2025 •
edited
Loading

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name Link
🔨 Latest commit 902e53b
🔍 Latest deploy log https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/67c854d891ef4c0008ae9d0a

@netlify Netlify
Copy link

netlify bot commented Feb 14, 2025 •
edited
Loading

✅ Deploy Preview for auto-gpt-docs canceled.

Name Link
🔨 Latest commit 902e53b
🔍 Latest deploy log https://app.netlify.com/sites/auto-gpt-docs/deploys/67c854d8d3871f00072dca42

@Bentlybro Bentlybro removed the platform/backend AutoGPT Platform - Back end label Feb 14, 2025
@Bentlybro Bentlybro changed the title Update(Frontend) Featured agents cards update(frontend) Featured agents cards Feb 14, 2025
@Bentlybro Bentlybro enabled auto-merge February 14, 2025 16:20
@github-actions github-actions bot added the platform/backend AutoGPT Platform - Back end label Feb 15, 2025
andrewhooker2
andrewhooker2 reviewed Feb 18, 2025
View reviewed changes
Copy link
Contributor

@andrewhooker2 andrewhooker2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job on this component I like where this is headed.

I have a few suggestions to help make this more maintainable and mobile-friendly:

  1. I notice you're adding quite a few styles to control the card heights and layout. Instead of managing this at the card level, we should try to handle consistency through the carousel layout. This will make our components more reusable.

  2. Some helpful things to consider:

    • The FeaturedAgentCard should be as clean as possible, with minimal style overrides
    • Let try using aspect ratios instead of fixed heights for responsive images

Feel free to reach out to me if you would like to sync up at all.
I'd be happy to show you how we can achieve the same layout consistency while keeping our base components clean and reusable.

@majdyz
Copy link
Contributor

majdyz commented Feb 20, 2025

Removing myself here since it's already reviewed

@majdyz majdyz removed their request for review February 20, 2025 10:49
@Bentlybro
Copy link
Member Author

Bentlybro commented Mar 5, 2025 •
edited
Loading

Hey @andrewhooker2 with the changes you suggested made this happens because we arnt controlling the sizing any more - i.e removing flex h-[482px] w-[440px] flex-col any advice?

Adding flex-none and custom spacing here makes the component less reusable. If we need consistent heights, we can handle that at the carousel layout level.

I did set sizing in the carousel but that isnt working it seems.

I really want to get this done and in today for the release as it was ment to be a quick fix.

Also wanted to say a big thank you for going over this and checking it out for me 🙏

image

@andrewhooker2
Copy link
Contributor

Hey there @Bentlybro thanks for taking a look back over this.
To help move this item along I've added this PR to merge into yours I hope it helps.

#9571

@Bentlybro
Copy link
Member Author

Thank you so much @andrewhooker2 ill have a look at that now 🙏

@andrewhooker2
fix(frontend): Refactor FeaturedSection and FeaturedAgentCard compone…
7583d8c 
…nts. (#9571)

Simplify layout and styling for better responsiveness and
maintainability.
Reorganize markup to remove redundant wrappers and improve flexibility. 
Adjust FeaturedAgentCard to dynamically handle aspect ratios and
optimize hover transitions.

### Changes 🏗️

**FeaturedAgentCard:**
- Removed fixed height/width constraints and replaced with flexible
h-full container
- Simplified nested div structure by eliminating redundant containers
- Implemented proper aspect ratio (aspect-[4/3]) for consistent image
display across devices
- Optimized hover transition by applying styles directly to Image
component
- Removed redundant positioning attributes and unnecessary wrapper
elements

**FeaturedSection:**
- Replaced arbitrary width calculations with responsive Tailwind classes
- Improved carousel item responsiveness with proper breakpoints
(basis-full sm:basis-1/2 md:basis-1/3 lg:basis-1/4)
- Changed fixed height containers to aspect-ratio based layout for
better adaptability
- Simplified button positioning with standard Tailwind utilities

**Overall Improvements:**
- Better adherence to ShadcN component design philosophy
- More maintainable and consistent code structure
- Improved responsive behavior across different screen sizes
- Reduced HTML complexity and CSS specificity

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

### Screenshots 📷
<img width="998" alt="image"
src="https://github.com/user-attachments/assets/7b1beef4-5b6f-47f3-b645-bb44686251be"
/>

<details>
  <summary>Feature Store Agents</summary>
- [ ] Verify FeaturedAgentCard renders with correct aspect ratio on all
screen sizes
- [ ] Test hover effect on cards (image fades out, description fades in)
- [ ] Verify carousel shows correct number of cards per breakpoint
(mobile: 1, tablet: 2, desktop: 3-4)
- [ ]  Test carousel navigation using left/right buttons and indicators
- [ ] Verify clicking on a card navigates to the correct agent detail
page
- [ ] Verify no visual regressions in surrounding marketplace components
</details>

---------

Co-authored-by: Bentlybro
@github-actions github-actions bot added size/l and removed size/m labels Mar 5, 2025
@github-project-automation github-project-automation bot moved this to 🆕 Needs initial review in AutoGPT development kanban Mar 5, 2025
@Bentlybro Bentlybro changed the title update(frontend) Featured agents cards fix(frontend): Featured agents cards Mar 5, 2025
@Pwuts Pwuts changed the title fix(frontend): Featured agents cards fix(frontend): Featured agents cards layout/sizing Mar 5, 2025
@Pwuts Pwuts changed the title fix(frontend): Featured agents cards layout/sizing fix(frontend): Featured agents cards layout+sizing Mar 5, 2025
@github-project-automation github-project-automation bot moved this from 🆕 Needs initial review to 👍🏼 Mergeable in AutoGPT development kanban Mar 5, 2025
@Bentlybro Bentlybro added this pull request to the merge queue Mar 5, 2025
Merged via the queue into dev with commit b50ecbf Mar 5, 2025
25 checks passed
@Bentlybro Bentlybro deleted the update-Featured-agents-cards branch March 5, 2025 14:54
@github-project-automation github-project-automation bot moved this from 👍🏼 Mergeable to ✅ Done in AutoGPT development kanban Mar 5, 2025
@github-project-automation github-project-automation bot moved this to Done in Frontend Mar 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Swiftyos Swiftyos Swiftyos left review comments

@andrewhooker2 andrewhooker2 andrewhooker2 left review comments

@Pwuts Pwuts Pwuts approved these changes

@kcze kcze Awaiting requested review from kcze kcze is a code owner automatically assigned from Significant-Gravitas/maintainers

Assignees
No one assigned
Labels
platform/backend AutoGPT Platform - Back end platform/frontend AutoGPT Platform - Front end size/l
Projects
AutoGPT development kanban
Status: ✅ Done
Frontend
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@Bentlybro @majdyz @andrewhooker2 @Swiftyos @Pwuts