Various bug fixes (#230)

* fix: moved mobile nav menu up by a few pixels

* fix: event location text breaks on mobile

* fix: fixed a bug where background star in contact form was overflowing

Author: VoxelFS

src/app/(frontend)/contact/_components/ContactForm.tsx

@@ -52,17 +52,6 @@ export default function ContactForm() {
 
     return (
         <div className="text-center text-primary-white flex flex-col items-center w-full">
-            {/* Background star */}
-            <div className="absolute bottom-0 -right-50 -z-10 overflow-hidden">
-                <Image
-                    src="/images/signup/background_star.png"
-                    alt="background star red"
-                    width={700}
-                    height={700}
-                    className="w-[650px]"
-                />
-            </div>
-
             <h3 className="underline underline-offset-4 mb-2">Let’s have a chat!</h3>
             <p className="mb-6 max-w-[60%]">
                 We’d love to hear from you! You can contact us with the form below or send us an

src/app/(frontend)/contact/page.tsx

@@ -3,7 +3,7 @@ import ContactForm from '@/app/(frontend)/contact/_components/ContactForm';
 
 export default function ContactPage() {
     return (
-        <section className="flex justify-center lg:px-[13%] md:px-[10%] px-[6%] h-full py-28 w-full">
+        <section className="relative flex justify-center lg:px-[13%] md:px-[10%] px-[6%] h-full py-28 w-full">
             <div className="flex flex-col md:flex-row items-stretch xl:items-center w-full">
                 <div className="mb-8 md:mb-0 md:mr-8 flex-1 flex md:w-[38%] lg:w-[40%] w-full">
                     <Image
@@ -17,10 +17,19 @@ export default function ContactPage() {
                         priority
                     />
                 </div>
-                <div className="w-full md:w-[62%] lg:w-[60%]">
+                <div className="w-full md:w-[62%] lg:w-[60%] overflow-hidden">
                     <ContactForm />
                 </div>
             </div>
+            {/* Background star */}
+            <div className="absolute -bottom-50 -right-70 -z-10">
+                <Image
+                  src="/images/signup/background_star.png"
+                  alt="background star red"
+                  width={700}
+                  height={700}
+                />
+            </div>
         </section>
     );
 }

src/components/navigation/Navbar.tsx

@@ -97,7 +97,7 @@ export default function Navbar() {
                                 animate={{ x: 1 }}
                                 exit={{ x: -150 }}
                                 transition={{ duration: 0.1 }}
-                                className="absolute -top-[7px] -left-[1px] mt-2 w-40 rounded-lg bg-primary-grey-light z-40"
+                                className="absolute -top-[8px] -left-[1px] mt-2 w-40 rounded-lg bg-primary-grey-light z-40"
                             >
                                 <div className="flex flex-col pt-18 pb-4 px-5 space-y-3 font-roboto-mono text-primary-white">
                                     {links.map((link) => (

src/features/events/components/EventCard.tsx

@@ -117,35 +117,35 @@ export default function EventCard({
                                 {!event.locked ? event.title : 'Locked Event'}
                             </h4>
                             <div className="flex justify-between gap-x-5">
-                                <div className="relative w-[185px] md:w-full h-[231px] md:h-[520px] rounded-3xl overflow-hidden shadow-lg">
-                                    <Image
-                                        src={event.image}
-                                        alt={event.imageAlt}
-                                        fill
-                                        priority
-                                        className={`object-cover ${event.locked ? 'blur-sm' : ''}`}
-                                        draggable={false}
-                                    />
-                                    {event.locked && (
+                                <div className="relative aspect-[3/4] w-[185px] md:w-80 shrink-0 rounded-3xl overflow-hidden shadow-lg">
                                         <Image
-                                            src="/images/home/lock.png"
-                                            alt="Locked"
-                                            width={80}
-                                            height={80}
+                                            src={event.image}
+                                            alt={event.imageAlt}
+                                            fill
+                                            priority
+                                            className={`object-cover ${event.locked ? 'blur-sm' : ''}`}
                                             draggable={false}
-                                            className="absolute inset-0 m-auto z-10"
                                         />
-                                    )}
+                                        {event.locked && (
+                                            <Image
+                                                src="/images/home/lock.png"
+                                                alt="Locked"
+                                                width={80}
+                                                height={80}
+                                                draggable={false}
+                                                className="absolute inset-0 m-auto z-10"
+                                            />
+                                        )}
+                                    </div>
+                                    <EventInfo
+                                        event={event}
+                                        dateString={dateString}
+                                        className="md:hidden"
+                                    />
                                 </div>
-                                <EventInfo
-                                    event={event}
-                                    dateString={dateString}
-                                    className="md:hidden"
-                                />
-                            </div>
 
-                            {/* Right panel matches image height */}
-                            <div className="flex flex-col w-full h-full md:h-[520px] rounded-3xl !bg-transparent !border-none">
+                                {/* Right panel matches image height */}
+                                <div className="flex flex-col w-full h-full md:h-[520px] rounded-3xl !bg-transparent !border-none">
                                 <div>
                                     <div className="hidden md:flex justify-between items-center">
                                         <h4 className="font-bold leading-tight">
@@ -191,14 +191,14 @@ export default function EventCard({
             <div
                 className={`mt-3 md:justify-end ${even ? 'justify-end' : 'justify-start'} flex`}
                 style={{ display: isSeeMoreVisible ? 'flex' : 'none' }}
-                >
+            >
                 <Button
                     variant="clear"
                     size="sm"
                     className="flex justify-center gap-3 px-4 py-2 whitespace-nowrap bg-primary-grey/80"
                     onClick={() => setExpanded(!expanded)}
                     aria-expanded={expanded}
-                    >
+                >
                     {expanded ? 'See less' : 'See more'}
                     {expanded ? <ChevronUp strokeWidth={2.5} /> : <ChevronDown strokeWidth={2.5} />}
                 </Button>

src/features/events/components/EventInfo.tsx

@@ -26,9 +26,11 @@ export default function EventInfo({ event, className, dateString }: { event: Eve
                 <span className="flex flex-row items-center whitespace-nowrap">
                     <DollarSign /> {event.nonMemberPrice} (Non-Members)
                 </span>
-                <span className="flex flex-row items-center whitespace-nowrap">
-                    <MapPin className="mr-1" />
+                <span className="flex items-start">
+                  <MapPin className="mt-0.5 mr-1 shrink-0"/>
+                  <span className="break-words">
                     {event.location}
+                  </span>
                 </span>
             </div>
         </div>