From ddd901c49b3cd99c38a9b724d5c503b849de5d19 Mon Sep 17 00:00:00 2001 From: Jesse Winton <jesse@appwrite.io> Date: Tue, 28 Jan 2025 12:15:51 -0500 Subject: [PATCH] fix overflow --- .../partners/(components)/partners.svelte | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/routes/partners/(components)/partners.svelte b/src/routes/partners/(components)/partners.svelte index 42cdfae188..0f012a521c 100644 --- a/src/routes/partners/(components)/partners.svelte +++ b/src/routes/partners/(components)/partners.svelte @@ -43,16 +43,16 @@ use:useInView > <div - class="container relative z-10 mx-auto flex w-full flex-col items-center justify-between gap-16 md:flex-row" + class="container relative z-10 mx-auto flex w-full flex-col items-center justify-between gap-16 px-0 md:flex-row" > <div class="flex max-w-lg flex-col gap-8 px-8"> <div class="flex flex-col gap-4"> <h1 class="font-aeonik-pro text-title text-primary text-pretty">Partner Tiers</h1> <p class="text-body text-secondary text-pretty font-medium"> - As you continue to grow, so do your opportunities with Appwrite. - Our Partner Program is designed to scale with you as you grow. - With flexible tiers tailored to your success. A partnership built to - scale together for lasting success in a competitive market. + As you continue to grow, so do your opportunities with Appwrite. Our Partner + Program is designed to scale with you as you grow. With flexible tiers tailored + to your success. A partnership built to scale together for lasting success in a + competitive market. </p> </div> @@ -63,12 +63,18 @@ </div> </div> - <div class="mask relative overflow-hidden px-8" style:--mask-height="150px"> + <div + class="mask relative max-w-[100vw] overflow-hidden md:px-8" + style:--mask-height="150px" + > {#each tiers as { title, icon }, i} <div - class={classNames('relative h-fit min-w-md rounded-3xl opacity-0', { - animate - })} + class={classNames( + 'relative h-fit min-w-[98vw] rounded-3xl opacity-0 md:min-w-md', + { + animate: 'opacity-100' + } + )} style:z-index={tiers.length - i} style:animation-delay="{i * 0.1}s" >