pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing max height

Browse Source
This commit is contained in:
zmeyer44 2023-11-14 11:49:21 -05:00
parent 09ea2326d2
commit 7c9d54de13
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/KindCard/components/Container.tsx
View File

@ -103,26 +103,29 @@ export default function Container({
</DropDownMenu> </DropDownMenu>
</div> </div>
</CardHeader> </CardHeader>
<CardContent <CardContent className={cn("flex grow flex-col px-4 pb-3")}>
ref={contentRef} <div
className={cn( ref={contentRef}
"relative flex grow flex-col px-4 pb-3", className={cn(
showFull || expandButton === false ? "max-h-none" : "max-h-[400px]", "relative flex grow flex-col",
)} showFull || expandButton === false ? "max-h-none" : "max-h-[400px]",
> )}
{children} >
{!showFull && expandButton && ( {children}
<div className="z-20 mt-[-70px]"> {!showFull && expandButton && (
<div className=" h-[50px] w-full bg-gradient-to-b from-transparent to-background"></div> <div className="absolute inset-x-0 bottom-0 z-20 mt-[-70px]">
{/* <div className="h-[30px] w-full bg-gradient-to-b from-transparent to-background"></div> */} <div className="h-[50px] w-full bg-gradient-to-b from-transparent to-background"></div>
<button {/* <div className="h-[30px] w-full bg-gradient-to-b from-transparent to-background"></div> */}
onClick={() => setShowFull(true)} <button
className="center text-text relative h-[30px] w-full bg-background text-sm transition-all hover:text-primary" onClick={() => setShowFull(true)}
> className="center text-text relative h-[30px] w-full bg-background text-sm transition-all hover:text-primary"
<div className="flex items-end justify-center">Show more</div> >
</button> <div className="flex items-end justify-center">Show more</div>
</div> </button>
)} </div>
)}
</div>
<div className="mt-auto"> <div className="mt-auto">
{!!contentTags?.length ? ( {!!contentTags?.length ? (
<div className="mb-2.5 mt-1 max-h-[52px] overflow-hidden"> <div className="mb-2.5 mt-1 max-h-[52px] overflow-hidden">