Bug: Vault dash filter UI overflows on laptop screens

[murderteeth]

• 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:

[udhaykumarbala]

Hi @murderteeth, can i work on it

[murderteeth]

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.

[udhaykumarbala]

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

1. truncate with dots like showing "vaults, v2,..."
2. 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

[murderteeth]

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 =)

[udhaykumarbala]

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

[murderteeth]

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 https://github.com/yearn/seafood/issues/169, have a look ;)

[udhaykumarbala]

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?

[udhaykumarbala]

170

[murderteeth]

Good question about mobile @udhaykumarbala! See my pr review comment.