fix: avoid header bar components overflowing out of the header bar

[dbjorge]

Description of changes

This PR fixes an issue caught during v2.11.0 release validation introduced in #1606 where if you resize the details view down to the minimum window size allowed by Chrome (500px) at default zoom levels, the settings gear icon overflows out of the header bar:

@varshannagarajan 's outstanding PR #1693 fixes a variant of this issue for the switcher dialog at high zoom/text spacing levels. This PR takes the same idea as #1693 but expands it to the entire header bar (it therefore obsoletes #1693)

• It runs the entire header bar into a flexbox
• It enables text-overflow behavior on the extension title, so it will shrink before functional elements do
• It adjusts styling slightly such that everything fits at default zoom level + Chrome's default minimum window size (500px)

Since this essentially amounted to a rewrite of the relevant styling, I took it as an opportunity to pull it out of the big shared scss files and into modules. This involved a little gymnastics for some of the office fabric style overrides that previously relied on being within a #details-container selector to achieve the necessary specificity.

To enable re-use of the new modularized styles in guidance pages, this also extracts out the common parts of the header to a new common Header component for the guidance content page to reuse. This happened to be the first point where the guidance content pages required css module styles, so I also added the necessary reference from insights.html to bundle/insights.css.

The most questionable bit of CSS is the use of margin-left: auto on the settings icon styling to get it to functionally float right inside the flexbox; I thought using this was a little more pleasant to reason about than the alternative of using nested flexboxes in the same direction, but was a bit on the fence about which technique to use.

Screenshots:

details view, 500px 100% zoom

details view, 500px 100% zoom, text-spacing bookmarklet

details view, 1280px, 100% zoom

details view, 1280px 400% zoom

fastpass report, 500px 100% zoom

assessment report, 500px 100% zoom

Pull request checklist

• [n/a] Addresses an existing issue: #0000
• Ran yarn fastpass
• Added/updated relevant unit test(s) (and ran yarn test)
• Verified code coverage for the changes made. Check coverage report at: <rootDir>/test-results/unit/coverage
• PR title AND final merge commit title both start with a semantic tag (fix:, chore:, feat(feature-name):, refactor:). Check workflow guide at: <rootDir>/docs/workflow.md
• (UI changes only) Added screenshots/GIFs to description above
• (UI changes only) Verified usability with NVDA/JAWS

[waabid]

(As mentioned offline) this has a css-module issue resulting in styling not being applied correctly to the popup:

Outside of this, LGTM (minor comments).