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(ui): Adjust sizing of page filter components to prevent overflow in more cases #41979
Conversation
@@ -37,7 +37,7 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>` | |||
} | |||
|
|||
& > * { | |||
min-width: 6rem; | |||
min-width: 7rem; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Increasing this to 7rem ensures that 24h
and other 3 character time range selections don't overflow
a02fdc4
to
2f85e92
Compare
@@ -80,7 +80,7 @@ type Props = { | |||
|
|||
function ProjectPageFilter({ | |||
specificProjectSlugs, | |||
maxTitleLength = 30, | |||
maxTitleLength = 25, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Decreased this from 30 to 25 because it was taking up too much of the maximum 30rem
width allowed by the page filter bar.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code looks fine. Will let @vuluongj20 take this one
…t where overflow occurred
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Fixes #41932
Before:
After: