feat: BROS-62: Responsive grid images #7640
Conversation
✅ Deploy Preview for label-studio-docs-new-theme canceled.
|
✅ Deploy Preview for heartex-docs canceled.
|
✅ Deploy Preview for label-studio-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for label-studio-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
nick-skriabin
requested review from
nass600,
hlomzik,
bmartel,
niklub and
yyassi-heartex
and removed request for
a team
There was a problem hiding this comment.
we need to be careful with this - what happens when a user adds more columns to display in grid view? since the image is now hight based does it just continuously get smaller?
Alec mentioned need to include an ability to change the size of the image / amount of text and possibly the ability to change the size of the tile based on the number in the row so it gets bigger + the ability to scroll through text in the grid view?
Happy to sync on this with you - feels like there is more to be done here
tested in FB - I see the image can get squished in certain situations
screen-recorder-wed-may-28-2025-13-36-47.webm
There was a problem hiding this comment.
Consider test coverage for <GridView>, which includes:
- The main GridView component itself (in the current implementation, only GridBody was tested)
- GridHeader component functionality
- GridCell component interactions
- GridDataGroup component behavior
- Grid selection interactions (checkboxes, row selection)
- Grid resizing and responsive behavior
- Click handlers and event management
- Different data types beyond images (Text, Unknown types)
Added autogenerated tests for your convenience, feel free to edit or remove them, but keeping the coverage high enough
This pull request updates the
GridView.scssfile to enhance the layout and styling of theGridViewcomponent. The changes introduce grid-based layout adjustments for better structure and responsiveness.Layout improvements:
&-bodyclass with a grid-based layout. This includes handling cases where the body contains an image, ensuring proper alignment and responsiveness. Additionally, images within the body are set to take up the full height.&-contentclass to use a grid layout with rows defined asmin-contentandminmax(0, 1fr), improving the content structure and adaptability.