Introduce container queries

What does this MR do and why?

Introduce container queries

This is the very first iteration for introducing container queries based layouts within the product. The long-term purpose behind this change is for us to be able to move some pages' contents within side-by-side panels in a single page, which implies that the responsiveness should be implemented relative to the container panel rather than the whole viewport.

At first, we'll be migrating individual pages to container queries by using some sort of "fallback container": the existing .content-wrapper element. This lets us reproduce a behavior that's similar to existing media queries layouts, with the added benefit that we take the actual available space into account (eg we better react to sidebars being expanded).

The idea here is to migrate all existing page to container queries without fundamentally changing the layout. Once our pages all support container queries, we should be able to switch to the panels layout without too much hassle.

How does this work exactly?

The idea is to iteratively migrate individual pages to container queries. We want to avoid breaking existing page with far reaching changes, so we'll leverage a flag that can be turned on in the page we are migrating. When said flag is enabled, the page content becomes a container against which container queries can be written.

The migration primarily entails migrating responsive Tailwind utils from the media queries syntax to the container queries syntax (eg <breakpoint>:<util> becomes @<breakpoint>:<util>). Other changes might be necessary like rewriting custom styles, or Javascripts that might be checking breakpoint changes, or even migrating GitLab UI components.

As a proof of concept, this MR migrates the new personal homepage app to container queries.

References

• https://gitlab.com/gitlab-org/gitlab/-/issues/554575+

Screenshots or screen recordings

How to set up and validate locally

1. Run yarn as the Tailwind Container Queries plugin needs to be installed.

2. For now, only the new personal homepage has been migrated to container queries to demonstrate how we'll go about subsequent migrations. So, you'll need to enable it by:

   1. Enabling the personal_homepage feature flag: https://gdk.test:3443/rails/features/personal_homepage.
   2. Enabling the Personal homepage option in your user preferences' Homepage setting: https://gdk.test:3443/-/profile/preferences.

3. Navigate to the homepage.

4. To see how this would react to a panel being displayed to the right of the main page content, run the following script in the browser console:

   const content = document.querySelector(".content-wrapper");
   const contentParent = content.parentElement;
   
   const panelsContainer = document.createElement("div");
   panelsContainer.style.display = "flex";
   
   const mockPanel = document.createElement("div");
   mockPanel.style.width = "800px";
   mockPanel.style.backgroundColor = "#28272d";
   
   contentParent.appendChild(panelsContainer);
   panelsContainer.appendChild(content);
   panelsContainer.appendChild(mockPanel);

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.