From b1443fb0da5d14e6950eb82d6250f579a52bb3f8 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Tue, 30 Sep 2025 12:13:24 +0100
Subject: [PATCH] Tighten landing page file picker layout

---
 .../src/components/shared/LandingPage.css     | 83 +++++++++++++++++++
 .../src/components/shared/LandingPage.tsx     | 60 +++-----------
 2 files changed, 93 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/shared/LandingPage.css

diff --git a/frontend/src/components/shared/LandingPage.css b/frontend/src/components/shared/LandingPage.css
new file mode 100644
index 000000000..663d09625
--- /dev/null
+++ b/frontend/src/components/shared/LandingPage.css
@@ -0,0 +1,83 @@
+.landing-dropzone {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: min(54rem, 88vw);
+  height: 95%;
+  border-radius: 0.25rem 0.25rem 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: var(--drop-shadow-filter);
+  background-color: var(--landing-paper-bg);
+  transition: background-color 0.4s ease;
+}
+
+.landing-dropzone__sheet {
+  position: relative;
+  width: min(100%, 32rem);
+  margin: 0 auto;
+  padding: clamp(1.75rem, 4vw, 2.5rem);
+  border-radius: 0.5rem;
+  border: 1px solid var(--landing-inner-paper-border);
+  background-color: var(--landing-inner-paper-bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(1rem, 2.5vw, 1.5rem);
+  min-height: clamp(24rem, 45vh, 32rem);
+  box-sizing: border-box;
+}
+
+.landing-dropzone__badge {
+  position: absolute;
+  top: clamp(0.75rem, 2vw, 1.25rem);
+  right: clamp(0.75rem, 2vw, 1.25rem);
+  height: clamp(2rem, 4vw, 2.5rem);
+  width: auto;
+  pointer-events: none;
+}
+
+.landing-dropzone__body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(1rem, 2.5vw, 1.5rem);
+}
+
+.landing-dropzone__brand {
+  justify-content: center;
+}
+
+.landing-dropzone__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  width: 100%;
+  max-width: 20rem;
+  margin: clamp(0.5rem, 2vw, 0.9rem) auto;
+}
+
+.landing-dropzone__hint {
+  font-size: 0.8rem;
+  color: var(--accent-interactive);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .landing-dropzone {
+    width: min(95vw, 32rem);
+  }
+
+  .landing-dropzone__sheet {
+    padding: clamp(1.5rem, 6vw, 2rem);
+    min-height: clamp(22rem, 55vh, 30rem);
+  }
+
+  .landing-dropzone__actions {
+    max-width: 100%;
+  }
+}
diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx
index 787b0e565..56d27bd07 100644
--- a/frontend/src/components/shared/LandingPage.tsx
+++ b/frontend/src/components/shared/LandingPage.tsx
@@ -7,6 +7,8 @@ import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import { BASE_PATH } from '../../constants/app';
 
+import './LandingPage.css';
+
 const LandingPage = () => {
   const { addFiles } = useFileHandler();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
@@ -43,17 +45,7 @@ const LandingPage = () => {
         onDrop={handleFileDrop}
         accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
         multiple={true}
-        className="w-4/5 flex items-center justify-center h-[95%]"
-        style={{
-          position: 'absolute',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          bottom: 0,
-          borderRadius: '0.25rem 0.25rem 0 0',
-          filter: 'var(--drop-shadow-filter)',
-          backgroundColor: 'var(--landing-paper-bg)',
-          transition: 'background-color 0.4s ease',
-        }}
+        className="landing-dropzone"
         activateOnClick={false}
         styles={{
           root: {
@@ -63,41 +55,18 @@ const LandingPage = () => {
           },
         }}
       >
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            zIndex: 10,
-
-          }}
-        >
+        <div className="landing-dropzone__sheet dropzone-inner">
           <img
+            className="landing-dropzone__badge"
             src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg` : `${BASE_PATH}/branding/StirlingPDFLogoNoTextLight.svg`}
             alt="Stirling PDF Logo"
-            style={{
-              height: 'auto',
-              pointerEvents: 'none',
-            }}
           />
-        </div>
-        <div
-          className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
-          style={{
-            borderRadius: '0.5rem',
-            backgroundColor: 'var(--landing-inner-paper-bg)',
-            borderColor: 'var(--landing-inner-paper-border)',
-            borderWidth: '1px',
-            borderStyle: 'solid',
-          }}
-        >
-          {/* Logo positioned absolutely in top right corner */}
 
 
           {/* Centered content container */}
-          <div className="flex flex-col items-center gap-4 flex-none w-full">
+          <div className="landing-dropzone__body">
             {/* Stirling PDF Branding */}
-            <Group gap="xs" align="center">
+            <Group gap="xs" align="center" className="landing-dropzone__brand">
               <img
                 src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
                 alt="Stirling PDF"
@@ -107,15 +76,7 @@ const LandingPage = () => {
 
             {/* Add Files + Native Upload Buttons */}
             <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: '0.6rem',
-                width: '80%',
-                marginTop: '0.8rem',
-                marginBottom: '0.8rem'
-              }}
+              className="landing-dropzone__actions"
               onMouseLeave={() => setIsUploadHover(false)}
             >
               <Button
@@ -152,7 +113,7 @@ const LandingPage = () => {
                   border: '1px solid var(--landing-button-border)',
                   borderRadius: '1rem',
                   height: '38px',
-                  width: isUploadHover ? 'calc(100% - 50px)' : '58px',
+                  width: isUploadHover ? 'calc(100% - 58px - 0.6rem)' : '58px',
                   minWidth: '58px',
                   paddingLeft: isUploadHover ? '1rem' : 0,
                   paddingRight: isUploadHover ? '1rem' : 0,
@@ -187,8 +148,7 @@ const LandingPage = () => {
 
           {/* Instruction Text */}
           <span
-            className="text-[var(--accent-interactive)]"
-            style={{ fontSize: '.8rem' }}
+            className="landing-dropzone__hint"
           >
             {t('fileUpload.dropFilesHere', 'Drop files here or click the upload button')}
           </span>