From 1e85372f7bae1faa70606f7d85b0c2c1ad199fe0 Mon Sep 17 00:00:00 2001
From: hai-tian <wb-th358723@antgroup.com>
Date: Thu, 9 Jan 2025 22:04:34 +0800
Subject: [PATCH] refactor(ui): ai interpret style pretty (#708)

## What type of PR is this?

<!--
Add one of the following kinds:
/kind bug
/kind cleanup
/kind refactor
/kind documentation
/kind feature
/kind chore
/kind perf
/kind style
/kind test
-->

## What this PR does / why we need it:

TODO

## Which issue(s) this PR fixes:

<!--
*Automatically closes linked issue when PR is merged.
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
_If PR is about `failing-tests or flakes`, please post the related
issues/tests in a comment and do not use `Fixes`_*
-->

Fixes #
---
 ui/src/components/yaml/styles.module.less     | 23 +++++++++++++++++++
 .../components/eventAggregator/index.tsx      |  2 +-
 .../eventAggregator/styles.module.less        | 23 +++++++++++++++++++
 .../exceptionList/style.module.less           | 23 +++++++++++++++++++
 .../components/podLogs/styles.module.less     | 23 +++++++++++++++++++
 5 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
index 47676b2c..de6bdedd 100644
--- a/ui/src/components/yaml/styles.module.less
+++ b/ui/src/components/yaml/styles.module.less
@@ -443,6 +443,29 @@
           overflow-x: auto;
           border: 1px solid rgba(147, 112, 219, 0.1);
 
+          &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: rgba(147, 112, 219, 0.05);
+            border-radius: 4px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: rgba(147, 112, 219, 0.2);
+            border-radius: 4px;
+            border: 2px solid transparent;
+            background-clip: padding-box;
+
+            &:hover {
+              background: rgba(147, 112, 219, 0.3);
+              border: 2px solid transparent;
+              background-clip: padding-box;
+            }
+          }
+
           code {
             background: none;
             padding: 0;
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
index 5b36cb01..48a73384 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
+++ b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
@@ -340,7 +340,7 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
     debouncedDiagnose()
   }, [debouncedDiagnose])
 
-  const isVertical = filteredEvents?.length <= 6
+  const isVertical = filteredEvents?.length <= 3
   const events_content_styles: React.CSSProperties = isVertical
     ? { flexDirection: 'column' }
     : { flexDirection: 'row' }
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
index 1c16b9c8..b5802c17 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
+++ b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -452,6 +452,29 @@
             overflow-x: auto;
             border: 1px solid rgba(147, 112, 219, 0.1);
 
+            &::-webkit-scrollbar {
+              width: 8px;
+              height: 8px;
+            }
+
+            &::-webkit-scrollbar-track {
+              background: rgba(214, 199, 244, 0.05);
+              border-radius: 4px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background: rgba(237, 234, 242, 0.3);
+              border-radius: 4px;
+              border: 2px solid transparent;
+              background-clip: padding-box;
+
+              &:hover {
+                background: rgba(147, 112, 219, 0.3);
+                border: 2px solid transparent;
+                background-clip: padding-box;
+              }
+            }
+
             code {
               background: none;
               padding: 0;
diff --git a/ui/src/pages/insightDetail/components/exceptionList/style.module.less b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
index f5965333..37d56006 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/style.module.less
+++ b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
@@ -558,6 +558,29 @@
           overflow-x: auto;
           border: 1px solid rgba(147, 112, 219, 0.1);
 
+          &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: rgba(214, 199, 244, 0.05);
+            border-radius: 4px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: rgba(237, 234, 242, 0.3);
+            border-radius: 4px;
+            border: 2px solid transparent;
+            background-clip: padding-box;
+
+            &:hover {
+              background: rgba(147, 112, 219, 0.3);
+              border: 2px solid transparent;
+              background-clip: padding-box;
+            }
+          }
+
           code {
             background: none;
             padding: 0;
diff --git a/ui/src/pages/insightDetail/components/podLogs/styles.module.less b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
index 98312110..1a6a259a 100644
--- a/ui/src/pages/insightDetail/components/podLogs/styles.module.less
+++ b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
@@ -557,6 +557,29 @@
               overflow-x: auto;
               border: 1px solid rgba(147, 112, 219, 0.1);
 
+              &::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+              }
+
+              &::-webkit-scrollbar-track {
+                background: rgba(147, 112, 219, 0.05);
+                border-radius: 4px;
+              }
+
+              &::-webkit-scrollbar-thumb {
+                background: rgba(147, 112, 219, 0.2);
+                border-radius: 4px;
+                border: 2px solid transparent;
+                background-clip: padding-box;
+
+                &:hover {
+                  background: rgba(147, 112, 219, 0.3);
+                  border: 2px solid transparent;
+                  background-clip: padding-box;
+                }
+              }
+
               code {
                 background: none;
                 padding: 0;