fix: white space no wrapping

ccontrols · Aug 5, 2020 · 1b1455d · 1b1455d
1 parent ce239d0
commit 1b1455d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
-import React, { FC, useMemo } from 'react';
-import { Flex, Box } from 'theme-ui';
+/** @jsx jsx */
+import { FC, useMemo } from 'react';
+import { jsx, Flex, Box, Text } from 'theme-ui';
 import { ImportName, defaultExport } from '@component-controls/core';
 import { Table, Tag, ExternalLink } from '@component-controls/components';
 
@@ -87,6 +88,9 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => {
       {
         Header: 'version',
         accessor: 'version',
+        Cell: ({ value }: { value?: string }) => (
+          <Text sx={{ whiteSpace: 'nowrap' }}>{value}</Text>
+        ),
       },
       {
         Header: 'peer',

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -576,16 +576,19 @@ export const theme: ControlsTheme = {
       display: 'inline-block',
       px: 1,
       borderRadius: 5,
+      whiteSpace: 'nowrap',
     },
     rightmargin: {
       mr: 1,
       display: 'inline-block',
       px: 1,
+      whiteSpace: 'nowrap',
     },
     leftmargin: {
       ml: 1,
       display: 'inline-block',
       px: 1,
+      whiteSpace: 'nowrap',
     },
   },
   titledimage: {