refs #14312-workflows-inputs-overflow

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/views/workflow-panel/workflow-description-card.tsx b/src/views/workflow-panel/workflow-description-card.tsx
index a98356403bfd50ffd346c7b01c2d68c0dfd6de26..ecbc9f0c0a2e7b83a1849ffbc7ad578737bf76c7 100644 (file)
--- a/src/views/workflow-panel/workflow-description-card.tsx
+++ b/src/views/workflow-panel/workflow-description-card.tsx
@@ -9,14 +9,21 @@ import { WorkflowIcon } from '~/components/icon/icon';
 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
 import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow';
 
-export type CssRules = 'root' | 'tab';
+export type CssRules = 'root' | 'tab' | 'inputTab';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
-        height: '100%',
+        height: '100%'
     },
     tab: {
         minWidth: '50%'
+    },
+    inputTab: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        '&:last-child': {
+            paddingBottom: theme.spacing.unit / 2,
+        }
     }
 });
 
@@ -53,7 +60,7 @@ export const WorkflowDetailsCard = withStyles(styles)(
                                 messages={['Please select a workflow to see its description.']} />
                         )}
                 </CardContent>}
-                {value === 1 && <CardContent>
+                {value === 1 && <CardContent className={classes.inputTab}>
                     {workflow
                         ? this.renderInputsTable()
                         : <DataTableDefaultView