fix: selector block overflow limit

ccontrols · Apr 27, 2021 · 5ed1bb7 · 5ed1bb7
1 parent 55e4cb1
commit 5ed1bb7
Showing 1 changed file with 20 additions and 9 deletions.
diff --git a/plugins/axe-plugin/src/AllyBlock/NodesTable.tsx b/plugins/axe-plugin/src/AllyBlock/NodesTable.tsx
@@ -91,15 +91,26 @@ export const NodesTable: FC<NodesTableProps> = ({
               }}
             >
               {value &&
-                value.map(target => (
-                  <Tag
-                    key={`${target}`}
-                    color="lightgrey"
-                    variant="tag.rightmargin"
-                  >
-                    {trimNode(target)}
-                  </Tag>
-                ))}
+                value.map(target => {
+                  const selector = trimNode(target);
+                  return (
+                    <Tag
+                      key={`${target}`}
+                      color="lightgrey"
+                      variant="tag.rightmargin"
+                      title={selector}
+                      sx={{
+                        display: 'block',
+                        overflow: 'hidden',
+                        maxWidth: '400px',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {selector}
+                    </Tag>
+                  );
+                })}
             </Flex>
           );
         },