Fix dropdown cutoff issue for long text in mobile view (#7035) #7039
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
not fan of the new behavior. I thinks making a breakline when text is too long should be better than scrool |
|
|
Why is the Vercel deployment failing (server error)on other page except home |
That is incompatible because you made changes on a server-side component by adding client-side specific APIs. (useRef, useEffect) I'd suggest on finding alternatives without using client-side-specific APIs. |
| @@ -66,13 +68,32 @@ const Select: FC<SelectProps> = ({ | |||
| return mappedValues; | |||
| }, [values]); | |||
|
|
|||
| useEffect(() => { | |||
There was a problem hiding this comment.
This sounds like a very inefficient way of solving an issue that could be solved only with CSS.
| .textWrap { | ||
| text-wrap: wrap !important ; | ||
| } |
There was a problem hiding this comment.
Thank you for your contribution 🙇
As Claudio stated, I also think we should solve these problems in CSS
We use Tailwind classes to style CSS files;
https://github.com/nodejs/nodejs.org/blob/main/COLLABORATOR_GUIDE.md#example-of-a-css-module
In addition, we are careful not to define important properties and classes unless necessary.
You can make an example arrangement like this;
.inline {
... some code
.text span > span {
@apply max-w-fit
text-wrap;
}
}
|
Thanks for your efforts here. I'm going to close this in favour of #7046 which has now landed. |
Description
Fixes #7035
This pull request resolves the issue where the dropdown menu was being cut off when displaying long text on mobile devices. The changes implemented include:
Before and After Videos
Validation
To verify that the issue has been resolved:
Checklist
npm run formatto ensure the code follows the style guide.npm run testto confirm that all tests pass.npx turbo buildto verify that the website builds without errors.