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"
>