From 43f5ce294e86d9a5f7e6e7ef8b416d51664f738b Mon Sep 17 00:00:00 2001
From: tianhai <wb-th358723@antgroup.com>
Date: Wed, 8 Jan 2025 16:44:00 +0800
Subject: [PATCH] pref: pretty ai analysis steaming style

---
 ui/src/components/yaml/index.tsx              |  67 +--
 ui/src/components/yaml/styles.module.less     | 437 +++++++++---------
 .../components/eventAggregator/index.tsx      |  68 +--
 .../eventAggregator/styles.module.less        | 430 ++++++++---------
 .../components/podLogs/index.tsx              |  74 +--
 .../components/podLogs/styles.module.less     | 432 ++++++++---------
 6 files changed, 789 insertions(+), 719 deletions(-)

diff --git a/ui/src/components/yaml/index.tsx b/ui/src/components/yaml/index.tsx
index 4e3a3c57..af332ba2 100644
--- a/ui/src/components/yaml/index.tsx
+++ b/ui/src/components/yaml/index.tsx
@@ -45,6 +45,7 @@ const Yaml = (props: IProps) => {
   const yamlRef = useRef<LegacyRef<HTMLDivElement> | undefined>()
   const diagnosisContentRef = useRef<HTMLDivElement>(null)
   const interpretEndRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
   const observerRef = useRef<MutationObserver | null>(null)
   const { data } = props
   const [moduleHeight, setModuleHeight] = useState<number>(500)
@@ -254,6 +255,8 @@ const Yaml = (props: IProps) => {
       setStreaming(false)
     }
   }
+  const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
+  const dotToTopHeight = interpretEndRef.current?.getBoundingClientRect()?.top
 
   return (
     <div style={{ paddingBottom: 20 }}>
@@ -377,35 +380,45 @@ const Yaml = (props: IProps) => {
                   />
                 </Space>
               </div>
-              <div className={styles.yaml_content_diagnosisContent}>
-                {interpretStatus === 'loading' ||
-                (interpretStatus === 'streaming' && !interpret) ? (
-                  <div className={styles.yaml_content_diagnosisLoading}>
-                    <Spin />
-                    <p>{t('EventAggregator.DiagnosisInProgress')}</p>
-                  </div>
-                ) : interpretStatus === 'streaming' ? (
-                  <div>
-                    <Markdown>{interpret}</Markdown>
-                    <div className={styles.yaml_content_streamingIndicator}>
-                      <span className={styles.dot}></span>
-                      <span className={styles.dot}></span>
-                      <span className={styles.dot}></span>
+              <div className={styles.yaml_content_diagnosisBody}>
+                <div
+                  className={styles.yaml_content_diagnosisContent}
+                  ref={contentRef}
+                >
+                  {interpretStatus === 'loading' ||
+                  (interpretStatus === 'streaming' && !interpret) ? (
+                    <div className={styles.yaml_content_diagnosisLoading}>
+                      <Spin />
+                      <p>{t('EventAggregator.DiagnosisInProgress')}</p>
                     </div>
-                    <div
-                      ref={interpretEndRef}
-                      style={{ float: 'left', clear: 'both' }}
+                  ) : interpretStatus === 'streaming' ? (
+                    <>
+                      <Markdown>{interpret}</Markdown>
+                      <div
+                        ref={interpretEndRef}
+                        style={{
+                          float: 'left',
+                          clear: 'both',
+                        }}
+                      />
+                      <div
+                        className={`${styles.yaml_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - moduleHeight >= 0 ? styles.yaml_content_streamingIndicatorFixed : ''}`}
+                      >
+                        <span className={styles.dot}></span>
+                        <span className={styles.dot}></span>
+                        <span className={styles.dot}></span>
+                      </div>
+                    </>
+                  ) : interpretStatus === 'error' ? (
+                    <Alert
+                      type="error"
+                      message={t('EventAggregator.DiagnosisFailed')}
+                      description={t('EventAggregator.TryAgainLater')}
                     />
-                  </div>
-                ) : interpretStatus === 'error' ? (
-                  <Alert
-                    type="error"
-                    message={t('EventAggregator.DiagnosisFailed')}
-                    description={t('EventAggregator.TryAgainLater')}
-                  />
-                ) : (
-                  <Markdown>{interpret}</Markdown>
-                )}
+                  ) : (
+                    <Markdown>{interpret}</Markdown>
+                  )}
+                </div>
               </div>
             </div>
           )}
diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
index bbb83364..47d2b6ab 100644
--- a/ui/src/components/yaml/styles.module.less
+++ b/ui/src/components/yaml/styles.module.less
@@ -208,8 +208,6 @@
   .yaml_content_diagnosisPanel {
     box-sizing: border-box;
     width: 400px;
-    min-height: 200px;
-    max-height: min(100%, 600px);
     background: #2b1d3c;
     border-radius: 12px;
     display: flex;
@@ -224,8 +222,8 @@
       align-items: center;
       padding: 12px;
       background: linear-gradient(135deg,
-        rgba(147, 112, 219, 0.15) 0%,
-        rgba(43, 29, 60, 0.95) 100%);
+          rgba(147, 112, 219, 0.15) 0%,
+          rgba(43, 29, 60, 0.95) 100%);
       border-bottom: 1px solid rgba(147, 112, 219, 0.2);
       border-radius: 12px 12px 0 0;
       color: #e6e6fa;
@@ -326,17 +324,14 @@
       }
     }
 
-    .yaml_content_diagnosisContent {
+    .yaml_content_diagnosisBody {
+      position: relative;
       width: 400px;
-      box-sizing: border-box;
-      height: 100%;
       overflow-y: auto;
-      color: #d4d4d4;
-      background: #2b1d3c;
-      border-radius: 0 0 8px 8px;
-      padding: 16px;
-      font-size: 14px;
-      line-height: 1.6;
+      height: 100%;
+      box-sizing: border-box;
+      border-radius: 0 0 12px 12px;
+
 
       &::-webkit-scrollbar {
         width: 8px;
@@ -361,261 +356,277 @@
         }
       }
 
-      .yaml_content_streamingIndicator {
-        margin: 18px 0;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        .dot {
-          width: 6px;
-          height: 6px;
-          background-color: #4447c3;
-          border-radius: 50%;
-          opacity: 0.3;
-          animation: dotPulse 1.4s infinite;
-
-          &:nth-child(2) {
-            animation-delay: 0.2s;
-          }
+      .yaml_content_diagnosisContent {
+        color: #d4d4d4;
+        background: #2b1d3c;
+        border-radius: 0 0 12px 12px;
+        padding: 16px;
+        font-size: 14px;
+        line-height: 1.6;
+        box-sizing: border-box;
+        word-wrap: break-word;
+
+        .yaml_content_streamingIndicator {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          .dot {
+            width: 6px;
+            height: 6px;
+            background-color: #4447c3;
+            border-radius: 50%;
+            opacity: 0.3;
+            animation: dotPulse 1.4s infinite;
+
+            &:nth-child(2) {
+              animation-delay: 0.2s;
+            }
 
-          &:nth-child(3) {
-            animation-delay: 0.4s;
+            &:nth-child(3) {
+              animation-delay: 0.4s;
+            }
           }
         }
-      }
-
-      .yaml_content_diagnosisLoading {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 16px;
-        color: rgba(230, 230, 250, 0.85);
 
-        :global(.ant-spin) {
-          .ant-spin-dot-item {
-            background-color: #9370db;
-          }
+        .yaml_content_streamingIndicatorFixed {
+          position: fixed;
+          bottom: 16px;
+          left: 16px;
         }
 
-        p {
-          font-size: 14px;
+        .yaml_content_diagnosisLoading {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 16px;
           color: rgba(230, 230, 250, 0.85);
-        }
-      }
 
-      h1,
-      h2,
-      h3 {
-        color: #e6e6fa;
-        margin-bottom: 16px;
-        font-weight: 600;
-        letter-spacing: -0.01em;
-      }
+          :global(.ant-spin) {
+            .ant-spin-dot-item {
+              background-color: #9370db;
+            }
+          }
 
-      h1 {
-        font-size: 20px;
-      }
+          p {
+            font-size: 14px;
+            color: rgba(230, 230, 250, 0.85);
+          }
+        }
 
-      h2 {
-        font-size: 18px;
-        margin-top: 24px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-      }
+        h1,
+        h2,
+        h3 {
+          color: #e6e6fa;
+          margin-bottom: 16px;
+          font-weight: 600;
+          letter-spacing: -0.01em;
+        }
 
-      h3 {
-        font-size: 16px;
-        margin-top: 20px;
-      }
+        h1 {
+          font-size: 20px;
+        }
 
-      p {
-        margin-bottom: 16px;
-        line-height: 1.7;
-      }
+        h2 {
+          font-size: 18px;
+          margin-top: 24px;
+          padding-bottom: 8px;
+          border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+        }
 
-      ul,
-      ol {
-        padding-left: 24px;
-        margin-bottom: 16px;
-      }
+        h3 {
+          font-size: 16px;
+          margin-top: 20px;
+        }
 
-      li {
-        margin-bottom: 8px;
-      }
+        p {
+          margin-bottom: 16px;
+          line-height: 1.7;
+        }
 
-      code {
-        background: rgba(147, 112, 219, 0.1);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-        font-size: 13px;
-      }
+        ul,
+        ol {
+          padding-left: 24px;
+          margin-bottom: 16px;
+        }
 
-      pre {
-        background: rgba(20, 15, 30, 0.8);
-        padding: 16px;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        overflow-x: auto;
-        border: 1px solid rgba(147, 112, 219, 0.1);
+        li {
+          margin-bottom: 8px;
+        }
 
         code {
-          background: none;
-          padding: 0;
+          background: rgba(147, 112, 219, 0.1);
+          padding: 2px 6px;
+          border-radius: 4px;
+          font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+          font-size: 13px;
         }
-      }
 
-      :global {
-        .markdown-body {
-          color: #d4d4d4;
-          background: transparent;
+        pre {
+          background: rgba(20, 15, 30, 0.8);
           padding: 16px;
+          border-radius: 8px;
+          margin-bottom: 16px;
+          overflow-x: auto;
+          border: 1px solid rgba(147, 112, 219, 0.1);
 
-          h1,
-          h2,
-          h3,
-          h4,
-          h5,
-          h6 {
-            color: rgba(230, 230, 250, 0.95);
-            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-            margin-top: 24px;
-            margin-bottom: 16px;
-            font-weight: 600;
-            line-height: 1.25;
+          code {
+            background: none;
+            padding: 0;
           }
+        }
 
-          h1 {
-            font-size: 24px;
-          }
+        :global {
+          .markdown-body {
+            color: #d4d4d4;
+            background: transparent;
+            padding: 16px;
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+              color: rgba(230, 230, 250, 0.95);
+              border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+              margin-top: 24px;
+              margin-bottom: 16px;
+              font-weight: 600;
+              line-height: 1.25;
+            }
 
-          h2 {
-            font-size: 20px;
-          }
+            h1 {
+              font-size: 24px;
+            }
 
-          h3 {
-            font-size: 18px;
-          }
+            h2 {
+              font-size: 20px;
+            }
 
-          h4 {
-            font-size: 16px;
-          }
+            h3 {
+              font-size: 18px;
+            }
 
-          h5 {
-            font-size: 14px;
-          }
+            h4 {
+              font-size: 16px;
+            }
 
-          h6 {
-            font-size: 13px;
-          }
+            h5 {
+              font-size: 14px;
+            }
+
+            h6 {
+              font-size: 13px;
+            }
 
-          pre {
-            background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(147, 112, 219, 0.5);
-            border-radius: 6px;
-            padding: 12px;
-            margin: 12px 0;
-            overflow-x: auto;
+            pre {
+              background: rgba(0, 0, 0, 0.4);
+              border: 1px solid rgba(147, 112, 219, 0.5);
+              border-radius: 6px;
+              padding: 12px;
+              margin: 12px 0;
+              overflow-x: auto;
+
+              code {
+                background: transparent;
+                padding: 0;
+                color: #f0e6ff;
+              }
+            }
 
             code {
-              background: transparent;
-              padding: 0;
+              background: rgba(147, 112, 219, 0.2);
+              padding: 2px 6px;
+              border-radius: 4px;
               color: #f0e6ff;
+              font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
             }
-          }
 
-          code {
-            background: rgba(147, 112, 219, 0.2);
-            padding: 2px 6px;
-            border-radius: 4px;
-            color: #f0e6ff;
-            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-          }
-
-          ul,
-          ol {
-            padding-left: 24px;
-            margin: 8px 0;
+            ul,
+            ol {
+              padding-left: 24px;
+              margin: 8px 0;
 
-            li {
-              margin: 4px 0;
+              li {
+                margin: 4px 0;
+              }
             }
-          }
 
-          blockquote {
-            color: rgba(230, 230, 250, 0.85);
-            border-left: 4px solid rgba(147, 112, 219, 0.4);
-            background: rgba(147, 112, 219, 0.1);
-            margin: 16px 0;
-            padding: 12px 16px;
-            border-radius: 0 8px 8px 0;
-          }
+            blockquote {
+              color: rgba(230, 230, 250, 0.85);
+              border-left: 4px solid rgba(147, 112, 219, 0.4);
+              background: rgba(147, 112, 219, 0.1);
+              margin: 16px 0;
+              padding: 12px 16px;
+              border-radius: 0 8px 8px 0;
+            }
 
-          a {
-            color: #9370db;
-            text-decoration: none;
-            transition: all 0.2s ease;
-            border-bottom: 1px solid transparent;
+            a {
+              color: #9370db;
+              text-decoration: none;
+              transition: all 0.2s ease;
+              border-bottom: 1px solid transparent;
 
-            &:hover {
-              color: lighten(#9370db, 10%);
-              border-bottom-color: currentColor;
+              &:hover {
+                color: lighten(#9370db, 10%);
+                border-bottom-color: currentColor;
+              }
             }
-          }
 
-          table {
-            border-collapse: separate;
-            border-spacing: 0;
-            width: 100%;
-            margin: 16px 0;
-            border-radius: 8px;
-            border: 1px solid rgba(147, 112, 219, 0.2);
-            overflow: hidden;
-
-            th,
-            td {
+            table {
+              border-collapse: separate;
+              border-spacing: 0;
+              width: 100%;
+              margin: 16px 0;
+              border-radius: 8px;
               border: 1px solid rgba(147, 112, 219, 0.2);
-              padding: 12px;
-            }
+              overflow: hidden;
 
-            th {
-              background: rgba(147, 112, 219, 0.1);
-              font-weight: 600;
-              text-align: left;
-            }
-
-            tr {
-              background-color: transparent;
-              transition: background-color 0.2s ease;
+              th,
+              td {
+                border: 1px solid rgba(147, 112, 219, 0.2);
+                padding: 12px;
+              }
 
-              &:nth-child(2n) {
-                background-color: rgba(147, 112, 219, 0.05);
+              th {
+                background: rgba(147, 112, 219, 0.1);
+                font-weight: 600;
+                text-align: left;
               }
 
-              &:hover {
-                background-color: rgba(147, 112, 219, 0.1);
+              tr {
+                background-color: transparent;
+                transition: background-color 0.2s ease;
+
+                &:nth-child(2n) {
+                  background-color: rgba(147, 112, 219, 0.05);
+                }
+
+                &:hover {
+                  background-color: rgba(147, 112, 219, 0.1);
+                }
               }
             }
-          }
 
-          hr {
-            border: none;
-            height: 1px;
-            background: linear-gradient(to right,
-                rgba(147, 112, 219, 0.1),
-                rgba(147, 112, 219, 0.4),
-                rgba(147, 112, 219, 0.1));
-            margin: 24px 0;
+            hr {
+              border: none;
+              height: 1px;
+              background: linear-gradient(to right,
+                  rgba(147, 112, 219, 0.1),
+                  rgba(147, 112, 219, 0.4),
+                  rgba(147, 112, 219, 0.1));
+              margin: 24px 0;
+            }
           }
         }
       }
-    }
-  }
 
+    }
 
+  }
 
 }
 
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
index 94173fde..f0692610 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
+++ b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
@@ -67,6 +67,7 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
   const eventSource = useRef<EventSource>()
   const diagnosisEndRef = useRef<HTMLDivElement>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
 
   const { aiOptions } = useSelector((state: any) => state.globalSlice)
   const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
@@ -350,6 +351,9 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
     ? { width: '100%', height: 300 }
     : { width: 400, height: 600 }
 
+  const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
+  const dotToTopHeight = diagnosisEndRef.current?.getBoundingClientRect()?.top
+
   const renderDiagnosisWindow = () => {
     if (diagnosisStatus === 'idle') {
       return null
@@ -401,42 +405,46 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
             />
           </Space>
         </div>
-        <div className={styles.events_content_diagnosisContent}>
-          {diagnosisStatus === 'loading' ||
-          (diagnosisStatus === 'streaming' && !diagnosis) ? (
-            <div className={styles.events_content_diagnosisLoading}>
-              <Spin />
-              <p>{t('EventAggregator.DiagnosisInProgress')}</p>
-            </div>
-          ) : diagnosisStatus === 'error' ? (
-            <Alert
-              type="error"
-              message={t('EventAggregator.DiagnosisFailed')}
-              description={t('EventAggregator.TryAgainLater')}
-            />
-          ) : (
-            <>
-              <Markdown>{diagnosis}</Markdown>
-              {diagnosisStatus === 'streaming' && (
-                <div className={styles.events_content_streamingIndicator}>
-                  <span className={styles.dot}></span>
-                  <span className={styles.dot}></span>
-                  <span className={styles.dot}></span>
-                </div>
-              )}
-              <div ref={diagnosisEndRef} />
-            </>
-          )}
+        <div className={styles.events_content_diagnosisBody}>
+          <div
+            className={styles.events_content_diagnosisContent}
+            ref={contentRef}
+          >
+            {diagnosisStatus === 'loading' ||
+            (diagnosisStatus === 'streaming' && !diagnosis) ? (
+              <div className={styles.events_content_diagnosisLoading}>
+                <Spin />
+                <p>{t('EventAggregator.DiagnosisInProgress')}</p>
+              </div>
+            ) : diagnosisStatus === 'error' ? (
+              <Alert
+                type="error"
+                message={t('EventAggregator.DiagnosisFailed')}
+                description={t('EventAggregator.TryAgainLater')}
+              />
+            ) : (
+              <>
+                <Markdown>{diagnosis}</Markdown>
+                {diagnosisStatus === 'streaming' && (
+                  <div
+                    className={`${styles.events_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - (isVertical ? 300 : 600) >= 0 ? styles.events_content_streamingIndicatorFixed : ''}`}
+                  >
+                    <span className={styles.dot}></span>
+                    <span className={styles.dot}></span>
+                    <span className={styles.dot}></span>
+                  </div>
+                )}
+                <div ref={diagnosisEndRef} />
+              </>
+            )}
+          </div>
         </div>
       </div>
     )
   }
 
   return (
-    <div
-      className={styles.events_container}
-      // style={{ flexDirection: 'column' }}
-    >
+    <div className={styles.events_container}>
       <div className={styles.events_header}>
         <div className={styles.events_toolBar}>
           {hasEvents && (
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
index 89d99175..6d48767c 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
+++ b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -346,13 +346,12 @@
         }
       }
 
-      .events_content_diagnosisContent {
+      .events_content_diagnosisBody {
+        position: relative;
         overflow-y: auto;
-        color: #000;
-        border-radius: 8px;
-        padding: 16px;
-        font-size: 14px;
-        line-height: 1.6;
+        height: 100%;
+        box-sizing: border-box;
+        border-radius: 0 0 12px 12px;
 
         &::-webkit-scrollbar {
           width: 8px;
@@ -377,261 +376,278 @@
           }
         }
 
-        h1,
-        h2,
-        h3 {
+        .events_content_diagnosisContent {
           color: #000;
-          margin-bottom: 16px;
-          font-weight: 600;
-          letter-spacing: -0.01em;
-        }
-
-        h1 {
-          font-size: 20px;
-        }
-
-        h2 {
-          font-size: 18px;
-          margin-top: 24px;
-          padding-bottom: 8px;
-          border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-        }
+          border-radius: 12px;
+          padding: 16px;
+          font-size: 14px;
+          line-height: 1.6;
+          box-sizing: border-box;
+          word-wrap: break-word;
+
+          h1,
+          h2,
+          h3 {
+            color: #000;
+            margin-bottom: 16px;
+            font-weight: 600;
+            letter-spacing: -0.01em;
+          }
 
-        h3 {
-          font-size: 16px;
-          margin-top: 20px;
-        }
+          h1 {
+            font-size: 20px;
+          }
 
-        p {
-          margin-bottom: 16px;
-          line-height: 1.7;
-        }
+          h2 {
+            font-size: 18px;
+            margin-top: 24px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+          }
 
-        ul,
-        ol {
-          padding-left: 24px;
-          margin-bottom: 16px;
-        }
+          h3 {
+            font-size: 16px;
+            margin-top: 20px;
+          }
 
-        li {
-          margin-bottom: 8px;
-        }
+          p {
+            margin-bottom: 16px;
+            line-height: 1.7;
+          }
 
-        code {
-          background: rgba(147, 112, 219, 0.1);
-          padding: 2px 6px;
-          border-radius: 4px;
-          font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-          font-size: 13px;
-        }
+          ul,
+          ol {
+            padding-left: 24px;
+            margin-bottom: 16px;
+          }
 
-        pre {
-          background: #000;
-          padding: 16px;
-          border-radius: 8px;
-          margin-bottom: 16px;
-          overflow-x: auto;
-          border: 1px solid rgba(147, 112, 219, 0.1);
+          li {
+            margin-bottom: 8px;
+          }
 
           code {
-            background: none;
-            padding: 0;
-            color: #fff;
+            background: rgba(147, 112, 219, 0.1);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
           }
-        }
 
-        .events_content_streamingIndicator {
-          margin: 18px 0;
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          .dot {
-            width: 6px;
-            height: 6px;
-            background-color: #4447c3;
-            border-radius: 50%;
-            opacity: 0.3;
-            animation: dotPulse 1.4s infinite;
-
-            &:nth-child(2) {
-              animation-delay: 0.2s;
-            }
+          pre {
+            background: #000;
+            padding: 16px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            overflow-x: auto;
+            border: 1px solid rgba(147, 112, 219, 0.1);
 
-            &:nth-child(3) {
-              animation-delay: 0.4s;
+            code {
+              background: none;
+              padding: 0;
+              color: #fff;
             }
           }
-        }
 
-        .events_content_diagnosisLoading {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-          gap: 16px;
-          text-align: center;
-          color: rgba(230, 230, 250, 0.85);
-
-          :global(.ant-spin) {
-            .ant-spin-dot-item {
-              background-color: #9370db;
+          .events_content_streamingIndicator {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            .dot {
+              width: 6px;
+              height: 6px;
+              background-color: #4447c3;
+              border-radius: 50%;
+              opacity: 0.3;
+              animation: dotPulse 1.4s infinite;
+
+              &:nth-child(2) {
+                animation-delay: 0.2s;
+              }
+
+              &:nth-child(3) {
+                animation-delay: 0.4s;
+              }
             }
           }
 
-          p {
-            font-size: 14px;
-            margin-top: 16px;
-            color: rgba(230, 230, 250, 0.85);
+          .events_content_streamingIndicatorFixed {
+            position: fixed;
+            bottom: 16px;
+            left: 16px;
           }
-        }
-
-        :global {
-          .markdown-body {
-            color: #d4d4d4;
-            background: transparent;
-            padding: 16px;
 
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-              color: rgba(230, 230, 250, 0.95);
-              border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-              margin-top: 24px;
-              margin-bottom: 16px;
-              font-weight: 600;
-              line-height: 1.25;
-            }
+          .events_content_diagnosisLoading {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            gap: 16px;
+            text-align: center;
+            color: rgba(230, 230, 250, 0.85);
 
-            h1 {
-              font-size: 24px;
+            :global(.ant-spin) {
+              .ant-spin-dot-item {
+                background-color: #9370db;
+              }
             }
 
-            h2 {
-              font-size: 20px;
+            p {
+              font-size: 14px;
+              margin-top: 16px;
+              color: rgba(230, 230, 250, 0.85);
             }
+          }
 
-            h3 {
-              font-size: 18px;
-            }
+          :global {
+            .markdown-body {
+              color: #d4d4d4;
+              background: transparent;
+              padding: 16px;
+
+              h1,
+              h2,
+              h3,
+              h4,
+              h5,
+              h6 {
+                color: rgba(230, 230, 250, 0.95);
+                border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+                margin-top: 24px;
+                margin-bottom: 16px;
+                font-weight: 600;
+                line-height: 1.25;
+              }
 
-            h4 {
-              font-size: 16px;
-            }
+              h1 {
+                font-size: 24px;
+              }
 
-            h5 {
-              font-size: 14px;
-            }
+              h2 {
+                font-size: 20px;
+              }
 
-            h6 {
-              font-size: 13px;
-            }
+              h3 {
+                font-size: 18px;
+              }
 
-            pre {
-              background: rgba(0, 0, 0, 0.4);
-              border: 1px solid rgba(147, 112, 219, 0.5);
-              border-radius: 6px;
-              padding: 12px;
-              margin: 12px 0;
-              overflow-x: auto;
+              h4 {
+                font-size: 16px;
+              }
 
-              code {
-                background: transparent;
-                padding: 0;
-                color: #f0e6ff;
+              h5 {
+                font-size: 14px;
               }
-            }
 
-            code {
-              background: rgba(147, 112, 219, 0.2);
-              padding: 2px 6px;
-              border-radius: 4px;
-              color: #f0e6ff;
-              font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-            }
+              h6 {
+                font-size: 13px;
+              }
 
-            ul,
-            ol {
-              padding-left: 24px;
-              margin: 8px 0;
+              pre {
+                background: rgba(0, 0, 0, 0.4);
+                border: 1px solid rgba(147, 112, 219, 0.5);
+                border-radius: 6px;
+                padding: 12px;
+                margin: 12px 0;
+                overflow-x: auto;
 
-              li {
-                margin: 4px 0;
+                code {
+                  background: transparent;
+                  padding: 0;
+                  color: #f0e6ff;
+                }
               }
-            }
 
-            blockquote {
-              color: rgba(230, 230, 250, 0.85);
-              border-left: 4px solid rgba(147, 112, 219, 0.4);
-              background: rgba(147, 112, 219, 0.1);
-              margin: 16px 0;
-              padding: 12px 16px;
-              border-radius: 0 8px 8px 0;
-            }
+              code {
+                background: rgba(147, 112, 219, 0.2);
+                padding: 2px 6px;
+                border-radius: 4px;
+                color: #f0e6ff;
+                font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+              }
 
-            a {
-              color: #9370db;
-              text-decoration: none;
-              transition: all 0.2s ease;
-              border-bottom: 1px solid transparent;
+              ul,
+              ol {
+                padding-left: 24px;
+                margin: 8px 0;
 
-              &:hover {
-                color: lighten(#9370db, 10%);
-                border-bottom-color: currentColor;
+                li {
+                  margin: 4px 0;
+                }
               }
-            }
 
-            table {
-              border-collapse: separate;
-              border-spacing: 0;
-              width: 100%;
-              margin: 16px 0;
-              border-radius: 8px;
-              border: 1px solid rgba(147, 112, 219, 0.2);
-              overflow: hidden;
-
-              th,
-              td {
-                border: 1px solid rgba(147, 112, 219, 0.2);
-                padding: 12px;
+              blockquote {
+                color: rgba(230, 230, 250, 0.85);
+                border-left: 4px solid rgba(147, 112, 219, 0.4);
+                background: rgba(147, 112, 219, 0.1);
+                margin: 16px 0;
+                padding: 12px 16px;
+                border-radius: 0 8px 8px 0;
               }
 
-              th {
-                background: rgba(147, 112, 219, 0.1);
-                font-weight: 600;
-                text-align: left;
+              a {
+                color: #9370db;
+                text-decoration: none;
+                transition: all 0.2s ease;
+                border-bottom: 1px solid transparent;
+
+                &:hover {
+                  color: lighten(#9370db, 10%);
+                  border-bottom-color: currentColor;
+                }
               }
 
-              tr {
-                background-color: transparent;
-                transition: background-color 0.2s ease;
+              table {
+                border-collapse: separate;
+                border-spacing: 0;
+                width: 100%;
+                margin: 16px 0;
+                border-radius: 8px;
+                border: 1px solid rgba(147, 112, 219, 0.2);
+                overflow: hidden;
+
+                th,
+                td {
+                  border: 1px solid rgba(147, 112, 219, 0.2);
+                  padding: 12px;
+                }
 
-                &:nth-child(2n) {
-                  background-color: rgba(147, 112, 219, 0.05);
+                th {
+                  background: rgba(147, 112, 219, 0.1);
+                  font-weight: 600;
+                  text-align: left;
                 }
 
-                &:hover {
-                  background-color: rgba(147, 112, 219, 0.1);
+                tr {
+                  background-color: transparent;
+                  transition: background-color 0.2s ease;
+
+                  &:nth-child(2n) {
+                    background-color: rgba(147, 112, 219, 0.05);
+                  }
+
+                  &:hover {
+                    background-color: rgba(147, 112, 219, 0.1);
+                  }
                 }
               }
-            }
 
-            hr {
-              border: none;
-              height: 1px;
-              background: linear-gradient(to right,
-                  rgba(147, 112, 219, 0.1),
-                  rgba(147, 112, 219, 0.4),
-                  rgba(147, 112, 219, 0.1));
-              margin: 24px 0;
+              hr {
+                border: none;
+                height: 1px;
+                background: linear-gradient(to right,
+                    rgba(147, 112, 219, 0.1),
+                    rgba(147, 112, 219, 0.4),
+                    rgba(147, 112, 219, 0.1));
+                margin: 24px 0;
+              }
             }
           }
         }
+
       }
+
     }
   }
 }
diff --git a/ui/src/pages/insightDetail/components/podLogs/index.tsx b/ui/src/pages/insightDetail/components/podLogs/index.tsx
index cc14ce8f..ce5c45e7 100644
--- a/ui/src/pages/insightDetail/components/podLogs/index.tsx
+++ b/ui/src/pages/insightDetail/components/podLogs/index.tsx
@@ -99,6 +99,7 @@ const PodLogs: React.FC<PodLogsProps> = ({
   const diagnosisEndRef = useRef<HTMLDivElement>(null)
   const eventSourceRef = useRef<EventSource | null>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (yamlData) {
@@ -631,6 +632,9 @@ const PodLogs: React.FC<PodLogsProps> = ({
     )
   }
 
+  const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
+  const dotToTopHeight = diagnosisEndRef.current?.getBoundingClientRect()?.top
+
   return (
     <div className={styles.podLogs}>
       {error && (
@@ -832,40 +836,44 @@ const PodLogs: React.FC<PodLogsProps> = ({
                   />
                 </Space>
               </div>
-              <div className={styles.diagnosisContent}>
-                {diagnosisStatus === ('loading' as DiagnosisStatus) ||
-                (diagnosisStatus === ('streaming' as DiagnosisStatus) &&
-                  !diagnosis) ? (
-                  <div className={styles.diagnosisLoading}>
-                    <Spin />
-                    <span>{t('LogAggregator.PreparingDiagnosis')}</span>
-                  </div>
-                ) : diagnosisStatus === ('streaming' as DiagnosisStatus) ? (
-                  <div>
-                    <Markdown>{diagnosis}</Markdown>
-                    <div className={styles.streamingIndicator}>
-                      <span className={styles.dot}></span>
-                      <span className={styles.dot}></span>
-                      <span className={styles.dot}></span>
+              <div className={styles.diagnosisBody}>
+                <div className={styles.diagnosisContent} ref={contentRef}>
+                  {diagnosisStatus === ('loading' as DiagnosisStatus) ||
+                  (diagnosisStatus === ('streaming' as DiagnosisStatus) &&
+                    !diagnosis) ? (
+                    <div className={styles.diagnosisLoading}>
+                      <Spin />
+                      <span>{t('LogAggregator.PreparingDiagnosis')}</span>
                     </div>
-                    <div
-                      ref={diagnosisEndRef}
-                      style={{ float: 'left', clear: 'both' }}
-                    />
-                  </div>
-                ) : diagnosisStatus === ('error' as DiagnosisStatus) ? (
-                  <div className={styles.diagnosisError}>
-                    <Alert
-                      type="error"
-                      message={t('LogAggregator.DiagnosisError')}
-                      description={
-                        diagnosis || t('LogAggregator.TryAgainLater')
-                      }
-                    />
-                  </div>
-                ) : (
-                  <Markdown>{diagnosis}</Markdown>
-                )}
+                  ) : diagnosisStatus === ('streaming' as DiagnosisStatus) ? (
+                    <div style={{ marginBottom: 30 }}>
+                      <Markdown>{diagnosis}</Markdown>
+                      <div
+                        className={`${styles.streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - 600 >= 0 ? styles.streamingIndicatorFixed : ''}`}
+                      >
+                        <span className={styles.dot}></span>
+                        <span className={styles.dot}></span>
+                        <span className={styles.dot}></span>
+                      </div>
+                      <div
+                        ref={diagnosisEndRef}
+                        style={{ float: 'left', clear: 'both' }}
+                      />
+                    </div>
+                  ) : diagnosisStatus === ('error' as DiagnosisStatus) ? (
+                    <div className={styles.diagnosisError}>
+                      <Alert
+                        type="error"
+                        message={t('LogAggregator.DiagnosisError')}
+                        description={
+                          diagnosis || t('LogAggregator.TryAgainLater')
+                        }
+                      />
+                    </div>
+                  ) : (
+                    <Markdown>{diagnosis}</Markdown>
+                  )}
+                </div>
               </div>
             </div>
           )}
diff --git a/ui/src/pages/insightDetail/components/podLogs/styles.module.less b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
index 7fccf34f..db4d0b19 100644
--- a/ui/src/pages/insightDetail/components/podLogs/styles.module.less
+++ b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
@@ -438,15 +438,13 @@
           }
         }
 
-        .diagnosisContent {
-          height: 100%;
+        .diagnosisBody {
+          position: relative;
+          width: 400px;
           overflow-y: auto;
-          color: #d4d4d4;
-          background: #2b1d3c;
-          border-radius: 0 0 8px 8px;
-          padding: 16px;
-          font-size: 14px;
-          line-height: 1.6;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: 0 0 12px 12px;
 
           &::-webkit-scrollbar {
             width: 8px;
@@ -471,256 +469,272 @@
             }
           }
 
-          .streamingIndicator {
-            margin: 18px 0;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-
-            .dot {
-              width: 6px;
-              height: 6px;
-              background-color: #4447c3;
-              border-radius: 50%;
-              opacity: 0.3;
-              animation: dotPulse 1.4s infinite;
-
-              &:nth-child(2) {
-                animation-delay: 0.2s;
-              }
-
-              &:nth-child(3) {
-                animation-delay: 0.4s;
-              }
-            }
-          }
-
-          .diagnosisLoading,
-          .diagnosisError {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 200px;
-            gap: 16px;
-            text-align: center;
+          .diagnosisContent {
             color: #d4d4d4;
+            background: #2b1d3c;
+            border-radius: 0 0 12px 12px;
+            padding: 16px;
+            font-size: 14px;
+            line-height: 1.6;
+            box-sizing: border-box;
+            word-wrap: break-word;
+
+            .streamingIndicator {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+
+              .dot {
+                width: 6px;
+                height: 6px;
+                background-color: #4447c3;
+                border-radius: 50%;
+                opacity: 0.3;
+                animation: dotPulse 1.4s infinite;
+
+                &:nth-child(2) {
+                  animation-delay: 0.2s;
+                }
 
-            :global(.ant-spin) {
-              .ant-spin-dot-item {
-                background-color: #9370db;
+                &:nth-child(3) {
+                  animation-delay: 0.4s;
+                }
               }
             }
 
-            p {
-              font-size: 14px;
-              color: rgba(230, 230, 250, 0.85);
+            .streamingIndicatorFixed {
+              position: fixed;
+              bottom: 16px;
+              left: 16px;
             }
-          }
 
-          h1,
-          h2,
-          h3 {
-            color: #e6e6fa;
-            margin-bottom: 16px;
-            font-weight: 600;
-            letter-spacing: -0.01em;
-          }
+            .diagnosisLoading,
+            .diagnosisError {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              min-height: 200px;
+              gap: 16px;
+              text-align: center;
+              color: #d4d4d4;
 
-          h1 {
-            font-size: 20px;
-          }
+              :global(.ant-spin) {
+                .ant-spin-dot-item {
+                  background-color: #9370db;
+                }
+              }
 
-          h2 {
-            font-size: 18px;
-            margin-top: 24px;
-            padding-bottom: 8px;
-            border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-          }
+              p {
+                font-size: 14px;
+                color: rgba(230, 230, 250, 0.85);
+              }
+            }
 
-          h3 {
-            font-size: 16px;
-            margin-top: 20px;
-          }
+            h1,
+            h2,
+            h3 {
+              color: #e6e6fa;
+              margin-bottom: 16px;
+              font-weight: 600;
+              letter-spacing: -0.01em;
+            }
 
-          p {
-            margin-bottom: 16px;
-            line-height: 1.7;
-          }
+            h1 {
+              font-size: 20px;
+            }
 
-          ul,
-          ol {
-            padding-left: 24px;
-            margin-bottom: 16px;
-          }
+            h2 {
+              font-size: 18px;
+              margin-top: 24px;
+              padding-bottom: 8px;
+              border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+            }
 
-          li {
-            margin-bottom: 8px;
-          }
+            h3 {
+              font-size: 16px;
+              margin-top: 20px;
+            }
 
-          code {
-            background: rgba(147, 112, 219, 0.1);
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-            font-size: 13px;
-          }
+            p {
+              margin-bottom: 16px;
+              line-height: 1.7;
+            }
 
-          pre {
-            background: rgba(20, 15, 30, 0.8);
-            padding: 16px;
-            border-radius: 8px;
-            margin-bottom: 16px;
-            overflow-x: auto;
-            border: 1px solid rgba(147, 112, 219, 0.1);
+            ul,
+            ol {
+              padding-left: 24px;
+              margin-bottom: 16px;
+            }
+
+            li {
+              margin-bottom: 8px;
+            }
 
             code {
-              background: none;
-              padding: 0;
+              background: rgba(147, 112, 219, 0.1);
+              padding: 2px 6px;
+              border-radius: 4px;
+              font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+              font-size: 13px;
             }
-          }
 
-          :global {
-            .markdown-body {
-              color: #d4d4d4;
-              background: transparent;
+            pre {
+              background: rgba(20, 15, 30, 0.8);
               padding: 16px;
+              border-radius: 8px;
+              margin-bottom: 16px;
+              overflow-x: auto;
+              border: 1px solid rgba(147, 112, 219, 0.1);
 
-              h1,
-              h2,
-              h3,
-              h4,
-              h5,
-              h6 {
-                color: rgba(230, 230, 250, 0.95);
-                border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-                margin-top: 24px;
-                margin-bottom: 16px;
-                font-weight: 600;
-                line-height: 1.25;
+              code {
+                background: none;
+                padding: 0;
               }
+            }
 
-              h1 {
-                font-size: 24px;
-              }
+            :global {
+              .markdown-body {
+                color: #d4d4d4;
+                background: transparent;
+                padding: 16px;
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                  color: rgba(230, 230, 250, 0.95);
+                  border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+                  margin-top: 24px;
+                  margin-bottom: 16px;
+                  font-weight: 600;
+                  line-height: 1.25;
+                }
 
-              h2 {
-                font-size: 20px;
-              }
+                h1 {
+                  font-size: 24px;
+                }
 
-              h3 {
-                font-size: 18px;
-              }
+                h2 {
+                  font-size: 20px;
+                }
 
-              h4 {
-                font-size: 16px;
-              }
+                h3 {
+                  font-size: 18px;
+                }
 
-              h5 {
-                font-size: 14px;
-              }
+                h4 {
+                  font-size: 16px;
+                }
 
-              h6 {
-                font-size: 13px;
-              }
+                h5 {
+                  font-size: 14px;
+                }
 
-              pre {
-                background: rgba(0, 0, 0, 0.4);
-                border: 1px solid rgba(147, 112, 219, 0.5);
-                border-radius: 6px;
-                padding: 12px;
-                margin: 12px 0;
-                overflow-x: auto;
+                h6 {
+                  font-size: 13px;
+                }
+
+                pre {
+                  background: rgba(0, 0, 0, 0.4);
+                  border: 1px solid rgba(147, 112, 219, 0.5);
+                  border-radius: 6px;
+                  padding: 12px;
+                  margin: 12px 0;
+                  overflow-x: auto;
+
+                  code {
+                    background: transparent;
+                    padding: 0;
+                    color: #f0e6ff;
+                  }
+                }
 
                 code {
-                  background: transparent;
-                  padding: 0;
+                  background: rgba(147, 112, 219, 0.2);
+                  padding: 2px 6px;
+                  border-radius: 4px;
                   color: #f0e6ff;
+                  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
                 }
-              }
-
-              code {
-                background: rgba(147, 112, 219, 0.2);
-                padding: 2px 6px;
-                border-radius: 4px;
-                color: #f0e6ff;
-                font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-              }
 
-              ul,
-              ol {
-                padding-left: 24px;
-                margin: 8px 0;
+                ul,
+                ol {
+                  padding-left: 24px;
+                  margin: 8px 0;
 
-                li {
-                  margin: 4px 0;
+                  li {
+                    margin: 4px 0;
+                  }
                 }
-              }
 
-              blockquote {
-                color: rgba(230, 230, 250, 0.85);
-                border-left: 4px solid rgba(147, 112, 219, 0.4);
-                background: rgba(147, 112, 219, 0.1);
-                margin: 16px 0;
-                padding: 12px 16px;
-                border-radius: 0 8px 8px 0;
-              }
+                blockquote {
+                  color: rgba(230, 230, 250, 0.85);
+                  border-left: 4px solid rgba(147, 112, 219, 0.4);
+                  background: rgba(147, 112, 219, 0.1);
+                  margin: 16px 0;
+                  padding: 12px 16px;
+                  border-radius: 0 8px 8px 0;
+                }
 
-              a {
-                color: #9370db;
-                text-decoration: none;
-                transition: all 0.2s ease;
-                border-bottom: 1px solid transparent;
+                a {
+                  color: #9370db;
+                  text-decoration: none;
+                  transition: all 0.2s ease;
+                  border-bottom: 1px solid transparent;
 
-                &:hover {
-                  color: lighten(#9370db, 10%);
-                  border-bottom-color: currentColor;
+                  &:hover {
+                    color: lighten(#9370db, 10%);
+                    border-bottom-color: currentColor;
+                  }
                 }
-              }
 
-              table {
-                border-collapse: separate;
-                border-spacing: 0;
-                width: 100%;
-                margin: 16px 0;
-                border-radius: 8px;
-                border: 1px solid rgba(147, 112, 219, 0.2);
-                overflow: hidden;
-
-                th,
-                td {
+                table {
+                  border-collapse: separate;
+                  border-spacing: 0;
+                  width: 100%;
+                  margin: 16px 0;
+                  border-radius: 8px;
                   border: 1px solid rgba(147, 112, 219, 0.2);
-                  padding: 12px;
-                }
-
-                th {
-                  background: rgba(147, 112, 219, 0.1);
-                  font-weight: 600;
-                  text-align: left;
-                }
+                  overflow: hidden;
 
-                tr {
-                  background-color: transparent;
-                  transition: background-color 0.2s ease;
+                  th,
+                  td {
+                    border: 1px solid rgba(147, 112, 219, 0.2);
+                    padding: 12px;
+                  }
 
-                  &:nth-child(2n) {
-                    background-color: rgba(147, 112, 219, 0.05);
+                  th {
+                    background: rgba(147, 112, 219, 0.1);
+                    font-weight: 600;
+                    text-align: left;
                   }
 
-                  &:hover {
-                    background-color: rgba(147, 112, 219, 0.1);
+                  tr {
+                    background-color: transparent;
+                    transition: background-color 0.2s ease;
+
+                    &:nth-child(2n) {
+                      background-color: rgba(147, 112, 219, 0.05);
+                    }
+
+                    &:hover {
+                      background-color: rgba(147, 112, 219, 0.1);
+                    }
                   }
                 }
-              }
 
-              hr {
-                border: none;
-                height: 1px;
-                background: linear-gradient(to right,
-                    rgba(147, 112, 219, 0.1),
-                    rgba(147, 112, 219, 0.4),
-                    rgba(147, 112, 219, 0.1));
-                margin: 24px 0;
+                hr {
+                  border: none;
+                  height: 1px;
+                  background: linear-gradient(to right,
+                      rgba(147, 112, 219, 0.1),
+                      rgba(147, 112, 219, 0.4),
+                      rgba(147, 112, 219, 0.1));
+                  margin: 24px 0;
+                }
               }
             }
           }