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 | | --- | --- | |  | |
Ruslan Lesiutin committed
Jul 1, 2024 at 15:27 UTC
ad59ddf272dad17203561ceab7ea813c3e49d831
2 files changed
+14
-8
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
+12
-6
@@ -45,12 +45,13 @@
45
.SelectedComponentName {
46
flex: 1 1 auto;
47
overflow: hidden;
48
- text-overflow: ellipsis;
49
- line-height: normal;
48
+ display: flex;
49
+ padding: 0.25rem 0;
50
+ height: 100%;
51
+ align-items: flex-end;
52
}
53
52
-.Component {
53
- flex: 1 1 auto;
54
+.ComponentName {
55
color: var(--color-component-name);
56
font-family: var(--font-family-monospace);
57
font-size: var(--font-size-monospace-normal);
@@ -60,6 +61,10 @@
61
max-width: 100%;
62
}
63
64
+.StrictModeNonCompliantComponentName {
65
+ color: var(--color-console-error-icon);
66
+}
67
+
68
.Loading {
69
padding: 0.25rem;
70
color: var(--color-dimmer);
@@ -68,6 +73,7 @@
73
}
74
75
.StrictModeNonCompliant {
71
- margin-right: 0.25rem;
76
+ display: inline-flex;
77
+ padding: 0.25rem;
78
color: var(--color-console-error-icon);
73
-}
\ No newline at end of file
79
+}
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+2
-2
@@ -251,8 +251,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
251
<div
252
className={
253
element.isStrictModeNonCompliant
254
- ? styles.StrictModeNonCompliant
255
- : styles.Component
254
+ ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}`
255
+ : styles.ComponentName
256
}
257
title={element.displayName}>
258
{element.displayName}