fix metric style (#2571)

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

@@ -3,7 +3,7 @@ import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
     Stack, Dropdown, DetailsList, IDetailsListProps, DetailsListLayoutMode,
-    PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton
+    PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton, TooltipHost
 } from 'office-ui-fabric-react';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
 import { MANAGER_IP, COLUMNPro } from '../../static/const';
@@ -149,7 +149,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (item): React.ReactNode => <div>{item.formattedLatestAccuracy}</div>
+        onRender: (item): React.ReactNode => <TooltipHost content={item.formattedLatestAccuracy}>
+            <div className="ellipsis">{item.formattedLatestAccuracy}</div>
+        </TooltipHost>
     };
 
     SequenceIdColumnConfig: any = {
@@ -556,7 +558,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 other = accDictionary[item].toString();
                             }
                             return (
-                                <div>{other}</div>
+                                <TooltipHost content={other}>
+                                    <div className="ellipsis">{other}</div>
+                                </TooltipHost>
                             );
                         }
                     });

src/webui/src/static/style/table.scss

@@ -11,6 +11,12 @@
     }
 }
 
+.ellipsis{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 #succeTable, #tableList{
     .commonTableStyle .leftTitle div{
         text-align: left;