feat: collapse long replies and profile bios

src/components/Collapsible/index.tsx

@@ -1,10 +1,12 @@
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function Collapsible({
   alwaysExpand = false,
   children,
+  className,
   threshold = 1000,
   collapsedHeight = 600,
   ...props
@@ -45,30 +47,30 @@ export default function Collapsible({
   }, [alwaysExpand, shouldCollapse])
 
   return (
-    <div ref={containerRef} {...props}>
-      <div
-        className="relative text-left overflow-hidden"
-        style={{
-          maxHeight: !shouldCollapse || expanded ? 'none' : `${collapsedHeight}px`
-        }}
-      >
-        {children}
-        {shouldCollapse && !expanded && (
-          <div className="absolute bottom-0 h-40 w-full bg-gradient-to-b from-transparent to-background/90 flex items-end justify-center pb-4">
-            <div className="bg-background rounded-md">
-              <Button
-                className="bg-foreground hover:bg-foreground/80"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setExpanded(!expanded)
-                }}
-              >
-                {t('Show more')}
-              </Button>
-            </div>
+    <div
+      className={cn('relative text-left overflow-hidden', className)}
+      ref={containerRef}
+      {...props}
+      style={{
+        maxHeight: !shouldCollapse || expanded ? 'none' : `${collapsedHeight}px`
+      }}
+    >
+      {children}
+      {shouldCollapse && !expanded && (
+        <div className="absolute bottom-0 h-40 w-full bg-gradient-to-b from-transparent to-background/90 flex items-end justify-center pb-4">
+          <div className="bg-background rounded-md">
+            <Button
+              className="bg-foreground hover:bg-foreground/80"
+              onClick={(e) => {
+                e.stopPropagation()
+                setExpanded(!expanded)
+              }}
+            >
+              {t('Show more')}
+            </Button>
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   )
 }