fix: package name white space no wrap

ccontrols · May 9, 2020 · 848feb3 · 848feb3
1 parent cfd724b
commit 848feb3
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React, { FC, useMemo } from 'react';
-import { Flex } from 'theme-ui';
+import { Flex, Box } from 'theme-ui';
 import { ImportName } from '@component-controls/specification';
 import { Table, Tag, ExternalLink } from '@component-controls/components';
 
@@ -48,15 +48,16 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => {
             original: { name, packageName, version },
           },
         }: any) => {
+          const el = <Box css={{ whiteSpace: 'nowrap' }}>{name}</Box>;
           if (!packageName) {
-            return name;
+            return el;
           }
           const baseVersion = version.replace(/[\^=~]/, '');
           return (
             <ExternalLink
               href={`https://npmjs.com/package/${packageName}/v/${baseVersion}`}
             >
-              {name}
+              {el}
             </ExternalLink>
           );
         },