From 0f0fece94e899c58e367b35e1e8511488e99e7ca Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 26 Apr 2022 12:25:15 +0800
Subject: [PATCH] fix trace style

---
 src/views/dashboard/related/trace/Detail.vue  | 21 ++++++++++++++-----
 .../related/trace/components/List.vue         |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 3e2caa64..e2b6f15a 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -24,7 +24,12 @@ limitations under the License. -->
         />
         <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
         <div class="trace-log-btn">
-          <el-button class="mr-10" type="primary" @click="searchTraceLogs">
+          <el-button
+            size="small"
+            class="mr-10"
+            type="primary"
+            @click="searchTraceLogs"
+          >
             {{ t("viewLogs") }}
           </el-button>
         </div>
@@ -88,7 +93,8 @@ limitations under the License. -->
         </div>
         <div>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'List' }"
             @click="displayMode = 'List'"
           >
@@ -96,7 +102,8 @@ limitations under the License. -->
             {{ t("list") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Tree' }"
             @click="displayMode = 'Tree'"
           >
@@ -104,7 +111,8 @@ limitations under the License. -->
             {{ t("tree") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Table' }"
             @click="displayMode = 'Table'"
           >
@@ -112,7 +120,8 @@ limitations under the License. -->
             {{ t("table") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Statistics' }"
             @click="displayMode = 'Statistics'"
           >
@@ -231,6 +240,8 @@ export default defineComponent({
 
 .trace-chart {
   height: 100%;
+  overflow: auto;
+  padding-bottom: 20px;
 }
 
 .trace-detail-wrapper {
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index e8d4cd07..d9a4c56c 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -22,7 +22,7 @@ limitations under the License. -->
         <Icon iconName="issue-open-m" class="mr-5" size="sm" />
         <span>{{ i }}</span>
       </span>
-      <el-button class="btn" type="primary" @click="downloadTrace">
+      <el-button class="btn" size="small" type="primary" @click="downloadTrace">
         {{ t("exportImage") }}
       </el-button>
     </div>