fix: playground edit message

src/components/highlight-code/code-viewer.tsx

@@ -60,11 +60,14 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
 
   return (
     <pre
-      className={classNames('code-pre custome-scrollbar ', {
-        dark: props.theme === 'dark',
-        light: props.theme === 'light',
-        copyable: copyable
-      })}
+      className={classNames(
+        'code-pre custome-scrollbar custom-scrollbar-horizontal ',
+        {
+          dark: props.theme === 'dark',
+          light: props.theme === 'light',
+          copyable: copyable
+        }
+      )}
       style={{
         height: height
       }}

src/components/highlight-code/styles/index.less

@@ -12,17 +12,20 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: rgba(211, 211, 220, 50%);
-      border-radius: 6px;
-
-      &:hover {
-        background-color: rgba(190, 190, 190, 100%);
-      }
+      background-color: transparent;
+      border-radius: 4px;
     }
 
     &::-webkit-scrollbar-track {
       background-color: transparent;
     }
+
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+    }
   }
 
   .code-pre {
@@ -30,6 +33,10 @@
     position: relative;
     border-radius: var(--border-radius-mini);
 
+    code {
+      line-height: 1.5;
+    }
+
     &.copyable {
       padding-inline: 12px 32px;
     }