From b701d76668feccdad67dbad96879dcb9b510e698 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Tue, 29 Nov 2022 08:10:12 -0800
Subject: [PATCH] Fixes overflow text

Summary: ^

Reviewed By: antonk52

Differential Revision: D41580381

fbshipit-source-id: d2e2d53f28ebf68a0f6c5a4cb882e905fd4bdd66
---
 .../sidebar/inspector/IdentityInspector.tsx   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx
index 006785a65..2e08de7fe 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx
@@ -18,6 +18,15 @@ type Props = {
   node: UINode;
 };
 
+const IdentityKey = styled.div({
+  padding: '0 16px',
+});
+
+const IdentityValue = styled.span({
+  fontSize: theme.fontSize.small,
+  wordBreak: 'break-all',
+});
+
 const IdentityContainer = styled.div(TopSpacedContainerStyle);
 
 export const IdentityInspector: React.FC<Props> = ({node}) => {
@@ -25,26 +34,28 @@ export const IdentityInspector: React.FC<Props> = ({node}) => {
     <IdentityContainer>
       <Row gutter={4}>
         <Col span="10">
-          <div style={{padding: '0 16px'}}>Name:</div>
+          <IdentityKey>Name:</IdentityKey>
         </Col>
-        <Col span="14" style={{fontSize: theme.fontSize.small}}>
-          {node.name}
+        <Col span="14">
+          <IdentityValue title={node.name}>{node.name}</IdentityValue>
         </Col>
       </Row>
       <Row gutter={4}>
         <Col span="10">
-          <div style={{padding: '0 16px'}}>Qualified name:</div>
+          <IdentityKey>Qualified name:</IdentityKey>
         </Col>
-        <Col span="14" style={{fontSize: theme.fontSize.small}}>
-          {node.qualifiedName}
+        <Col span="14">
+          <IdentityValue title={node.qualifiedName}>
+            {node.qualifiedName}
+          </IdentityValue>
         </Col>
       </Row>
       <Row gutter={4}>
         <Col span="10">
-          <div style={{padding: '0 16px'}}>Id:</div>
+          <IdentityKey>Id:</IdentityKey>
         </Col>
-        <Col span="14" style={{fontSize: theme.fontSize.small}}>
-          {node.id}
+        <Col span="14">
+          <IdentityValue title={node.id.toString()}>{node.id}</IdentityValue>
         </Col>
       </Row>
       <CodeInspector name={node.qualifiedName} tags={node.tags} />