[webui] Improve overview page: remove blank at the bottom (#4302)

ts/webui/src/App.scss

@@ -29,7 +29,7 @@
 
 .content {
     width: 87%;
-    min-height: calc(100vh - 56px);
+    min-height: calc(100vh - 80px);
     margin: 0 auto;
     min-width: 1200px;
     max-width: 1490px;

ts/webui/src/components/overview/params/BasicInfo.tsx

@@ -26,7 +26,7 @@ export const BasicInfo = (): any => {
             <Stack horizontal horizontalAlign='space-between' className='marginTop'>
                 <div className='basic'>
                     <p>Name</p>
-                    <div className='ellipsis'>{EXPERIMENT.profile.params.experimentName}</div>
+                    <div className='ellipsis'>{EXPERIMENT.profile.params.experimentName || '--'}</div>
                     <p className='marginTop'>ID</p>
                     <div className='ellipsis'>{EXPERIMENT.profile.id}</div>
                 </div>

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

@@ -8,7 +8,7 @@
 
 .basic {
     .lineMargin {
-        margin-top: 24px;
+        margin-top: 22px;
         font-weight: normal;
     }
 }

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

@@ -6,6 +6,7 @@ $boxGapPadding: 10px;
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     grid-auto-rows: 102px;
+    margin-bottom: 24px;
 
     > div {
         background: #fff;
@@ -42,7 +43,7 @@ $boxGapPadding: 10px;
         grid-column: 1 / 5;
         grid-row-start: 8;
         margin-top: -50px;
-        height: 158px;
+        height: 152px;
         margin-right: $boxGapPadding;
         border-radius: $boxBorderRadius;
     }
@@ -83,7 +84,7 @@ $boxGapPadding: 10px;
 
 .overviewBestMetric {
     grid-column: 5 / 9;
-    grid-row: 1 / 10;
+    grid-row: 1 / 9;
     max-height: 822px;
     overflow: hidden;