Improve filters layout on smaller screens#1837
Improve filters layout on smaller screens#1837dede999 wants to merge 3 commits intokernelci:mainfrom
Conversation
MarceloRobert
added
the
Frontend
dede999
force-pushed
the
feat/improve_filters_layout
branch
from
3e6e6fe to
bea9ead
Compare
|
|
||
| const logExcerptFileLink = data?.output_files?.find( | ||
| file => file && file['name'] === 'log_excerpt', | ||
| file => file?.['name'] === 'log_excerpt', |
There was a problem hiding this comment.
this looks like an unrelated change
There was a problem hiding this comment.
It was necessary as the linter was complaining about it, but indeed, it's totally unrelated
| <header className="mb-7 w-full"> | ||
| <DrawerTitle> | ||
| <div className="mx-auto mb-4 flex w-[1400px] items-center justify-between"> | ||
| <div className="mx-auto mb-4 flex w-full items-center justify-between"> |
There was a problem hiding this comment.
we need to keep max-width here, otherwise the filters container will grow unexpectedly on bigger screens
| <div className="mx-auto mb-4 flex w-full items-center justify-between"> | |
| <div className="mx-auto mb-4 flex max-w-[1400px] items-center justify-between"> |
| {itemComponents} | ||
| </div> | ||
| ); | ||
| return <div className="flex flex-wrap gap-x-4 gap-y-6">{itemComponents}</div>; |
There was a problem hiding this comment.
we need to keep max-w-[1000px] here to preserve behavior on bigger screens
| return ( | ||
| <div className="mb-8 flex items-center justify-between"> | ||
| <div className="border-dark-gray flex h-[52px] w-full flex-col border bg-white px-4 py-2"> | ||
| <div className="border-dark-gray flex min-h-[52px] w-full max-w-full flex-col border bg-white px-4 py-2"> |
There was a problem hiding this comment.
we can keep just max-w-full here probably, as we are using both as -full
| </span> | ||
| <a | ||
| className="text-dim-black text-base underline" | ||
| className="text-dim-black text-base break-all underline" |
| <DrawerContent className="bg-light-gray flex h-screen items-center px-4"> | ||
| <DrawerContent className="bg-light-gray flex h-full flex-col px-4"> | ||
| <DrawerHeader /> | ||
| <section className="h-full overflow-y-auto"> | ||
| <section className="w-full flex-1 overflow-y-auto"> | ||
| {drawerLinkComponent} | ||
| <div className="w-[1000px] rounded-lg bg-white px-6 py-5"> | ||
| <div className="w-full rounded-lg bg-white px-6 py-5"> |
There was a problem hiding this comment.
didn't get why these changes are needed, I think we can just change w-[1000px] to w-auto
There was a problem hiding this comment.
These changes were result of the trial and error process, I should have changed back. About w-[1000px], we can't use it like this, as it will spread to the 1000px even no matter hot big the screen is. Can I use it max-w-[1000px]?
There was a problem hiding this comment.
yeah, max-w-[1000px] should be okay, but I think that if we make the changes from the comments before, using w-auto here would be okay
alanpeixinho
left a comment
alanpeixinho
left a comment
There was a problem hiding this comment.
Looks great.
One small point.
For bigger strings (especially in config section), there is some misalignment between checkboxes and text, and between the boxes itselves.
It is not a problem for navigation, but, if it is simple to address might be worth it.
Change w-fit to w-full so the filter container respects the viewport width instead of expanding to its natural content width.
The linter politely pointed out that `file?.['name']` is more concise than `file && file['name']` Closes kernelci#1419
dede999
force-pushed
the
feat/improve_filters_layout
branch
from
f1fc1ad to
62664f7
Compare
4 participants
Description
This PR address the problem about the layout of the filters and it can be tested by inspecting the screen sizes on your browser
Related Issue
Closes #1419