-
-
Notifications
You must be signed in to change notification settings - Fork 8.4k
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
Top nav could be pushed to the next row in some screen width #3820
Comments
Yes this is an issue we should figure out. The simplest solution for now is to reduce the number of navbar items 😅 (or label lengths, we mostly have the issue due to the "unreleased" label)
Any JS-based solution would produce flickering on page load, as the layout will update just after React hydration, which wouldn't be a good UX |
Hi @tomchen, after the latest CSS tweaks the React Native website should now look like this on your device: Please confirm that the overflow issue has been fixed for you and remember to reset the local cache (Ctrl+Shift+R). 🙂 |
@slorber Actually a JS-based solution should work with CSS, it would fix the problem only when there is a problem: the vast majority of the users with a non tablet screen would be unaffected, the tablet users who have the problem, would indeed see the flickering before seeing the correct page, but "flickering then seeing the correct page" is better than showing the ugly misplaced top nav menu. And it's SPA, users only see the flickering once at the beginning, not once "every page". The solution could be something like: Docusaurus can also leave a threshold width variable or something in config file that's strongly recommended to be set by Docusaurus user. Yes, this is always better and reliable than the JS solution. The flickering runtime JS solution is just a fail-safe. |
🐛 Bug Report
If the top nav bar has too many items / too much text, it could be pushed to the next row on tablet / old desktop screen that is around 1024px wide, which is wider than the threshold the top nav bar is shrunk into a hamburger button.
Have you read the Contributing Guidelines on issues?
Yes
Real-life Demo
Width: 1024px
https://v2.docusaurus.io/docs/
https://reactnative.dev/docs/getting-started
https://react-redux.js.org/introduction/quick-start
https://redux.js.org/introduction/getting-started
(Good for Redux, it looks like they fixed it. However, there is a minor problem: the viewport is not fit and is wider than the screen, showing the horizontal scrollbar)
Comment
Maybe get the the top bar's real width after it is loaded, then make some calculation and change the threshold screen width the top nav is shrunk?
Your Environment
The text was updated successfully, but these errors were encountered: