Apply the layout width preference without a reload

What does this MR do and why?

Fixes the Layout width preference not applying until the next full page load.

The save handler in profile_preferences.vue read this.selectedLayout, which is not defined anywhere, so updateClasses never received the chosen layout. Selecting Fluid and saving left the page at fixed width until it was reloaded. The handler now reads the layout from the form like the color mode, theme and color scheme.

Found while working on !257460 (merged); split out so it can merge on its own.

Stacked merge requests

This is part 1 of 5 of the user preferences page tabs series. The MRs are stacked and merge in order; each one is complete on its own.

# MR Scope
1 !257856 (merged) Fix: apply the layout width preference without a reload
2 !257857 (merged) Shared inputs: heading_classes for SettingsSectionComponent, labelDescription for ListboxInput
3 !257858 (merged) Refactor: extract the Integrations section into its own Vue app
4 !257460 (merged) Feature: reorganize the preferences page into tabs, behind the preferences_tabs flag
5 !257859 Feature (EE): move GitLab Duo and Orbit preferences into an AI assistance tab

Series split from the original single MR after review feedback in !257460 (merged).

How to set up and validate locally

  1. Visit http://127.0.0.1:3000/-/profile/preferences.
  2. Under Layout width, select Fluid and select Save changes.
  3. Without reloading, the page content should span the full width. Select Fixed and save; it should return to 1280 px.

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 Simon Kim

Merge request reports

Loading
Loading