Fix responsive button and remove extra spacing on mobile screens

Author: hafsa

package-lock.json

@@ -28,7 +28,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write \"./**/*.{js,css,json,scss}\"",
-    "check-format": "prettier -c \"./**/*.{js,css,json,scss}\""
+    "check-format": "prettier -c \"./**/*.{js,css,json,scss}\"",
+    "dev": "react-scripts start"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -52,7 +53,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "dotenv": "^8.2.0",
+    "dotenv": "^8.6.0",
     "prettier": "^2.3.1"
   }
 }

package.json

@@ -40,8 +40,17 @@
     margin-right: 0px;
   }
 }
+
 @media (max-width: 320px) {
   .main-button {
     font-size: 0.75rem;
   }
 }
+
+@media (max-width: 435px) {
+  .main-button {
+   font-size: 12px;
+   margin-right: 15px;
+   
+  }
+}

src/components/button/Button.scss

@@ -34,3 +34,13 @@ body {
     line-height: normal;
   }
 }
+
+
+/* hide the overflow  */
+@media (max-width: 400px) {
+  html,
+  body {
+   overflow-x: hidden;
+   overflow-y: auto;
+  }
+}