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