Fixed overflow and dragging problems

src/app/(frontend)/(home)/_components/SponsorBubbles.tsx

@@ -67,12 +67,9 @@ export default function SponsorBubbles({ sponsors }: SponsorProps) {
                 console.error('Failed to load Packery:', error);
             });
     }, [baseSize]);
-    
+
     return (
-        <div
-            className="relative h-[24rem] pt-8 inline-block ml-4 select-none overflow-visible"
-            ref={containerRef}
-        >
+        <div className="relative h-[24rem] pt-8 inline-block ml-4 select-none" ref={containerRef}>
             {sponsors.map((sponsor, index) => {
                 const size = baseSize * sponsor.importance;
 
@@ -105,7 +102,7 @@ export default function SponsorBubbles({ sponsors }: SponsorProps) {
                                 height={size}
                                 width={size}
                                 alt={sponsor.logo.alt || sponsor.name}
-                                className="scale-105 object-cover rounded-full select-none overflow-hidden"
+                                className="scale-105 object-cover rounded-full select-none"
                             />
                         </div>
                     </Link>
@@ -132,4 +129,3 @@ export default function SponsorBubbles({ sponsors }: SponsorProps) {
         </div>
     );
 }
-

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

@@ -20,7 +20,6 @@ export default function HomePage() {
                         textBg="bg-white"
                         textColor="text-primary-red-800"
                         wrapperClassName="skew-y-10 md:skew-y-6 origin-left"
-
                     />
                     <TextMarquee
                         text={'Established in 1998'}

src/app/(frontend)/SessionWrapper.tsx

@@ -1,8 +1,21 @@
-"use client"
+'use client';
+import { useEffect } from 'react';
 
-import { SessionProvider } from "next-auth/react"
+import { SessionProvider } from 'next-auth/react';
+export default function SessionWrapper({ children }: { children: React.ReactNode }) {
+    useEffect(() => {
+        const disableDragging = () => {
+            document.querySelectorAll('a, img').forEach((element) => {
+                element.setAttribute('draggable', 'false');
+            });
+        };
+        disableDragging();
 
+        const observer = new MutationObserver(disableDragging);
+        observer.observe(document.body, { childList: true, subtree: true });
 
-export default function SessionWrapper({ children }: { children: React.ReactNode }) {
-  return <SessionProvider>{children}</SessionProvider>
-}
+        return () => observer.disconnect();
+    }, []);
+
+    return <SessionProvider>{children}</SessionProvider>;
+}

src/app/(frontend)/layout.tsx

@@ -3,13 +3,14 @@ import 'src/styles/global.css';
 import Footer from '../../components/navigation/footer';
 import Navbar from '../../components/navigation/Navbar';
 import LoginButton from '../../components/navigation/LoginButton';
-import {QueryProvider} from "@/lib/tanstack/query-provider";
+import { QueryProvider } from '@/lib/tanstack/query-provider';
 import SessionWrapper from './SessionWrapper';
 
 // SEO metadata
 export const metadata = {
-    description: "Connect, compete, and make lasting memories with the Eastern Students Association. We're a social club bringing students together through events, sports, and campus life at the University of Auckland.",
-    title: "Eastern Students Association",
+    description:
+        "Connect, compete, and make lasting memories with the Eastern Students Association. We're a social club bringing students together through events, sports, and campus life at the University of Auckland.",
+    title: 'Eastern Students Association',
     keywords: [
         'Eastern Students Association',
         'ESA Club',
@@ -19,42 +20,42 @@ export const metadata = {
         'Auckland clubs',
         'uni sports',
         'student social club',
-      ],
-      openGraph: {
-        title: "Eastern Students Association",
-        description: "Connect, compete, and make lasting memories with the Eastern Students Association. We're a social club bringing students together through events, sports, and campus life at the University of Auckland.",
-        url: "https://esa.wdcc.co.nz",
-        siteName: "Eastern Students Association",
+    ],
+    openGraph: {
+        title: 'Eastern Students Association',
+        description:
+            "Connect, compete, and make lasting memories with the Eastern Students Association. We're a social club bringing students together through events, sports, and campus life at the University of Auckland.",
+        url: 'https://esa.wdcc.co.nz',
+        siteName: 'Eastern Students Association',
         images: [
-          {
-            url: "https://esa.wdcc.co.nz/images/logo/esa_logo.png",
-            width: 261,
-            height: 261,
-            alt: "Eastern Students Association logo",
-          },
+            {
+                url: 'https://esa.wdcc.co.nz/images/logo/esa_logo.png',
+                width: 261,
+                height: 261,
+                alt: 'Eastern Students Association logo',
+            },
         ],
-        locale: "en_NZ",
-        type: "website",
-      },
-      icons: {
+        locale: 'en_NZ',
+        type: 'website',
+    },
+    icons: {
         icon: '/images/logo/esa_logo.png',
-      },
+    },
 };
 
 export default async function RootLayout(props: { children: React.ReactNode }) {
     const { children } = props;
-
     return (
         <html lang="en">
             <body className="min-h-screen flex flex-col">
-              <SessionWrapper>
-                <Navbar />
-                <LoginButton />
-                <main className="grow">
-                    <QueryProvider>{children}</QueryProvider>
-                </main>
-                <Footer />
-              </SessionWrapper>
+                <SessionWrapper>
+                    <Navbar />
+                    <LoginButton />
+                    <main className="grow overflow-hidden">
+                        <QueryProvider>{children}</QueryProvider>
+                    </main>
+                    <Footer />
+                </SessionWrapper>
             </body>
         </html>
     );

src/styles/global.css

@@ -108,3 +108,7 @@ p {
 @theme inline {
   --color-destructive: var(--destructive);
 }
+
+img {
+  user-select: none;
+}