Add DetailLayout component to work items detail page

What does this MR do and why?

Background

!231646 (closed) explored adding DetailLayout Vue and ::Layouts::DetailLayout View components. It identified:

1. Layouts should be responsible for basic loading state and supporting <template #loading> slot for individual implementations to render <gl-skeleton-loader> as they set fit. The loading prop ensures consistent use of <gl-loading-icon> size and margin.
2. CSS styles duplicated between layout components could diverge over time and require manual work to keep in-sync. Using layout classes (like component classes in GitLab UI) allows us to keep styles consistent between Vue and View implementations.
3. A #before slot is required to render items in layouts before <page-heading>.
4. Some views require more complex implementations of a page heading. Wrapping <h1> in page heading component with <slot name="heading-wrapper"> allows complex implementations to override the <h1> with multiple element etc. This occurs in work item detail which renders multiple components.

Changes

• Add DetailLayout component to work items detail page

Iterations

1. !233013 (merged) Add loading prop to IndexLayout components/Move styles to layout stylesheets
2. !233015 (merged) Detail layout Vue/View components
3. !233016 (merged) Add detail layout to alerts detail page
4. !233018 (merged) (Draft) Add detail layout to work item detail page (coordinate with plan) 👈 you are here
5. Base layout component??? (stretch goal) #597890 (closed)

References

• gitlab-org#19509
• gitlab-org#19990
• gitlab-org/gitlab-services/design.gitlab.com#3187
• #596902 (closed)
• #596903 (closed)

Screenshots or screen recordings

Scenario	Before	After
work item
Work item opened from index page
Child item open in side panel
Related item open in side panel
Related task open in modal from an incident (NOTE: this is broken on prod, see #599179)

A comparison of work item detail layouts at different container widths:

Size	Before	After
xs (<576px)
sm (>=576px)
md (>=768px)
lg (>=992px)
xl (>=1200px)

How to set up and validate locally

• View work item detail in work item index page with dynamic panel http://gdk.test:3000/groups/gitlab-org/-/work_items?show=eyJpaWQiOiI0MyIsImZ1bGxfcGF0aCI6ImdpdGxhYi1vcmcvZ2l0bGFiLXRlc3QiLCJpZCI6NjE5fQ%3D%3D
• View work item detail page standalone http://gdk.test:3000/groups/gitlab-org/-/work_items/1
• View work item detail page with sibling work item in dynamic panel http://gdk.test:3000/groups/gitlab-org/-/work_items/1?show=eyJpaWQiOiI0MiIsImZ1bGxfcGF0aCI6ImdpdGxhYi1vcmcvZ2l0bGFiLXRlc3QiLCJpZCI6NjE4fQ%3D%3D

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.