16073: Style io panel tabs to be symmetrical

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index 340d1298881bef04e2e8ece9cf60428567114cfd..7d4565228cca38f0032e204eb3b4f367ebf4a3bf 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -61,7 +61,7 @@ import { RootState } from 'store/store';
 import { ProcessOutputCollectionFiles } from './process-output-collection-files';
 import { Process } from 'store/processes/process';
 
-type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader' | 'tableWrapper' | 'tableRoot' | 'paramValue' | 'keepLink' | 'imagePreview' | 'valArray' | 'emptyValue';
+type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader' | 'tableWrapper' | 'tableRoot' | 'paramValue' | 'keepLink' | 'imagePreview' | 'valArray' | 'emptyValue' | 'symmetricTabs';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -127,6 +127,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     emptyValue: {
         color: theme.customs.colors.grey500,
     },
+    symmetricTabs: {
+        '& button': {
+            flexBasis: '0',
+        }
+    },
 });
 
 export enum ProcessIOCardType {
@@ -178,7 +183,7 @@ export const ProcessIOCard = withStyles(styles)(
                 <div>
                     {!process.containerRequest.requestingContainerUuid ?
                         (<>
-                            <Tabs value={mainProcTabState} onChange={handleMainProcTabChange} variant="fullWidth">
+                            <Tabs value={mainProcTabState} onChange={handleMainProcTabChange} variant="fullWidth" className={classes.symmetricTabs}>
                                 <Tab label="Parameters" />
                                 <Tab label="JSON" />
                             </Tabs>
@@ -198,7 +203,7 @@ export const ProcessIOCard = withStyles(styles)(
                                 </div>}
                         </>) :
                         (<>
-                            <Tabs value={0} variant="fullWidth">
+                            <Tabs value={0} variant="fullWidth" className={classes.symmetricTabs}>
                                 {label === ProcessIOCardType.INPUT && <Tab label="Collections" />}
                                 {label === ProcessIOCardType.OUTPUT && <Tab label="Collection" />}
                             </Tabs>