Fix CSS overflow issue and cleaned up css

Author: NotYourTypicalDeveloper

src/App.css

@@ -1,31 +1,14 @@
+body {
+  background-image: radial-gradient(#67f0c3 2px, transparent 1px);
+  background-size: 45px 45px;
+  background-color: #a589f3;
+}
+
 .app-container {
   height: 100vh;
   width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
-  background-image: radial-gradient(#67f0c3 2px, transparent 1px);
-  background-size: 45px 45px;
-  background-color: #a589f3;
-}
-
-.bot-wrapper {
-  padding-right: 1rem;
-  padding-left: 1rem;
-  width: 700px;
-}
-
-/* between tablet and mobile */
-@media screen and (max-width: 521px) {
-  .bot-wrapper {
-    width: 430px;
-  }
-}
-
-/* laptop */
-@media screen and (min-width: 1024px) {
-  .bot-wrapper {
-    width: 520px;
-  }
 }

src/App.js

@@ -1,9 +1,9 @@
 import React from "react";
-import "./App.css";
 import Chatbot from "react-simple-chatbot";
+import "./App.css";
 import steps from "./MAIN-steps.js";
-import userImg from "./assets/user1.jpg";
 import chatbotImg from "./assets/chatbot-logo-bg.jpg";
+import userImg from "./assets/user1.jpg";
 
 function App() {
   const stepsWithDelay = steps.map((step) => {
@@ -19,17 +19,15 @@ function App() {
 
   return (
     <div className="app-container">
-      <div className="bot-wrapper">
-        <Chatbot
-          steps={stepsWithDelay}
-          bubbleOptionStyle={{ backgroundColor: "white", color: "#b317b9" }}
-          userAvatar={userImg}
-          botAvatar={chatbotImg}
-          headerTitle={`Caroline's chatbot`}
-          width="100%"
-          height="100%"
-        />
-      </div>
+      <Chatbot
+        steps={stepsWithDelay}
+        bubbleOptionStyle={{ backgroundColor: "white", color: "#b317b9" }}
+        userAvatar={userImg}
+        botAvatar={chatbotImg}
+        headerTitle={`Caroline's chatbot`}
+        width="500px"
+        height="700px"
+      />
     </div>
   );
 }