User Moin reported a UX issue where navigation links at the top of the “about” page are cut off or hidden depending on the translation length, forcing users to guess the existence of a horizontal scroll. Moin provided examples showing English links are fully visible, while Spanish and German translations result in cut text. Moin asked if this could be improved during the redesign. tobiaseigen acknowledged the issue and suggested potentially allowing menu items to flow onto multiple lines instead of using horizontal scrolling. Moin countered that a scrollable area, similar to profile preferences, might be better to avoid enlarging the window, though noted the difficulty users have in noticing such scroll indicators. chapoi explained that these static pages are rendered differently than Ember components, making it impossible to wrap them in the same component used elsewhere. As a solution, chapoi implemented a scrollable area and tightened spacing to maximize fit, describing it as the most realistic fix. This change was committed in PR #38059.
Depending on the lenght of the words used in translation not all links on the top of the about-page are visible. You then need to scroll to the side. That is quite difficult to guess, if no word is cut.
Example screenshot English - everything visible
Example screenshot Spanish - word is cut
Example screenshots German - it’s difficult to notice there is another link
Any chance this can be improved as part of the redesign?
Thanks for raising this issue. I don’t know what the solution is here. @awesomerobot do you have any thoughts? Maybe we don’t have horizontal scroll but instead let the menu items flow onto multiple lines if they are wider than the browser window?
Maybe you could at least use a scrollable area, like in the profile preferences, to prevent the window size from being enlarged.
Though that also causes difficulties, because it can sometimes be hard to notice that you can scroll there. But there is already a topic about that:
Those static pages are rendered in a different way (not ember components) so not possible to wrap it in the same component.
I’ve added scroll and tightened up the spacing so there’s more chance it will all fit.
https://github.com/discourse/discourse/pull/38059
That’s the most realistic solution.
This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.
