From 994f160f034ee1885933122f8301b23ea8ab8087 Mon Sep 17 00:00:00 2001
From: Chigozirim Igweamaka <cgzirim@gmail.com>
Date: Sat, 25 May 2024 14:30:15 +0100
Subject: [PATCH] Move submit button down on smaller devices.

---
 client/src/components/Form.js                |  9 +++++++--
 client/src/components/styles/Form.module.css | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form.js b/client/src/components/Form.js
index 7ffc6dc..0240768 100644
--- a/client/src/components/Form.js
+++ b/client/src/components/Form.js
@@ -39,7 +39,7 @@ const Form = ({ socket }) => {
   return (
     <form className={styles.Form} onSubmit={submitForm}>
       <div style={{ flexGrow: 1 }}>
-        <div>Add songs to the server</div>
+        <div>Add new songs</div>
         <input
           type="text"
           name="spotifyUrl"
@@ -49,7 +49,12 @@ const Form = ({ socket }) => {
           onChange={handleChange}
         />
       </div>
-      <input type="submit" value="Submit" onClick={submitForm} />
+      <input
+        className={styles.Submit}
+        type="submit"
+        value="Submit"
+        onClick={submitForm}
+      />
     </form>
   );
 };
diff --git a/client/src/components/styles/Form.module.css b/client/src/components/styles/Form.module.css
index 623beb5..abdac67 100644
--- a/client/src/components/styles/Form.module.css
+++ b/client/src/components/styles/Form.module.css
@@ -7,7 +7,8 @@ Form {
     align-items: flex-end;
     justify-content: center;
   }
-  
+
+
   @media screen and (max-width: 550px) {
     Form {
       width: 100%;
@@ -18,3 +19,16 @@ Form {
       justify-content: center;
     }
   }
+
+
+  @media screen and (max-width: 750px) {
+    Form {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    Form input,Form div {
+      width: 100%;
+      display: block;
+    }
+  }