Wiki edit mode layout issues - missing horizontal whitespace

Summary

When the layout mode is set to 'fixed' or 'fluid' in wiki edit mode, there are layout and spacing issues that need to be addressed:

  1. Missing padding on form: The edit form lacks padding when it reaches the width limit, causing content to extend edge-to-edge
  2. Sidebar icon conflicts: When the feature flag wikiFloatingSidebarToggle is enabled, the floating sidebar toggle icon conflicts with the edit form

The fix needs to be tested in both layout modes.

Current Behavior

  • The form has no padding at maximum width
  • The floating sidebar toggle icon (when FF is on) overlaps or conflicts with the form content
  • When the FF is off, the sidebar icon doesn't appear in edit mode at all (unlike view mode)

Screenshot_2026-02-10_at_14.14.38

Screenshot_2026-02-10_at_14.14.04

Screenshot_2026-02-10_at_13.58.46

How to reproduce

To switch to the fluid layout, visit http://gdk.test:3000/-/profile/preferences and find the section Layout width and switch from Fixed to Fluid:

Screenshot_2026-02-10_at_14.12.51

Then go to any wiki page and edit id, e.g. http://gdk.test:3000/gitlab-duo/test/-/wikis/home?edit=true

Design Considerations (TBD)

The sidebar icon is useful for toggling sidebar visibility while editing wiki content. However, we need to decide on the best approach:

Option 1: Keep the icon and add top padding

  • Ensures the icon is always positioned above the form
  • May require additional spacing adjustments

Option 2: Keep the icon and add left padding

  • May not work well on mobile devices
  • Could reduce available form width

Option 3: Hide the icon in edit mode

  • Simplifies the layout but removes useful functionality

Related Issues

Edited by Vanessa Otto