From a11b2a21e112d3e33ccd33f9516773defa9237e2 Mon Sep 17 00:00:00 2001
From: Chris Hull <chris.f.hull@gmail.com>
Date: Wed, 5 Aug 2020 17:29:38 -0400
Subject: [PATCH] CSS fixes to allow long text to wrap, while setting a
 min-width to keep short text from wrapping

---
 lib/components/src/blocks/ArgsTable/ArgValue.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
index 9a08b8e8d2e8..03b1bb536cf3 100644
--- a/lib/components/src/blocks/ArgsTable/ArgValue.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -30,10 +30,11 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
   flexWrap: 'wrap',
   alignItems: 'flex-start',
   marginBottom: '-4px',
+  minWidth: 100,
 }));
 
 const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
-  flex: 0,
+  flex: '0 0 auto',
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
   wordBreak: 'break-word',
@@ -43,6 +44,8 @@ const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
   paddingTop: '2px',
   paddingBottom: '2px',
   lineHeight: '13px',
+  whiteSpace: 'normal',
+  maxWidth: '100%',
 }));
 
 const ExpandButton = styled.button<{}>(({ theme }) => ({