From 3b0de561af59e260932902b5ce886408fb6abd60 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 9 May 2022 11:50:35 +0800
Subject: [PATCH] set widgets style

---
 src/views/dashboard/controls/Log.vue                     | 3 ++-
 src/views/dashboard/controls/Tab.vue                     | 5 ++++-
 src/views/dashboard/controls/Trace.vue                   | 3 +++
 .../dashboard/related/components/LogTable/Index.vue      | 2 +-
 src/views/dashboard/related/profile/Content.vue          | 1 +
 .../dashboard/related/profile/components/SpanTree.vue    | 2 ++
 src/views/dashboard/related/trace/Filter.vue             | 9 ---------
 7 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index ead077b8..ea80a786 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -64,6 +64,7 @@ function removeWidget() {
   height: 100%;
   font-size: 12px;
   position: relative;
+  overflow: auto;
 }
 
 .delete {
@@ -76,6 +77,7 @@ function removeWidget() {
   padding: 10px;
   font-size: 12px;
   border-bottom: 1px solid #dcdfe6;
+  min-width: 1024px;
 }
 
 .tools {
@@ -93,6 +95,5 @@ function removeWidget() {
 
 .log {
   width: 100%;
-  overflow: auto;
 }
 </style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 5c2e0f50..e500337a 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -301,7 +301,10 @@ export default defineComponent({
 
   span.active {
     border-bottom: 1px solid #409eff;
-    color: #409eff;
+
+    .tab-name {
+      color: #409eff;
+    }
   }
 }
 
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 0682fcf4..f740453d 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -66,6 +66,7 @@ function removeWidget() {
   height: 100%;
   font-size: 12px;
   position: relative;
+  overflow: auto;
 }
 
 .delete {
@@ -78,6 +79,7 @@ function removeWidget() {
   padding: 10px;
   font-size: 12px;
   border-bottom: 1px solid #dcdfe6;
+  min-width: 1200px;
 }
 
 .tools {
@@ -96,5 +98,6 @@ function removeWidget() {
 .trace {
   width: 100%;
   overflow: auto;
+  min-width: 1200px;
 }
 </style>
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index c6d6fd90..b507b0be 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -93,7 +93,7 @@ function setCurrentLog(log: any) {
 .log {
   font-size: 12px;
   height: 100%;
-  overflow: auto;
+  border-bottom: 1px solid #eee;
 }
 
 .log-header {
diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue
index 18bd2658..de5cc6ce 100644
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -57,6 +57,7 @@ function loadTrees(l: boolean) {
 .item {
   height: 100%;
   width: calc(100% - 300px);
+  overflow: auto;
 }
 
 .list {
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue
index 0913b7dc..56dcd077 100644
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -161,6 +161,7 @@ function updateTimeRange() {
   flex-shrink: 0;
   height: 50%;
   width: 100%;
+  min-width: 800px;
 }
 
 .profile-table {
@@ -171,6 +172,7 @@ function updateTimeRange() {
 .profile-trace-detail-wrapper {
   padding: 5px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  width: 100%;
 }
 
 .profile-trace-detail-ids {
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index d527569c..ee157f9f 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -62,15 +62,6 @@ limitations under the License. -->
     </div>
   </div>
   <div class="flex-h">
-    <!-- <div class="mr-5">
-      <span class="grey mr-5">{{ t("timeRange") }}:</span>
-      <TimePicker
-        :value="dateTime"
-        position="bottom"
-        format="YYYY-MM-DD HH:mm"
-        @input="changeTimeRange"
-      />
-    </div> -->
     <div class="mr-5">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
       <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />