From e1531e4dc03d3e67eef543fddb561d880d5f2ae1 Mon Sep 17 00:00:00 2001
From: Qinzheng Sun <qinsu@microsoft.com>
Date: Tue, 2 Jul 2019 13:59:42 +0800
Subject: [PATCH] css tweak

---
 src/webportal/src/app/components/monaco-hack.scss         | 8 ++++++++
 .../src/app/job-submission/components/command-section.jsx | 2 +-
 .../job-submission/components/controls/key-value-list.jsx | 3 ++-
 .../src/app/job-submission/components/docker-section.jsx  | 2 +-
 .../app/job-submission/components/monaco-text-field.jsx   | 3 +--
 .../src/app/job-submission/components/sidebar/env-var.jsx | 3 ++-
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/webportal/src/app/components/monaco-hack.scss b/src/webportal/src/app/components/monaco-hack.scss
index 5e4999798e..f4460118f7 100644
--- a/src/webportal/src/app/components/monaco-hack.scss
+++ b/src/webportal/src/app/components/monaco-hack.scss
@@ -6,3 +6,11 @@
     }
   }
 }
+
+:global {
+  .monaco-aria-container {
+    position: absolute;
+    left: -999em;
+    top: -999em;
+  }
+}
diff --git a/src/webportal/src/app/job-submission/components/command-section.jsx b/src/webportal/src/app/job-submission/components/command-section.jsx
index 9126f24306..b793484c3d 100644
--- a/src/webportal/src/app/job-submission/components/command-section.jsx
+++ b/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>
diff --git a/src/webportal/src/app/job-submission/components/controls/key-value-list.jsx b/src/webportal/src/app/job-submission/components/controls/key-value-list.jsx
index e955499efb..718f9d775f 100644
--- a/src/webportal/src/app/job-submission/components/controls/key-value-list.jsx
+++ b/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>
diff --git a/src/webportal/src/app/job-submission/components/docker-section.jsx b/src/webportal/src/app/job-submission/components/docker-section.jsx
index 40fe3ae555..525bcec986 100644
--- a/src/webportal/src/app/job-submission/components/docker-section.jsx
+++ b/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'
diff --git a/src/webportal/src/app/job-submission/components/monaco-text-field.jsx b/src/webportal/src/app/job-submission/components/monaco-text-field.jsx
index 88adafd861..54bbeab6da 100644
--- a/src/webportal/src/app/job-submission/components/monaco-text-field.jsx
+++ b/src/webportal/src/app/job-submission/components/monaco-text-field.jsx
@@ -25,7 +25,6 @@ export const MonacoTextFiled = (props) => {
           border: 'solid 1px',
           borderColor: palette.neutralTertiary,
           paddingTop: spacing.s1,
-          overflow: 'auto',
         }}
         completionItems={completionItems}
         monacoRef={monacoRef}
@@ -33,9 +32,9 @@ export const MonacoTextFiled = (props) => {
           theme: 'vs',
           language: 'plaintext',
           options: {
+            automaticLayout: true,
             wordWrap: 'on',
             readOnly: false,
-            theme: 'vs',
             defaultEOL: 1,
             minimap: {enabled: false},
           },
diff --git a/src/webportal/src/app/job-submission/components/sidebar/env-var.jsx b/src/webportal/src/app/job-submission/components/sidebar/env-var.jsx
index 601e5f77c6..7540261941 100644
--- a/src/webportal/src/app/job-submission/components/sidebar/env-var.jsx
+++ b/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>