fix: warning message bar text overflow/overlap (#6416)

#### Details

Fixes #6406.

##### Motivation

Bug fix.

##### Context

min-height on the message bar component is behaving weirdly: setting the
minimum to 32px should not yield the behavior we are seeing but it does.
Hence, I wrote that for the overwrite. While "unset" also works here, I
used fit-content because it also works and is more appropriate for the
desired behavior. But ... 32px being the **min**-height should have also
been appropriate for the desired behavior. 🤷

Before:

![image](https://user-images.githubusercontent.com/32555133/217665106-25a54e6a-d27b-4a24-89ff-66b6cb8e7c72.png)

After:

![image](https://user-images.githubusercontent.com/32555133/217665169-344f878c-a9b4-4347-84d1-3a5cb855ab2b.png)

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [x] (UI changes only) Added screenshots/GIFs to description above
- [ ] (UI changes only) Verified usability with NVDA/JAWS

Author: waabid

src/DetailsView/components/common-message-bar-styles.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+.message-bar-height-override {
+    // min-height is set to 32px in MessageBar which behaves oddly and causes #6406.
+    min-height: fit-content;
+}

src/DetailsView/components/injection-failed-warning.tsx

@@ -7,6 +7,8 @@ import {
     InjectingState,
     VisualizationStoreData,
 } from 'common/types/store-data/visualization-store-data';
+
+import commonStyles from 'DetailsView/components/common-message-bar-styles.scss';
 import * as React from 'react';
 
 export const InjectionFailedWarningContainerAutomationId = 'injection-failed-warning-container';
@@ -22,7 +24,11 @@ export const InjectionFailedWarning = NamedFC<InjectionFailedWarningProps>(
             return null;
         } else {
             return (
-                <MessageBar key="injection-failed" messageBarType={MessageBarType.warning}>
+                <MessageBar
+                    className={commonStyles.messageBarHeightOverride}
+                    key="injection-failed"
+                    messageBarType={MessageBarType.warning}
+                >
                     <div data-automation-id={InjectionFailedWarningContainerAutomationId}>
                         {DisplayableStrings.injectionFailed}
                     </div>

src/DetailsView/components/scan-incomplete-warning.tsx

@@ -3,6 +3,7 @@
 import { MessageBar, MessageBarType } from '@fluentui/react';
 import { ScanIncompleteWarningId } from 'common/types/store-data/scan-incomplete-warnings';
 import { VisualizationType } from 'common/types/visualization-type';
+import commonStyles from 'DetailsView/components/common-message-bar-styles.scss';
 import {
     ScanIncompleteWarningMessageBarDeps,
     WarningConfiguration,
@@ -32,7 +33,11 @@ export class ScanIncompleteWarning extends React.PureComponent<ScanIncompleteWar
             }
 
             const message = (
-                <MessageBar key={warningId} messageBarType={MessageBarType.warning}>
+                <MessageBar
+                    className={commonStyles.messageBarHeightOverride}
+                    key={warningId}
+                    messageBarType={MessageBarType.warning}
+                >
                     {render(this.props)}
                 </MessageBar>
             );

src/DetailsView/components/target-page-hidden-bar.tsx

@@ -2,6 +2,8 @@
 // Licensed under the MIT License.
 import { MessageBar, MessageBarType } from '@fluentui/react';
 import { NamedFC } from 'common/react/named-fc';
+
+import commonStyles from 'DetailsView/components/common-message-bar-styles.scss';
 import * as React from 'react';
 
 export type TargetPageHiddenBarProps = {
@@ -16,7 +18,10 @@ export const TargetPageHiddenBar = NamedFC<TargetPageHiddenBarProps>(
         }
 
         return (
-            <MessageBar messageBarType={MessageBarType.warning}>
+            <MessageBar
+                className={commonStyles.messageBarHeightOverride}
+                messageBarType={MessageBarType.warning}
+            >
                 The Target page is in a hidden state. For better performance, use the Target page
                 link above to make the page visible.
             </MessageBar>

src/tests/unit/tests/DetailsView/components/__snapshots__/injection-failed-warning.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`InjectionFailedWarning render with injection failed 1`] = `
 <StyledMessageBar
+  className="messageBarHeightOverride"
   messageBarType={5}
 >
   <div

src/tests/unit/tests/DetailsView/components/__snapshots__/scan-incomplete-warning.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`ScanIncompleteWarning notRendered: where no warnings were provided 1`]
 exports[`ScanIncompleteWarning rendered: where warnings were provided 1`] = `
 <React.Fragment>
   <StyledMessageBar
+    className="messageBarHeightOverride"
     messageBarType={5}
   />
 </React.Fragment>
@@ -13,6 +14,7 @@ exports[`ScanIncompleteWarning rendered: where warnings were provided 1`] = `
 exports[`ScanIncompleteWarning rendered: where warnings were provided, with one warning not supported 1`] = `
 <React.Fragment>
   <StyledMessageBar
+    className="messageBarHeightOverride"
     messageBarType={5}
   />
 </React.Fragment>

src/tests/unit/tests/DetailsView/components/__snapshots__/target-page-hidden-bar.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TargetPageHiddenBar renders per snapshot to indicate that the target page is hidden 1`] = `
-"<StyledMessageBar messageBarType={5}>
+"<StyledMessageBar className="messageBarHeightOverride" messageBarType={5}>
   The Target page is in a hidden state. For better performance, use the Target page link above to make the page visible.
 </StyledMessageBar>"
 `;