Open
Conversation
|
@reillylm is attempting to deploy a commit to the Meshtastic Team on Vercel. A member of the Team first needs to authorize it. |
|
|
|
|
reillylm
force-pushed
the
fix/make-sidebar-scrollable
branch
from
3df09d8 to
ba3df41
Compare
2 tasks
Collaborator
|
Can you merge/rebase main into your branch? It should fix the PR issues here. |
Currently, if our viewport is too short, the overflow on the Sidebar gets cut off and we can't see the buttons at the bottom: Let's wrap this content in a `ScrollArea` so we can still see all the buttons on smaller viewports. We were previously using `ScrollArea` in the Nodes and Map pages, when filtering for devices by Role or Hardware. This keeps the logo on top and makes just the buttons scrollable. Previously, we had given the page-specific buttons (e.g. the channel list on the Messages page) `min-h-0`, I'm guessing with the intent of shrinking them if there's too many (like a flex-shrink situation), but that property wasn't having an effect. Even if it had worked, hiding the page-specific buttons seems undesirable (e.g. when you're on the Settings page, you wouldn't be able to see the "Configuration" buttons). Also, our viewport could still be too short to fit the other buttons, so scrolling would still ultimately be needed. Previously, we were hiding the `DeviceInfoPanel` buttons (`theme` / `commandMenu` / `language`) with `invisible` when the Sidebar is collapsed. However, `invisible` [makes the elements still take up space][1] (the `h-0` wasn't having an effect in that regard), which was making the Radix ScrollArea think it had scrollable content in those spots. Instead, let's hide with `hidden`. [1]: https://tailwindcss.com/docs/visibility#making-elements-invisible
reillylm
force-pushed
the
fix/make-sidebar-scrollable
branch
from
ba3df41 to
5d5525b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Currently, if our viewport is too short, the overflow on the Sidebar gets cut off and we can't see the buttons at the bottom:
Let's wrap this content in a
ScrollAreaso we can still see all the buttons on smaller viewports. We were previously usingScrollAreain the Nodes and Map pages, when filtering for devices by Role or Hardware.This keeps the logo on top and makes just the buttons scrollable.
meshtasticScroll2.mov
Previously, we had given the page-specific buttons (e.g. the channel list on the Messages page)
min-h-0, I'm guessing with the intent of shrinking them if there's too many (like a flex-shrink situation), but that property wasn't having an effect. Even if it had worked, hiding the page-specific buttons seems undesirable (e.g. when you're on the Settings page, you wouldn't be able to see the "Configuration" buttons). Also, our viewport could still be too short to fit the other buttons, so scrolling would still ultimately be needed.Previously, we were hiding the
DeviceInfoPanelbuttons (theme/commandMenu/language) withinvisiblewhen the Sidebar is collapsed. However,invisiblemakes the elements still take up space (theh-0wasn't having an effect in that regard), which was making the Radix ScrollArea think it had scrollable content in those spots. Instead, let's hide withhidden.