-
-
Notifications
You must be signed in to change notification settings - Fork 21.3k
Marketplace page UI/ UX enhancements #4819
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.
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
Conversation
This is good. Love it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR enhances the Marketplace page by replacing the manual usecase checkbox list with an Autocomplete component and refines the layout/styling of the Export Data modal.
- Introduce MUI Autocomplete for selecting usecases in
Marketplace
- Wrap tabs and autocomplete in a horizontal Stack for improved layout
- Change Export Data modal’s options layout to a two-column CSS grid
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
File | Description |
---|---|
packages/ui/src/views/marketplaces/index.jsx | Swap manual checkbox list for MUI Autocomplete and adjust tabs wrap |
packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx | Convert export options Stack to a two-column grid layout |
Comments suppressed due to low confidence (1)
packages/ui/src/views/marketplaces/index.jsx:648
- The component
ListItemText
is used inrenderOption
but not imported. Addimport { ListItemText } from '@mui/material'
to prevent runtime errors.
<ListItemText primary={option} />
direction='row' | ||
sx={{ | ||
display: 'grid', | ||
gridTemplateColumns: 'repeat(2, 1fr)' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nitpick] When using CSS grid here, add a gap
(e.g. gap: 1
or gridGap: '16px'
) to the sx
so the grid items aren’t flush against each other.
gridTemplateColumns: 'repeat(2, 1fr)' | |
gridTemplateColumns: 'repeat(2, 1fr)', | |
gap: '16px' |
Copilot uses AI. Check for mistakes.
Thanks for the suggestion @HenryHengZJ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thank you!
Description:
Introduced an Autocomplete component to select usecases in the marketplace page
Before:

After:

Improved styling of Export Data modal
Before:

After:
