From 5d54f6666f4c3cbe9102650b1922946e5b5640db Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Mon, 8 Apr 2024 00:08:44 +0900
Subject: [PATCH] feat: improve line clamp

---
 .../src/components/gallery/GalleryCard.tsx      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/gallery/GalleryCard.tsx b/packages/client/src/components/gallery/GalleryCard.tsx
index 7a4e0f7..e0d270f 100644
--- a/packages/client/src/components/gallery/GalleryCard.tsx
+++ b/packages/client/src/components/gallery/GalleryCard.tsx
@@ -1,7 +1,7 @@
 import type { Document } from "dbtype/api";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
 import TagBadge from "@/components/gallery/TagBadge.tsx";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { LazyImage } from "./LazyImage.tsx";
 import StyledLink from "./StyledLink.tsx";
 
@@ -20,7 +20,7 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
 export function GalleryCard({
     doc: x
 }: { doc: Document; }) {
-    const ref = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLUListElement>(null);
     const [clipCharCount, setClipCharCount] = useState(200);
 
     const artists = x.tags.filter(x => x.startsWith("artist:")).map(x => x.replace("artist:", ""));
@@ -29,15 +29,16 @@ export function GalleryCard({
     const originalTags = x.tags.filter(x => !x.startsWith("artist:") && !x.startsWith("group:"));
     const clippedTags = clipTagsWhenOverflow(originalTags, clipCharCount);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const listener = () => {
             if (ref.current) {
                 const { width } = ref.current.getBoundingClientRect();
-                const charWidth = 8; // rough estimate
+                const charWidth = 7; // rough estimate
                 const newClipCharCount = Math.floor(width / charWidth) * 3;
                 setClipCharCount(newClipCharCount);
             }
         };
+        listener();
         window.addEventListener("resize", listener);
         return () => {
             window.removeEventListener("resize", listener);
@@ -54,7 +55,7 @@ export function GalleryCard({
         <div className="flex-1 flex flex-col">
             <CardHeader className="flex-none">
                 <CardTitle>
-                    <StyledLink className="" to={`/doc/${x.id}`}>
+                    <StyledLink className="line-clamp-2" to={`/doc/${x.id}`}>
                         {x.title}
                     </StyledLink>
                 </CardTitle>
@@ -71,10 +72,10 @@ export function GalleryCard({
                     )}
                 </CardDescription>
             </CardHeader>
-            <CardContent className="flex-1" ref={ref}>
-                <ul className="flex flex-wrap gap-2 items-baseline content-start">
+            <CardContent className="flex-1 overflow-hidden">
+                <ul ref={ref} className="flex flex-wrap gap-2 items-baseline content-start">
                     {clippedTags.map(tag => <TagBadge key={tag} tagname={tag} className="" />)}
-                    {clippedTags.length < originalTags.length && <TagBadge key={"..."} tagname="..." className="" disabled />}
+                    {clippedTags.length < originalTags.length && <TagBadge key={"..."} tagname="..." className="inline-block" disabled />}
                 </ul>
             </CardContent>
         </div>