New sidebar design on tablets

Contribute UX
,

AI-generated summary

The discussion revolves around the new sidebar design on tablets, highlighting usability issues. Moin notes that tablets currently receive a confusing mix of desktop and touch device styling, with admin sidebar headings being hard to distinguish due to the lack of visual separation. This issue is specific to tablet-sized screens in desktop mode, where neither lines nor gaps are present, unlike in mobile or desktop views. Jagster supports this concern, seeking ways to improve heading readability on iPads. Moin shares a CSS workaround to add dividers in the sidebar. Sidi_Codet mistakenly tags Lilly, who clarifies the error. chapoi confirms the issue and announces a fix, referencing a GitHub pull request to add dividers on tablets as originally intended.

1

Continuing the discussion from New sidebar experiment (Sidebar Feng Shui):

I have the impression tablets now get a inconvenient mix of desktop mode and touch device styling. While the design experiment added those lines on my tablet, the version merged into core does not.

Especially in the admin sidebar, the headings are difficult to recognise, as they simply get lost in the list. It works fine on desktop devices without touch, where the lines are shown, and on mobile with the gaps, but the version for touch devices in desktop mode has no lines and no gaps.

Mobile:

Screenshot_20241009_232117_Firefox
Screenshot_20241009_232117_Firefox490×1086 62.5 KB

Desktop:

image
image271×810 9.3 KB

Tablet:

Screenshot_20241009_231407_Firefox
Screenshot_20241009_231407_Firefox441×1086 67.1 KB

10 Likes
2

Hear hear… I came today asking how can I make headings more readable on iPad.

2 Likes
3

I added

.sidebar-section-wrapper {
    padding-block: .35rem;
    border-bottom: 1px solid var(--secondary-very-high);
}

to the desktop css section of my theme

3 Likes
4

@Lilly , was certainly impressed with the Desktop Version , Welldone!

5

why are you mentioning me? what are you even talking about?

3 Likes
6

lol, that was a mistake Lilly, the mention wasn’t for you but for @Moin , sorry!

10

Thanks for the report.

I’ve added the divider on tablets too, as was the original intention.

https://github.com/discourse/discourse/pull/29248

3 Likes
12

This topic was automatically closed after 4 days. New replies are no longer allowed.