feat: improve readability for vm migration UI (#1112) (#1120)

(cherry picked from commit 5f32a9ade5)

Signed-off-by: pohanhuang <pohan.huang@suse.com>
Co-authored-by: Po Han Huang <pohan.huang@suse.com>

pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue

@@ -390,14 +390,17 @@ export default {
           :vmi-resource="vmi"
           :vmim-resource="vmim"
         />
-        <DashboardMetrics
+        <div
           v-if="showVmMetrics && liveMigrationProgressEnabled"
-          :detail-url="VM_MIGRATION_DETAIL_URL"
+          class="migration-metrics-scroll mb-30"
-          graph-height="640px"
+        >
-          :has-summary-and-detail="false"
+          <DashboardMetrics
-          :vars="graphVars"
+            :detail-url="VM_MIGRATION_DETAIL_URL"
-          class="mb-30"
+            graph-height="960px"
-        />
+            :has-summary-and-detail="false"
+            :vars="graphVars"
+          />
+        </div>
         <Events
           v-if="liveMigrationProgressEnabled"
           :resource="vmi"
@@ -436,3 +439,10 @@ export default {
     </Tabbed>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.migration-metrics-scroll {
+  max-height: 640px;
+  overflow-y: auto;
+}
+</style>