Wiki use panel based breakpoints for panel based UI

Janis Altherrrequested to merge
janis/wiki-align-breakpoints into master

What does this MR do and why?

This MR enables wiki to use PanelBreakpointInstance instead of GlPanelBreakpointInstance from gitlab-ui. The latter returns the breakpoint based on the viewport width, whereas the former returns the breakpoint based on the size of the main panel container.

This solves a mismatch between the CSS-based styling of the wiki sidebar and the JS-based toggle of the sidebar's visibility. At screen sizes between 1200px and 1272px this unintentionally toggled the sidebar to be visible.

References

Screenshots or screen recordings

Before After
Screenshot_2025-10-22_at_11.28.51 Screenshot_2025-10-22_at_11.29.11

How to set up and validate locally

  1. Enable the new UI (Enable FF Feature.enable(:paneled_view) and toggle the "New UI" switch in User menu)
  2. Un-collapse the super sidebar
  3. Resize your browser window to a width between 1200px and 1272px.
  4. Open or create a wiki.
  5. Notice how the sidebar is now by default collapsed. (compare with the master branch)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports