diff --git a/packages/next-common/components/profile/nfts/index.jsx b/packages/next-common/components/profile/nfts/index.jsx index 8ce615dfcb..03a1da487d 100644 --- a/packages/next-common/components/profile/nfts/index.jsx +++ b/packages/next-common/components/profile/nfts/index.jsx @@ -29,7 +29,7 @@ export default function ProfileNfts() { return ( <> - NFTs + NFT {totalItems} diff --git a/packages/next-common/components/profile/nfts/nftCollectionsTree.jsx b/packages/next-common/components/profile/nfts/nftCollectionsTree.jsx index a681153d97..78c90dd7be 100644 --- a/packages/next-common/components/profile/nfts/nftCollectionsTree.jsx +++ b/packages/next-common/components/profile/nfts/nftCollectionsTree.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { cn } from "next-common/utils"; import Link from "next-common/components/link"; import Caret from "next-common/components/icons/caret"; @@ -158,8 +158,22 @@ function NftCollection({ collection, expanded, onToggle }) { ); } +const COLLAPSED_MAX_HEIGHT = 320; + export default function NftCollectionsTree({ collections }) { const [expandedKeys, setExpandedKeys] = useState(() => new Set()); + const [showAll, setShowAll] = useState(false); + const [overflow, setOverflow] = useState(false); + const contentRef = useRef(null); + + useEffect(() => { + const el = contentRef.current; + if (el) { + setOverflow(el.scrollHeight > COLLAPSED_MAX_HEIGHT); + } + }, [collections, expandedKeys]); + + const collapsed = overflow && !showAll; const toggle = (key) => { setExpandedKeys((prev) => { @@ -175,14 +189,29 @@ export default function NftCollectionsTree({ collections }) { return (
- {collections.map((collection) => ( - toggle(collection.collectionId)} - /> - ))} +
+ {collections.map((collection) => ( + toggle(collection.collectionId)} + /> + ))} +
+ {overflow && ( + + )}
); } diff --git a/packages/next-common/components/profile/tabs/content.js b/packages/next-common/components/profile/tabs/content.js index fb2db49dab..e995111ee3 100644 --- a/packages/next-common/components/profile/tabs/content.js +++ b/packages/next-common/components/profile/tabs/content.js @@ -60,8 +60,8 @@ export default function useProfileTabContent() { return (
- +
);