Bug: Vault dash filter UI overflows on laptop screens
Opened this issue · 9 comments
- For laptop screens (~1440 pixels wide), filter UI on the vault dash overflows as you toggle more settings.
- Also shrinks text filter to the point of being unusable
tasks
Update the toolbar to use fixed widths for its different components and use ellipsis to truncate text overflow. Here's a template:
Hi @murderteeth, can i work on it
Hello @udhaykumarbala, instead of fixing this specific overflow problem, we may redesign the toolbar a bit. It will be at least several days, but I'll post a new spec here and AT you. If you have ideas on that, feel free. I'm also going to post a couple more issues tomorrow or day after that might interest you.
Hello @udhaykumarbala, instead of fixing this specific overflow problem, we may redesign the toolbar a bit. It will be at least several days, but I'll post a new spec here and AT you. If you have ideas on that, feel free. I'm also going to post a couple more issues tomorrow or day after that might interest you.
For this issue, i thought of two ideas
- truncate with dots like showing "vaults, v2,..."
- just show the filter icon, since the state is already shown on click
just thoughts🙈, feel free to ignore.
Happy to work on more issues, Thanks for your kind guidance
Your welcome and thank you for contributing @udhaykumarbala! Can you explain your idea #2 a little more?
Truncating with dots (ellipsis) has proved tricky actually, because the filters are laid out with relative width as I recall. Or anyway, I couldn't get it to work in a sane way when I tried! That's one of the reasons for a slight re-design.. the current design makes it hard to do things like adding ellipsis to truncate labels =)
Your welcome and thank you for contributing @udhaykumarbala! Can you explain your idea #2 a little more?
Truncating with dots (ellipsis) has proved tricky actually, because the filters are laid out with relative width as I recall. Or anyway, I couldn't get it to work in a sane way when I tried! That's one of the reasons for a slight re-design.. the current design makes it hard to do things like adding ellipsis to truncate labels =)
Agreed
Hiya @udhaykumarbala, I just updated this issue with a suggestion on how to implement, let me know what you think. No major re-design for now.
I also just posted #169, have a look ;)
Hi @murderteeth, I added the ellipsis to the filter chip label. It seems to fix the problem without setting the width
Do I still need to add width?
and in the mobile, also the vault and network overflow out of the screen sometimes
Can we add an ellipsis to all screen sizes?
Good question about mobile @udhaykumarbala! See my pr review comment.