move break-word styling to the right place and add comments in code for later

lib/components/src/blocks/ArgsTable/ArgValue.tsx

@@ -22,6 +22,7 @@ interface ArgSummaryProps {
 const Text = styled.span(({ theme }) => ({
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
+  wordBreak: 'break-word',
 }));
 
 const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({

lib/components/src/blocks/ArgsTable/ArgsTable.tsx

@@ -48,16 +48,17 @@ export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boo
         ...(compact
           ? null
           : {
+              // Description column
               width: '35%',
             }),
       },
 
-      'th:nth-of-type(3), td:nth-of-type(3)': {
+      'td:nth-of-type(3)': {
         ...(compact
           ? null
           : {
+              // Defaults column
               width: '15%',
-              wordBreak: 'break-all',
             }),
       },
 
@@ -66,6 +67,7 @@ export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boo
         ...(compact
           ? null
           : {
+              // Controls column
               width: '25%',
             }),
       },