fix: katex overflow

Signed-off-by: Innei <[email protected]>
Innei · Apr 4, 2024 · 42c4e41 · 42c4e41
1 parent bb3dbf4
commit 42c4e41
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/app/(app)/thinking/page.tsx b/src/app/(app)/thinking/page.tsx
@@ -202,7 +202,7 @@ const List = () => {
                   className="size-[40px] rounded-full ring-2 ring-slate-200 dark:ring-zinc-800"
                 />
               </div>
-              <div>
+              <div className="min-w-0 max-w-full">
                 <div className="flex items-center space-x-2">
                   <span className="text-lg font-medium">{owner.name}</span>
 
@@ -211,22 +211,23 @@ const List = () => {
                   </span>
                 </div>
 
-                <div
-                  className={clsx(
-                    'relative inline-block rounded-xl p-3 text-zinc-800 dark:text-zinc-200',
-                    'rounded-tl-sm bg-zinc-600/5 dark:bg-zinc-500/20',
-                    'max-w-[calc(100%-3rem)]',
-                  )}
-                >
-                  <Markdown>{item.content}</Markdown>
-
-                  {!!item.ref && (
-                    <div>
-                      <RefPreview refModel={item.ref} />
-                    </div>
-                  )}
+                <div className="relative min-w-0 grow">
+                  <div
+                    className={clsx(
+                      'relative inline-block rounded-xl p-3 text-zinc-800 dark:text-zinc-200',
+                      'rounded-tl-sm bg-zinc-600/5 dark:bg-zinc-500/20',
+                      'max-w-full overflow-auto',
+                    )}
+                  >
+                    <Markdown>{item.content}</Markdown>
+
+                    {!!item.ref && (
+                      <div>
+                        <RefPreview refModel={item.ref} />
+                      </div>
+                    )}
+                  </div>
                 </div>
-
                 <div
                   className={clsx(
                     'mt-4 space-x-8 opacity-50 duration-200 hover:opacity-100',

diff --git a/src/components/ui/markdown/parsers/katex.tsx b/src/components/ui/markdown/parsers/katex.tsx
@@ -71,7 +71,7 @@ export const KateXBlockRule: MarkdownToJSX.Rule = {
   },
   react(node, _, state?) {
     return (
-      <div key={state?.key}>
+      <div className="scrollbar-none overflow-auto" key={state?.key}>
         <LateX mode="display">{node.groups.content}</LateX>
       </div>
     )