Header submenus theme component pushes bottom of sidebar out of the screen

Contribute UX

AI-generated summary

The Header Submenus theme component can cause the icons at the bottom of the sidebar to disappear from the screen due to a CSS calculation issue. RGJ notes that this is likely caused by the custom header height not being included in the calculation.

awesomerobot explains that the calculation only considers the height of the Discourse header and sets --header-offset accordingly. To include custom header content, it would require a more complex calculation, as custom headers don’t stick on scroll by default.

awesomerobot proposes a solution involving checking the custom header height, including it in --header-offset, and decrementing it based on scroll position. This solution has since been implemented in a GitHub pull request by david, which should resolve the issue with custom header content affecting the sidebar, chat, and other elements.

1

When the header submenus theme component is active, the icons at the bottom of the sidebar disappear from the screen.

https://cdn.screencast.com/uploads/g000302MBEXFEjy4eyPzZN1QY9lUH/LWR_Recording.mp4?sv=2021-08-06&st=2023-05-18T04%3A17%3A29Z&se=2023-05-19T04%3A17%3A29Z&sr=b&sp=r&sig=7%2B95Shu88XVl4t3jX%2BP9p8cxStR%2B2WKs4CSyK%2FzvaZc%3D

There is probably some kind of CSS calculation going the wrong way?

4 Likes
2

Custom headers aren’t included in the calculation at all, this can be repro’d by adding any content to the header section of a theme.

The calculation we use for the sidebar and chat takes into consideration the height of the Discourse header and sets --header-offset as a variable when calculating some heights.

Including custom headers might be a little tricky because custom header content doesn’t stick on scroll by default like the Discourse header does… so if we include it in the calculation by default, once you scroll and the custom header is gone, the height is then incorrect.

So for example, if I manually increase --header-offset by the height of my custom header (it’s roughly 60px by default), you get a gap above the sidebar on scroll:

We add a .docked class to the body once a custom header is scrolled out of view, so it’s possible to use this… which is better, but there’s a noticable transition as the sidebar height adjusts between states… this is becuase .docked is either on or off.

If you want a sticky header, this is a little easier to work around… because you can increase --header-offset by the height of the custom header, and then set .d-header-wrap’s top value as the height of the custom header:

One solution that comes to mind for improving the case of the non-sticky header is to:

  1. Check the height of the custom header
  2. Include the custom header height in --header-offset
  3. De-increment the custom header height used in the --header-offset calculation based on scroll position. This will more gradually adjust the sidebar height in a way that the .docked class can not.

Might take some experimentation to get it right…

5 Likes
3

That’s very helpful, thank you @awesomerobot

(moved this to Contribute > UX)

4 Likes
4

This has been implemented here (big thanks to @david):

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

This should solve sidebar, chat and some other issues with custom header content.

4 Likes
The component pushes down the chat, hiding partially the chat input