Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-28 17:09:41 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: text overflow on release and collection link on mobile

Browse source
This commit is contained in:
Kentai Radiquum 2024-08-23 00:43:18 +05:00
parent 32ff8bce0c
commit 5971b9c5ae
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/components/CollectionLink/CollectionLink.tsx
View file

@ -32,12 +32,14 @@ export const CollectionLink = (props: any) => {
</div>
)}
</div>
<div className="absolute bottom-0 left-0 px-2 py-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
<p className="text-sm font-bold text-white transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0 xl:text-base lg:text-lg">
{props.title}
</p>
<p className="text-xs text-white xl:text-base lg:text-lg right-2">
{props.description.substring(0, 300)}
<div className="absolute bottom-0 left-0 p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
<div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
<p className="text-sm font-bold text-white md:text-base lg:text-lg xl:text-xl">
{props.title}
</p>
</div>
<p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
{`${props.description.slice(0, 125)}${props.description.length > 125 ? "..." : ""}`}
</p>
</div>
</div>