Avatar

Width restriction of the main page in mobile view, RFC (Design/Themes)

by Auge ⌂, (95 days ago)

Hello

Part of the release of the latest version 20240827.1 was a big overhaul of the forums user interface (UI). This was done to introduce support the UI and posting content in right to left written languages. Additionally a second goal was to enhance the forum UI in mobile browsers on smaller and mostly narrower displays. During the changes the main views was restrutured as a grid, which is a modern styling technique. Doing this I introduced a small but annoying misbehaviour in the main views.

Beginning with version 20220529.1 the sidebars was displayed above (or below in case of the table view) the thread list. The sidebar and (in case of the threaded view) the thread list took into account the real width of the viewport. With the changes in 20240827.1 the thread list took the width it needed, which prompted the sidebar to do the same. I opened a Github issue after spotting this.

[image]

This is a screenshot, made in the developer view of Firefox (testing browser sizes) but, at least on an iOS device it looks similar.

Meanwhile I performed a few tests. IMHO there are two ways to solve the issue.

1. Restrict the width of the sidebar. That would improve the first impression enormously. The thread list would continue to take up more space if necessary, which may require horizontal scrolling.
2. Restrict the width of the whole page. Also this looks much better. Also the thread list would take into account the viewport width. However, the thread list entries would now wrap to the next line if necessary. This is the same behaviour as in the versions between 20220529.1 and 20240729.1.

Screenshots of both attempts can be seen in a comment in the Github issue.

Now to my request for comments (RFC). I for myself would prefer the second solution. It looks much more compact and I see the whole subject, author and metadata of a thread posting without the need to scroll horizontally. What do you think? What looks for you to be the better solution and why is your preferred solution better than the other? Do you have any further ideas to solve it in another way?

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!


Complete thread:

 RSS Feed of thread