diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css index eaf5ac4a33a3c..377a428e96cfc 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css @@ -16,10 +16,37 @@ padding: 0.5rem; } +.Key { + flex: 0 1 auto; + padding-left: 0.25rem; + padding-right: 0.125rem; + line-height: 1rem; + border-top-left-radius: 0.125rem; + border-bottom-left-radius: 0.125rem; + display: inline-block; + background-color: var(--color-component-badge-background); + color: var(--color-text); + font-family: var(--font-family-monospace); + font-size: var(--font-size-monospace-small); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +.KeyArrow { + height: 1rem; + width: 1rem; + margin-right: -0.25rem; + border: 0.5rem solid transparent; + border-left: 0.5rem solid var(--color-component-badge-background); +} + .SelectedComponentName { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; + line-height: normal; } .Owners {