fix: styles for code editor embedded in admonition (#963)

logto-io · Jan 8, 2025 · e55bb7c · e55bb7c
1 parent 2de5fb9
commit e55bb7c
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
@@ -809,7 +809,7 @@ table {
 }
 
 html[data-theme='dark'] {
-  .alert pre code {
+  .alert pre {
     background-color: #181132;
   }
 }

diff --git a/src/theme/Admonition/Layout/styles.module.css b/src/theme/Admonition/Layout/styles.module.css
@@ -36,6 +36,7 @@
 
 .content {
   display: inline-block;
+  width: 100%;
 
   > p:first-of-type {
     display: inline;

diff --git a/src/theme/CodeBlock/Content/String.tsx b/src/theme/CodeBlock/Content/String.tsx
@@ -68,13 +68,12 @@ export default function CodeBlockString({
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
         <Highlight theme={prismTheme} code={code} language={language ?? 'text'}>
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          {({ className, tokens, getLineProps, getTokenProps }) => (
             <pre
               ref={wordWrap.codeBlockRef}
               // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
               tabIndex={0}
               className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
-              style={style}
             >
               <code
                 className={clsx(

diff --git a/src/theme/CodeBlock/Content/styles.module.css b/src/theme/CodeBlock/Content/styles.module.css
@@ -3,6 +3,7 @@
   /* rtl:ignore */
   direction: ltr;
   border-radius: inherit;
+  width: 100%;
 }
 
 .codeBlockTitle {