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

@@ -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;

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' }

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;

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;

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;