From c35c66abbc373e137d6e0c3786c4458cdc9c851d Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Tue, 30 Sep 2025 12:48:51 +0100
Subject: [PATCH] Fix mobile view toggles and restore desktop dropzone width

---
 frontend/src/components/shared/LandingPage.css | 10 ++++++++--
 frontend/src/pages/HomePage.tsx                | 11 +++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/shared/LandingPage.css b/frontend/src/components/shared/LandingPage.css
index 663d09625..aa99a5941 100644
--- a/frontend/src/components/shared/LandingPage.css
+++ b/frontend/src/components/shared/LandingPage.css
@@ -16,7 +16,7 @@
 
 .landing-dropzone__sheet {
   position: relative;
-  width: min(100%, 32rem);
+  width: min(100%, 34rem);
   margin: 0 auto;
   padding: clamp(1.75rem, 4vw, 2.5rem);
   border-radius: 0.5rem;
@@ -57,7 +57,7 @@
   justify-content: center;
   gap: 0.6rem;
   width: 100%;
-  max-width: 20rem;
+  max-width: min(100%, 30rem);
   margin: clamp(0.5rem, 2vw, 0.9rem) auto;
 }
 
@@ -81,3 +81,9 @@
     max-width: 100%;
   }
 }
+
+@media (min-width: 901px) {
+  .landing-dropzone__sheet {
+    width: 36rem;
+  }
+}
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 48b90b614..004cb4ede 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -47,14 +47,21 @@ export default function HomePage() {
       const container = sliderRef.current;
       if (!container) return;
 
-      const offset = view === "tools" ? 0 : container.clientWidth;
+      const offsetWidth = container.getBoundingClientRect().width || container.clientWidth;
+      const maxOffset = Math.max(0, container.scrollWidth - container.clientWidth);
+      const offset = view === "tools" ? 0 : Math.max(0, Math.min(maxOffset, offsetWidth));
 
       if (behavior === "auto") {
         container.scrollLeft = offset;
         return;
       }
 
-      container.scrollTo({ left: offset, behavior });
+      if (typeof container.scrollTo === "function") {
+        container.scrollTo({ left: offset, behavior });
+        return;
+      }
+
+      container.scrollLeft = offset;
     },
     []
   );