diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 691a543f..aafbd19a 100644
--- a/src/components/common/Comment.tsx
+++ b/src/components/common/Comment.tsx
@@ -16,7 +16,10 @@ export const Comment: React.FC<{
   const { t } = useTranslation("common")
 
   return (
-    <div className={cn("xlog-comment", "comment", className)} id="comments">
+    <div
+      className={cn("xlog-comment comment overflow-x-hidden", className)}
+      id="comments"
+    >
       <div className="xlog-comment-count border-b pb-2 mb-6">
         <span>
           {comments.isLoading
diff --git a/src/components/common/CommentItem.tsx b/src/components/common/CommentItem.tsx
index 61edcb2a..cec6d9b1 100644
--- a/src/components/common/CommentItem.tsx
+++ b/src/components/common/CommentItem.tsx
@@ -58,7 +58,7 @@ export const CommentItem: React.FC<{
             </div>
           </CharacterFloatCard>
         </div>
-        <div className="flex-1 flex flex-col rounded-lg">
+        <div className="flex-1 flex flex-col rounded-lg min-w-0">
           <div className="mb-1 text-sm flex items-center space-x-1">
             <UniLink
               href={
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index f8f2d111..a49c5c8c 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -393,3 +393,7 @@ textarea.input {
 .xlog-lottie-logo path[fill="rgb(0,0,0)"] {
   @apply fill-current;
 }
+
+.katex-html {
+  @apply overflow-x-auto;
+}