chore: reduce width and font size subnavigation #9325
Conversation
cdrage
requested review from
dgolovin,
gastoner and
SoniaSandler
and removed request for
a team
| leftsidebar: '225px', | ||
| leftsidebar: '170px', | ||
| }, | ||
| minWidth: { | ||
| leftnavbar: '48px', | ||
| leftsidebar: '225px', | ||
| leftsidebar: '170px', |
There was a problem hiding this comment.
not directly related to this PR, but it makes me feeling that maybe the dimension of the sidebar should not be part of the tailwind configuration but of the component or the core (like the color-registry)
where the value are then being injected into the CSS
because if we change the value there, probably that AI lab would have to change it in their fork of the tailwind config while we might think that the width is set by Podman Desktop
There was a problem hiding this comment.
@benoitf should AI lab plan to change it in their extensions too / implement the navigation bar? i'm assuming it's a separate svelte file for them?
would it be suitable to include the pixel width in the color-registry file so it's easily retrievable like everything else? unsure if this should be a separate PR or not
There was a problem hiding this comment.
(it's just thoughts there, that I wanted to share but it won't hold the PR)
There was a problem hiding this comment.
but yes it's defined there:
https://github.com/containers/podman-desktop-extension-ai-lab/blob/main/packages/frontend/tailwind.config.cjs#L51-L57
but still having the item being defined there https://github.com/containers/podman-desktop-extension-ai-lab/blob/main/packages/frontend/src/lib/Navigation.svelte#L5
so probably enhancement need to be done on the component's side
There was a problem hiding this comment.
Ahh that makes sense. Let's open up an issue regarding this so we can help standardize this. I know we've been discussing webviews as well as subnavigation, so I'm unsure what the result of that discussion may impact this either.
cdrage
force-pushed
the
smaller-submenu
branch
from
1a2b04a
to
9c0f871
Compare
|
Looks great! Just one nit - can we center the arrow on the preferences menu item so its inline with the text
|
cdrage
force-pushed
the
smaller-submenu
branch
from
9c0f871
to
6485b1e
Compare
Done!
Added Keeping the |
|
In AI Lab here is what it would look likes
|
### What does this PR do? Reduces the width and font size of the subnavigation for Kubernetes and settings menus (and other components using the UI). It does the following: - Reduces from large to medium font - Reduces the width of navigation menu - Decreases spacing between the section name (Kubernetes / Preferences) and menu items to match similarly to how it was before with large font. ### Screenshot / video of UI <!-- If this PR is changing UI, please include screenshots or screencasts showing the difference --> ### What issues does this PR fix or reference? <!-- Include any related issues from Podman Desktop repository (or from another issue tracker). --> Closes containers#9299 ### How to test this PR? <!-- Please explain steps to verify the functionality, do not forget to provide unit/component tests --> N/A, minor UI change Signed-off-by: Charlie Drage <[email protected]>
cdrage
force-pushed
the
smaller-submenu
branch
from
6485b1e
to
29679e0
Compare
chore: reduce width and font size subnavigation
What does this PR do?
Reduces the width and font size of the subnavigation for Kubernetes and
settings menus (and other components using the UI).
It does the following:
and menu items to match similarly to how it was before with large
font.
Screenshot / video of UI
Before:
After:
What issues does this PR fix or reference?
Closes #9299
How to test this PR?
N/A, minor UI change
Signed-off-by: Charlie Drage [email protected]