fix bugs on second bug bash (#3016)

Co-authored-by: Lijiao <Lijiaoa@outlook.com>

src/webui/src/components/overview/command/Command1.tsx

@@ -28,9 +28,9 @@ export const Command1 = (): any => {
     }
 
     return (
-        <div className='command basic'>
+        <div className='basic'>
             <div>
-                <p>Training platform</p>
+                <p className='command'>Training platform</p>
                 <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
                 <p className='lineMargin'>{title}</p>
                 <div className='nowrap'>{builtinName}</div>

src/webui/src/components/overview/command/Command2.tsx

@@ -16,8 +16,8 @@ export const Command2 = (): any => {
         }
     }
     return (
-        <div className='command basic'>
-            <p>Log directory</p>
+        <div className='basic'>
+            <p className='command'>Log directory</p>
             <div className='nowrap'>
                 <TooltipHost
                     content={EXPERIMENT.profile.logDir || 'unknown'}

src/webui/src/components/overview/count/EditExperimentParam.tsx

@@ -154,6 +154,7 @@ export const EditExperimentParam = (): any => {
             return val;
         }
     }
+
     return (
         <AppContext.Consumer>
             {(values): React.ReactNode => {

src/webui/src/components/overview/overviewConst.ts

@@ -19,9 +19,9 @@ const entriesOption = [
 ];
 
 const durationUnit = [
-    { key: 'm', text: 'm' },
-    { key: 'h', text: 'h' },
-    { key: 'd', text: 'd' }
+    { key: 'm', text: 'min' },
+    { key: 'h', text: 'hour' },
+    { key: 'd', text: 'day' }
 ];
 
 export { itemStyle1, itemStyleSucceed, itemStyle2, entriesOption, durationUnit };

src/webui/src/components/trial-detail/TableList.tsx

@@ -28,6 +28,7 @@ import '../../static/style/pagination.scss';
 import '../../static/style/search.scss';
 import '../../static/style/table.scss';
 import '../../static/style/tableStatus.css';
+import '../../static/style/overview/overviewTitle.scss';
 import { blocked, copy, LineChart, tableListIcon } from '../buttons/Icon';
 import ChangeColumnComponent from '../modals/ChangeColumnComponent';
 import Compare from '../modals/Compare';
@@ -297,17 +298,16 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 // FIXME: default metric is hacked as latestAccuracy currently
                 continue;
             }
-            const lengths = tableItems.map(item => `${item[k]}`.length);
-            const avgLengths = lengths.reduce((a, b) => a + b) / lengths.length;
             const columnTitle = _inferColumnTitle(k);
-            const columnWidth = Math.max(columnTitle.length, avgLengths);
             // TODO: add blacklist
+            // 0.85: tableWidth / screen
+            const widths = window.innerWidth * 0.85;
             columns.push({
                 name: columnTitle,
                 key: k,
                 fieldName: k,
-                minWidth: columnWidth * 13,
-                maxWidth: columnWidth * 18,
+                minWidth: widths * 0.12,
+                maxWidth: widths * 0.19,
                 isResizable: true,
                 onColumnClick: this._onColumnClick.bind(this),
                 ...(k === 'status' && {
@@ -371,8 +371,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
             name: 'Operation',
             key: '_operation',
             fieldName: 'operation',
-            minWidth: 160,
-            maxWidth: 200,
+            minWidth: 150,
+            maxWidth: 160,
             isResizable: true,
             className: 'detail-table',
             onRender: this._renderOperationColumn.bind(this)

src/webui/src/static/style/overview/command.scss

-.command {
-    p {
+.overviewCommand1,
+.overviewCommand2 {
+    .command {
         margin-top: 0;
+        font-weight: normal;
     }
+}
 
+.basic {
     .lineMargin {
         margin-top: 20px;
+        font-weight: normal;
     }
 }

src/webui/src/static/style/overview/config.scss

@@ -6,7 +6,8 @@
     .ms-Button--default {
         padding: 0 8px;
         margin: 0 0 12px 0;
-        border: 1px solid #ccc;
+        border: none;
+        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
         border-radius: 18px 0 0 18px;
         font-size: 12px;
         text-align: left;

src/webui/src/static/style/overview/overviewTitle.scss

 $iconPaddingVal: 20px;
 
 .panelTitle {
-    img {
-        height: 23px;
-
-        /* (38 - 22 ) / 2 */
-        margin-top: 8px;
-
-        /* icon right */
-        padding: 0 $iconPaddingVal 0 0;
-    }
-
     span {
         font-size: 18px;
         font-weight: 600;