fix: use single columns on smaller screens#1802
fix: use single columns on smaller screens#1802dede999 wants to merge 2 commits intokernelci:mainfrom
Conversation
|
Check for the main changes, I balieve we can still improve that grey area not covering the whole screen Screencast.from.2026-03-13.19-51-54.webm |
MarceloRobert
added
the
Frontend
dede999
force-pushed
the
fix/use-single-columns-on-smaller-screens
branch
from
1ab18eb to
2637606
Compare
| { | ||
| children: ( | ||
| <div className="grid grid-cols-2 gap-4"> | ||
| <div className="grid grid-cols-1 gap-4 lg:grid-cols-2"> |
There was a problem hiding this comment.
When going single column the cards are overflowing the screen size.
Take a double look on the cards size.
| before | after |
|---|---|
 |
 |
There was a problem hiding this comment.
I do not see this problem unless I switch pages on viewport inspection mode; in this case, I disable and re-enable it, and the problem is gone
MarceloRobert
left a comment
MarceloRobert
left a comment
There was a problem hiding this comment.
your changes made it so that the treeDetails page now has a horizontal scroll. It shows the tables entirely, but makes the cards have a very useless empty space
also, cards in details pages can still clip to the right; not necessary, but it's a nice-to-have
I was able to fix that Screencast.from.2026-03-19.17-59-46.webm |
|
I believe the current behaviour (on prod) for the Test Details page is mostly fine. |
Previoulsy, the gray-painted div did not extend to the end of the screen, which was not the intended layout Closes kernelci#1432
dede999
force-pushed
the
fix/use-single-columns-on-smaller-screens
branch
from
f27a427 to
a139498
Compare
3 participants
Fixes layout responsiveness for smaller viewpoints by setting the grid size for default, medium and/or large screens
Changes
BuildDetailscomponent, I have wrapped theDetailsInfoCardwith grid classes changing on large views, as I thought it was okay to have only one column on small and medium screensSubsectioncomponent, I have made it change the grid size on medium screens as sub sets generally represent more granular dataHow to test
build/$buildIdpage, inspect it and check different viewpoints to look for points of improvalRelated issue