From d8d85a410146f182ab585e10e182fcecc7ede649 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 14 Apr 2023 00:00:37 +0100
Subject: [PATCH] fix: post and comment scroll and overflow issues

---
 src/components/common/Comment.tsx     | 5 ++++-
 src/components/common/CommentItem.tsx | 2 +-
 src/css/tailwind.css                  | 4 ++++
 3 files changed, 9 insertions(+), 2 deletions(-)

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;
+}