truncate large legend labels

Closes #3813

src/components/metrics/Legend.tsx

@@ -22,7 +22,12 @@ export function Legend({
         return (
           <Row key={text} onClick={() => onClick(item)}>
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              <Text size="2" color={hidden ? 'disabled' : undefined} wrap="nowrap">
+              <Text
+                size="2"
+                color={hidden ? 'disabled' : undefined}
+                truncate={true}
+                style={{ maxWidth: '300px' }}
+              >
                 {text}
               </Text>
             </StatusLight>