fix: improve logview UI#1808
Conversation
Screencast.from.2026-03-17.19-42-04.webmShowing the new log view preview |
MarceloRobert
added
the
Frontend
dede999
force-pushed
the
fix/fix_logview
branch
2 times, most recently
from
7b0ca49 to
6b4a373
Compare
alanpeixinho
left a comment
alanpeixinho
left a comment
There was a problem hiding this comment.
Remember to try for even smaller screen sizes.
Most phones goes to a screen resolution close to 360 x 800.
And can we increase the side panel size?
It seems we start to scroll way before we are actually using most of the screen size.
MarceloRobert
left a comment
MarceloRobert
left a comment
There was a problem hiding this comment.
On small screens the components inside the log sheet are still larger than the screen. In this case I believe that we could rearrange the components and let it scroll vertically instead of add a horizontal scroll
| return ( | ||
| <> | ||
| <div className="min-h-[300px]"> | ||
| <div className="max-h-500 min-h-[300px] w-full"> |
There was a problem hiding this comment.
by adding a max-height to this component you also changed the behavior on the logViewer page, which now cuts off the log after size 500. I believe you don't need to alter this component for this task...
dede999
force-pushed
the
fix/fix_logview
branch
from
e1b97da to
0b4b14c
Compare
Screencast.from.2026-03-23.18-01-18.webmI believe the problems about the logview are already addressed |
dede999
force-pushed
the
fix/fix_logview
branch
from
3e53475 to
0b4b14c
Compare
|
Managed to reproduce the video now. |
|
We should check behaviour on the smaller screens, and especially when the log excerpt is bigger. 
|
Screencast.from.2026-03-26.16-31-12.webm |
|
This new video includes a page refresh for every screen size |
|
@dede999 have you tested on firefox? chrome seems to be zooming out on those smaller resolutions |
This is made not only to stop the logviewer to overflow its height, which could be done by other means, but also to force the component to occupy a determined share of the screen
Such improvement was made by locking a maximun height value and the optimal value for clamp function How were these values set? Empirically; no specific technique has been used to set them. Closes kernelci#1429
Add flex-col/lg:flex-row so detailsButton and nav buttons stack on small screens and align side by side on lg+.
Restructure footer buttons for small screens: wrap nav buttons with grid-cols-1/lg:grid-cols-3, add vertical spacing (mt/mb) on mobile removed on lg+, and distribute items with justify-evenly on small screens and justify-end on lg+.
This was made as it was causing the middle button to shrink on smaller breakpoints
dede999
force-pushed
the
fix/fix_logview
branch
from
5c402bd to
7f55b19
Compare
Thank you for that. It was really breaking before I have made a rebase as @gustavobtflores suggested, and now it's working as it should Screencast.from.2026-03-27.11-27-09.webm |
4 participants
Description
This PR modifies how log viewer behave on many viewpoints. It does not avoid horizontal overflow, but the user now can scroll both vertically and horizontally
How to test
Related issue