Adjustments to Wiki experience

Sascha Eggenbergerrequested to merge
feature/wiki-sidebar-width-css-variable into master

What does this MR do and why?

Addresses some user feedback and fixes some visual bugs on top of that:

  • Make the layout wider for fluid, updates a content max-width from 992px → 1600px
  • Makes the content for the fixed layout wider 768px → 940px
  • Fixes the sticky header
  • Moves Wiki sidebar to be a CSS variable so we can control the layout correctly
  • Fixes the padding inside of the panel

References

There is no associated issue. This is a standalone, follow-up layout improvement.

Screenshots or screen recordings

Before After
Fluid layout
before_fixed after_2400.png
before_fixed_scrolled after_2400_scolled.png
before_fixed_no-sidebar after_2400_no-sidebar.png
before_fixed_no-sidebar_scrolled after_fluid_2400_no-sidebar
Fixed layout
before_2400_fixed.png after_2400_fixed.png
before_2400_fixed_scrolled.png after_2400_fixed_scrolled.png
before_2400_fixed_no-sidebar.png after_2400_fixed_no-sidebar.png
before_2400_fixed_no-sidebar_scrolled.png after_2400_fixed_scrolled_no-sidebar

Screenshots will be added since this is a UI change.

How to set up and validate locally

  1. Visit any project or group wiki page in the GDK, e.g. https://gdk.test:3000/gitlab-duo/test/-/wikis/home
  2. Resize the sidebar by dragging its handle and confirm the content and sticky header reflow with it.
  3. Collapse and expand the sidebar and confirm the sticky header offset updates.
  4. Reload the page and confirm the resized width persists.
  5. Change the user preference from fixed to fluid, test again

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.

Edited by Sascha Eggenberger

Merge request reports