[Web Portal] job submission page css tweak

src/webportal/src/app/components/monaco-hack.scss

@@ -6,3 +6,11 @@
     }
   }
 }
+
+:global {
+  .monaco-aria-container {
+    position: absolute;
+    left: -999em;
+    top: -999em;
+  }
+}

src/webportal/src/app/job-submission/components/command-section.jsx

@@ -46,7 +46,7 @@ export const CommandSection = (props) => {
           monacoProps={{height: 200}}
           value={value}
           onChange={_onChange}
-          completionItems={[...PAI_ENV_VAR.map((x) => `$${x.key}`)]}
+          completionItems={[...PAI_ENV_VAR.map((x) => x.key)]}
         />
       </FormShortSection>
     </BasicSection>

src/webportal/src/app/job-submission/components/controls/key-value-list.jsx

@@ -24,7 +24,7 @@
  */
 
 import {camelCase} from 'lodash';
-import {TextField, IconButton, Stack, DetailsList, CheckboxVisibility, DetailsListLayoutMode, CommandBarButton, getTheme} from 'office-ui-fabric-react';
+import {TextField, IconButton, Stack, DetailsList, CheckboxVisibility, DetailsListLayoutMode, CommandBarButton, getTheme, SelectionMode} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import React, {useCallback, useLayoutEffect, useMemo, useState, useContext} from 'react';
 import {dispatchResizeEvent} from '../../utils/utils';
@@ -151,6 +151,7 @@ export const KeyValueList = ({name, value, onChange, onDuplicate, columnWidth, k
           getKey={getKey}
           checkboxVisibility={CheckboxVisibility.hidden}
           layoutMode={DetailsListLayoutMode.fixedColumns}
+          selectionMode={SelectionMode.none}
           compact
         />
       </div>

src/webportal/src/app/job-submission/components/docker-section.jsx

@@ -241,7 +241,7 @@ export const DockerSection = ({onValueChange, value}) => {
   };
 
   return (
-    <BasicSection sectionLabel={'Docker'}>
+    <BasicSection sectionLabel='Docker Image'>
       <FormShortSection>
         <Dropdown
           placeholder='Select a docker image'

src/webportal/src/app/job-submission/components/monaco-text-field.jsx

@@ -25,17 +25,16 @@ export const MonacoTextFiled = (props) => {
           border: 'solid 1px',
           borderColor: palette.neutralTertiary,
           paddingTop: spacing.s1,
-          overflow: 'auto',
         }}
         completionItems={completionItems}
         monacoRef={monacoRef}
         monacoProps={{
           theme: 'vs',
           language: 'plaintext',
           options: {
+            automaticLayout: true,
             wordWrap: 'on',
             readOnly: false,
-            theme: 'vs',
             defaultEOL: 1,
             minimap: {enabled: false},
           },

src/webportal/src/app/job-submission/components/sidebar/env-var.jsx

@@ -24,7 +24,7 @@
  */
 
 import React from 'react';
-import {DetailsList, CheckboxVisibility, Stack, DetailsListLayoutMode} from 'office-ui-fabric-react';
+import {DetailsList, CheckboxVisibility, Stack, DetailsListLayoutMode, SelectionMode} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import {Hint} from './hint';
 import {SidebarCard} from './sidebar-card';
@@ -63,6 +63,7 @@ export const EnvVar = React.memo(({selected, onSelect}) => (
           columns={columns}
           checkboxVisibility={CheckboxVisibility.hidden}
           layoutMode={DetailsListLayoutMode.fixedColumns}
+          selectionMode={SelectionMode.none}
           compact
         />
       </div>