fix: post and comment scroll and overflow issues

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

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={

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