fix: add ellipsis for overflowing rpc labels (#87)

TrentConley · web-flow · commit 38a57f5893a8 · 2023-12-09T14:28:41.000+11:00
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -293,7 +293,7 @@ function RpcUrl() {
           borderRadius="round"
           style={{ minWidth: 8, minHeight: 8 }}
         />
-        <Text size="12px" wrap={false} width="full">
+        <Text size="12px" wrap={false} width="full" style={{overflow: "hidden", textOverflow: "ellipsis"}}>
           {network.rpcUrl.replace(/https?:\/\//, '')}
         </Text>
       </Inline>
diff --git a/src/screens/networks.tsx b/src/screens/networks.tsx
@@ -166,6 +166,7 @@ function NetworkRow({
                   color={data ? 'text' : 'text/tertiary'}
                   size="12px"
                   wrap={false}
+                  style={{overflow: "hidden", textOverflow: "ellipsis"}}
                 >
                   {network.rpcUrl.replace(/https?:\/\//, '')}
                 </Text>

Original file line number	Diff line number	Diff line change
`@@ -166,6 +166,7 @@ function NetworkRow({`
`166`	`166`	`color={data ? 'text' : 'text/tertiary'}`
`167`	`167`	`size="12px"`
`168`	`168`	`wrap={false}`
	`169`	`+ style={{overflow: "hidden", textOverflow: "ellipsis"}}`
`169`	`170`	`>`
`170`	`171`	`{network.rpcUrl.replace(/https?:\/\//, '')}`
`171`	`172`	`</Text>`