Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: tags input not taking advantage of available width #1055

Merged
merged 5 commits into from
Dec 18, 2023

Conversation

brandonreid
Copy link
Contributor

The tags input required a fixed width to really take advantage of the +n overflow display. This made it so the input was unusually long on the dashboard or never read out the selected tags:

image

This PR makes it so that the tags list has an inline option and will allow the input to scale with the content.

Screen.Recording.2023-12-14.at.3.24.42.PM.mov
Screen.Recording.2023-12-14.at.3.27.11.PM.mov

Copy link

netlify bot commented Dec 14, 2023

Deploy Preview for prefect-design ready!

Name Link
🔨 Latest commit 2897328
🔍 Latest deploy log https://app.netlify.com/sites/prefect-design/deploys/6580aec7c6fc250008dd77ee
😎 Deploy Preview https://deploy-preview-1055--prefect-design.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.


const containerBoundingBox = container.value!.getBoundingClientRect()
const calculateOverflow = (): void => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did a little cleanup in this function but not a full refactor.

@pleek91
Copy link
Collaborator

pleek91 commented Dec 14, 2023

Overall code looks fine to me. But when I viewed the demo it seemed like it wasn't working correctly in the tags demo
image

@pleek91
Copy link
Collaborator

pleek91 commented Dec 18, 2023

@brandonreid this seems to be working much better. One thing I found while testing in the demo though is if you shrink the inline one down and then expand it it won't always expand to show all the tags. Most reproducible when expanding more slowely.

image

Copy link
Collaborator

@pleek91 pleek91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working good for me!

src/components/TagWrapper/PTagWrapper.vue Outdated Show resolved Hide resolved
demo/sections/components/Tags.vue Outdated Show resolved Hide resolved
@brandonreid brandonreid merged commit b98be7e into main Dec 18, 2023
5 checks passed
@brandonreid brandonreid deleted the fix/tags-input-display branch December 18, 2023 20:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants