fix: s20 ultra overflow

delta · Dec 14, 2023 · 18c6bfd · 18c6bfd
1 parent 020215e
commit 18c6bfd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
@@ -1,11 +1,12 @@
+'use client';
 import { NavBar, SponsorButton, SponsorCard } from '@/components';
 import styles from './sponsors.module.css';
 import Image from 'next/image';
 
 import astronaut from '../../assets/images/astronaut.svg';
 
 export default function Sponsors() {
-    const sponsorsList: SponsorCardProps[] = [];
+    const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' });
 
     // backend logic
     //  sponsorsList =   await(await fetch("backend url",{next:{tags:['collection']}})).json();

diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css
@@ -122,7 +122,7 @@
   align-items: center;
 
   @media screen and (max-width:560px) {
-    transform: translate(10%, -45%);
+    transform: translate(10%, -55%);
     margin-top: 60px;
   }
 }
@@ -139,10 +139,7 @@
   gap: 115px;
   justify-content: center;
 
-  @media screen and (max-width:560px) {
-    flex-wrap: nowrap;
-    flex-direction: column;
-    align-items: center;
+  @media screen and  (max-width:560px) {
     gap: 5px;
   }
 }
@@ -163,8 +160,12 @@
   align-items: center;
   overflow-y: scroll;
 
+  @media screen and (max-width:560px) {
+    padding: 0px;
+  }
 
 }
+
 .parentList::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx
@@ -13,24 +13,27 @@ const SponsorCard = ({ name, logo }: SponsorCardProps) => {
     useEffect(() => {
         setDim(window.innerWidth < 560 ? 0.65 : 1);
     }, []);
+
     return (
-        <motion.div className={styles.parent} initial={{ scale: dim }}>
-            <div className={styles.borderOverlay}>
-                <div className="flex w-full justify-between">
-                    <Image src={topLeftBorder} alt="" className={styles.topLeftBorder} />
-                    <Image src={topRightBorder} alt="" className={styles.topRightBorder} />
-                </div>
-                <Image src={bottomBorder} alt="" className={styles.bottomBorder} />
-            </div>
-            <div className={styles.sponsorParent}>
-                <div className={styles.title}>
-                    <div className={styles.titleBorder}>{name} </div>
+        <>
+            <motion.div className={styles.parent} animate={{ scale: dim }}>
+                <div className={styles.borderOverlay}>
+                    <div className="flex w-full justify-between">
+                        <Image src={topLeftBorder} alt="" className={styles.topLeftBorder} />
+                        <Image src={topRightBorder} alt="" className={styles.topRightBorder} />
+                    </div>
+                    <Image src={bottomBorder} alt="" className={styles.bottomBorder} />
                 </div>
-                <div className={styles.body}>
-                    {logo != '' && <Image src={logo} alt={name} width={400} height={400} />}
+                <div className={styles.sponsorParent}>
+                    <div className={styles.title}>
+                        <div className={styles.titleBorder}>{name} </div>
+                    </div>
+                    <div className={styles.body}>
+                        {logo != '' && <Image src={logo} alt={name} width={400} height={400} />}
+                    </div>
                 </div>
-            </div>
-        </motion.div>
+            </motion.div>
+        </>
     );
 };
 export default SponsorCard;