chore[react-devtools/ui]: fix strict mode badge styles (#30159)

## Summary

Just a minor UI fix to strict mode badge layout and component name text
overflow

## How did you test this change?
| Before | After |
| --- | --- |
| ![Screenshot 2024-06-30 at 23 35
19](https://github.com/facebook/react/assets/28902667/dbe62322-07f3-4291-808d-ecd2b0fba8cc)
| ![Screenshot 2024-06-30 at 23 31
06](https://github.com/facebook/react/assets/28902667/863b2f49-942f-4522-b815-5509a77b3b24)|

Author: hoxyq

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css

@@ -45,12 +45,13 @@
 .SelectedComponentName {
   flex: 1 1 auto;
   overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: normal;
+  display: flex;
+  padding: 0.25rem 0;
+  height: 100%;
+  align-items: flex-end;
 }
 
-.Component {
-  flex: 1 1 auto;
+.ComponentName {
   color: var(--color-component-name);
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
@@ -60,6 +61,10 @@
   max-width: 100%;
 }
 
+.StrictModeNonCompliantComponentName {
+  color: var(--color-console-error-icon);
+}
+
 .Loading {
   padding: 0.25rem;
   color: var(--color-dimmer);
@@ -68,6 +73,7 @@
 }
 
 .StrictModeNonCompliant {
-  margin-right: 0.25rem;
+  display: inline-flex;
+  padding: 0.25rem;
   color: var(--color-console-error-icon);
-}
+}

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -251,8 +251,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
           <div
             className={
               element.isStrictModeNonCompliant
-                ? styles.StrictModeNonCompliant
-                : styles.Component
+                ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}`
+                : styles.ComponentName
             }
             title={element.displayName}>
             {element.displayName}