Correct height of work item attributes wrapper on mobile views

What does this MR do and why?

The work item attributes wrapper has two distinct modes:

1. below md: it is just a block-level item in the single-column mobile view of the work item
2. above md: it is a sidebar, and it is independently scrollable. This is achieved by making it sticky, giving it a top offset, and giving it a max height so that it will stick to the desired top value then be a scrollable container for its contents

This is currently broken in a few ways:

1. a mix of viewport queries and container queries are in use, meaning that there is a narrow range where the viewport is larger than md but the container is still sm, this leads to unexpected outcomes in this range
2. The calculations made to make the work item attributes wrapper have the correct height when md or larger do not work in paneled view

This leads to problems like the work item attribute wrapper being artificially shortened while in the single-column mobile view when the viewport is 768px wide or larger but the panel is still <768px wide, and the bottom of the work item attributes panel being inaccessible (can't scroll it into view) in the paneled view when everything is md or wider.

This MR addresses these in a few ways:

1. Convert the local container-and-media mixin used in work item styles to use the pajamas gl-container-width-down and gl-container-width-up mixins
2. Add an override in the application-chrome style file to get a correct top and height calculation for use in the new paneled UI

References

• https://gitlab.com/gitlab-org/gitlab/-/issues/567702#note_2785967776

Screenshots or screen recordings

Scenario	UI version	Before	After
Viewport and container are both sm	New
Viewport and container are both sm	Old
Viewport is in the md range but container is still sm	New
Viewport is in the md range but container is still sm	Old
Viewport and container are both md or larger	New
Viewport and container are both md or larger	Old

How to set up and validate locally

1. Visit a work item
2. Set the viewport to 600px to test the scenario where both the viewport and the container are in the sm range
3. Set the viewport to 768px to test the scenario where the viewport is md but the container is still sm
4. Set the viewport to 850px to ensure both the viewport and the container are md or wider

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.