Merge branch 'dev' into beta

apps/web/components/GardenCard.tsx

@@ -11,6 +11,7 @@ import { Statistic, TokenLabel } from ".";
 import { gardenLand } from "@/assets";
 import { Card } from "@/components/Card";
 import { ChainIcon, getConfigByChain } from "@/configs/chains";
+import TooltipIfOverflow from "./TooltipIfOverflow";
 
 type TokenGarden = getTokenGardensQuery["tokenGardens"][number];
 
@@ -43,7 +44,9 @@ export function GardenCard({ garden }: { garden: TokenGarden }) {
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between gap-2">
           {/* TODO: find appropiate token image */}
-          <h3 className="text-neutral-content h-14">{name}</h3>
+          <h3 className="text-neutral-content h-14">
+            <TooltipIfOverflow lineClamp="line-clamp-2">{name}</TooltipIfOverflow>
+          </h3>
           <TokenLabel chainId={chainId} noSymbol />
         </div>
         <div className="flex flex-col gap-4">

apps/web/components/TooltipIfOverflow.tsx

@@ -1,15 +1,37 @@
 import React, { useRef, useState, useEffect } from "react";
 
-type Props = { children: string | undefined; className?: string };
+type Props = {
+  children: string | undefined;
+  className?: string;
+  lineClamp?:
+    | "line-clamp-2"
+    | "line-clamp-3"
+    | "line-clamp-4"
+    | "line-clamp-5"
+    | "line-clamp-6"
+    | "line-clamp-7"
+    | "line-clamp-8"
+    | "line-clamp-9"
+    | "line-clamp-10"
+    | "line-clamp-none";
+};
 
-function TooltipIfOverflow({ children, className }: Props) {
+function TooltipIfOverflow({
+  children,
+  className,
+  lineClamp = "line-clamp-none",
+}: Props) {
   const textRef = useRef<HTMLDivElement>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
 
   useEffect(() => {
     const element = textRef.current;
     if (element) {
-      setIsOverflowing(element.scrollWidth > element.offsetWidth);
+      if (lineClamp === "line-clamp-none") {
+        setIsOverflowing(element.scrollWidth > element.offsetWidth);
+      } else {
+        setIsOverflowing(element.scrollHeight > element.offsetHeight + 1);
+      }
     }
   }, [children]);
 
@@ -20,7 +42,7 @@ function TooltipIfOverflow({ children, className }: Props) {
     >
       <div
         ref={textRef}
-        className={`truncate w-full text-left ${className ?? ""}`}
+        className={`${lineClamp === "line-clamp-none" ? "truncate" : lineClamp} w-full text-left ${className ?? ""}`}
       >
         {children}
       </div>