Fix model table display [ci skip]

website/src/components/table.js

@@ -42,7 +42,13 @@ function isFootRow(children) {
     return false
 }
 
-export const Table = props => <table className={classes.root} {...props} />
+export const Table = ({ fixed, className, ...props }) => {
+    const tableClassNames = classNames(classes.root, className, {
+        [classes.fixed]: fixed,
+    })
+    return <table className={tableClassNames} {...props} />
+}
+
 export const Th = props => <th className={classes.th} {...props} />
 
 export const Tr = ({ evenodd = true, children, ...props }) => {

website/src/styles/code.module.sass

@@ -56,6 +56,7 @@
 
 .wrap
     white-space: pre-wrap
+    word-wrap: break-word
 
 .title,
 .juniper-button

website/src/styles/table.module.sass

@@ -6,6 +6,9 @@
     margin-bottom: var(--spacing-md)
     max-width: 100%
 
+.fixed
+    table-layout: fixed
+
 .tr
     thead &:nth-child(odd)
         background: transparent

website/src/templates/models.js

@@ -22,6 +22,7 @@ const MODEL_META = {
     core_sm: 'Vocabulary, syntax, entities',
     dep: 'Vocabulary, syntax',
     ent: 'Named entities',
+    pytt: 'PyTorch Transformers',
     vectors: 'Word vectors',
     web: 'written text (blogs, news, comments)',
     news: 'written text (news, media)',
@@ -113,7 +114,7 @@ function formatSources(data = []) {
     const sources = data.map(s => (isString(s) ? { name: s } : s))
     return sources.map(({ name, url, author }, i) => (
         <>
-            {i > 0 && ', '}
+            {i > 0 && <br />}
             {name && url ? <Link to={url}>{name}</Link> : name}
             {author && ` (${author})`}
         </>
@@ -242,7 +243,7 @@ const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExampl
                 {accuracy &&
                     accuracy.map(({ label, items }, i) =>
                         !items ? null : (
-                            <Table key={i}>
+                            <Table fixed key={i}>
                                 <thead>
                                     <Tr>
                                         <Th colSpan={2}>{label}</Th>
@@ -281,7 +282,7 @@ const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExampl
                 </CodeBlock>
             )}
             {labels && (
-                <Accordion title="Label Scheme">
+                <Accordion id={`${name}-labels`} title="Label Scheme">
                     <p>
                         The statistical components included in this model package assign the
                         following labels. The labels are specific to the corpus that the model was
@@ -291,13 +292,13 @@ const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExampl
                         </Link>
                         .
                     </p>
-                    <Table>
+                    <Table fixed>
                         {Object.keys(labels).map(pipe => {
                             const labelNames = labels[pipe] || []
                             const help = LABEL_SCHEME_META[pipe]
                             return (
                                 <Tr key={pipe} evenodd={false}>
-                                    <Td nowrap>
+                                    <Td style={{ width: '20%' }}>
                                         <Label>
                                             {pipe} {help && <Help>{help}</Help>}
                                         </Label>
@@ -306,7 +307,9 @@ const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExampl
                                         {labelNames.map((label, i) => (
                                             <>
                                                 {i > 0 && ', '}
-                                                <InlineCode key={label}>{label}</InlineCode>
+                                                <InlineCode wrap key={label}>
+                                                    {label}
+                                                </InlineCode>
                                             </>
                                         ))}
                                     </Td>