style: command viewer scroller

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

@@ -10,6 +10,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 const DarkViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -19,7 +20,8 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
     autodetect,
     ignoreIllegals,
     copyable,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props || {};
 
   return (
@@ -33,6 +35,7 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
       autodetect={autodetect}
       ignoreIllegals={ignoreIllegals}
       copyable={copyable}
+      xScrollable={xScrollable}
     ></CodeViewer>
   );
 };

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

@@ -10,6 +10,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 const LightViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -20,7 +21,8 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
     ignoreIllegals,
     copyable,
     style,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props || {};
 
   return (
@@ -34,6 +36,7 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
       autodetect={autodetect}
       ignoreIllegals={ignoreIllegals}
       copyable={copyable}
+      xScrollable={xScrollable}
     ></CodeViewer>
   );
 };

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

@@ -15,6 +15,7 @@ interface CodeViewerProps {
   height?: string | number;
   theme?: 'light' | 'dark';
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 
 interface CodeHeaderProps {
@@ -43,6 +44,14 @@ const CodeHeaderWrapper = styled.div`
 
 const Wrapper = styled.div`
   border-radius: var(--border-radius-mini);
+  &:hover {
+    .custome-scrollbar {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+    }
+  }
 `;
 
 const CodeHeader: React.FC<CodeHeaderProps> = ({
@@ -80,7 +89,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     ignoreIllegals = true,
     copyable = true,
     height = 'auto',
-    style
+    style,
+    xScrollable = false
   } = props || {};
 
   const highlightedCode = useMemo(() => {
@@ -131,7 +141,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
           'code-pre custome-scrollbar custom-scrollbar-horizontal ',
           {
             dark: props.theme === 'dark',
-            light: props.theme === 'light'
+            light: props.theme === 'light',
+            'x-scrollable': xScrollable
           }
         )}
         style={{
@@ -141,7 +152,10 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
         }}
       >
         <code
-          style={{ minHeight: height }}
+          style={{
+            minHeight: height,
+            ...(xScrollable ? { width: 'max-content' } : {})
+          }}
           className={classNames(highlightedCode.className, {
             dark: props.theme === 'dark',
             light: props.theme === 'light'

src/components/highlight-code/index.tsx

@@ -10,6 +10,7 @@ const HighlightCode: React.FC<{
   copyable?: boolean;
   theme?: 'light' | 'dark';
   fixedTheme?: 'light' | 'dark';
+  xScrollable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
   copyValue?: string;
@@ -21,7 +22,8 @@ const HighlightCode: React.FC<{
     lang = 'bash',
     copyable = true,
     theme,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props;
 
   const { userSettings } = useUserSettings();
@@ -40,6 +42,7 @@ const HighlightCode: React.FC<{
           copyValue={copyValue}
           copyable={copyable}
           height={height}
+          xScrollable={xScrollable}
           style={style}
         />
       ) : (
@@ -50,6 +53,7 @@ const HighlightCode: React.FC<{
           copyValue={copyValue}
           copyable={copyable}
           height={height}
+          xScrollable={xScrollable}
         />
       )}
     </div>