center items and make fixed size, hidden behaviour

App.css

@@ -1,14 +1,30 @@
-.App {
-  text-align: center;
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;  
+  overflow-x: hidden;
+}
+
+#app {
+  width: 100%;
+  min-width: 1800px;
+  box-sizing: border-box;
 }
 
+
 .inputBox {
   width: 30%;
   margin: 20px auto;
   padding: 20px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px #ccc;
   transition: all 0.5s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .inputBox.active {
@@ -41,7 +57,7 @@ input {
   box-shadow: 0 0 10px #ccc;
   transition: all 0.5s ease-in-out;
   color: #333;
-  word-break: break-all;
+  word-wrap: break-word;
 }
 
 .eventBox.waiting {

src/components/InputKeys/index.tsx

@@ -79,7 +79,7 @@ const InputBox: React.FC<InputBoxProps> = ({ onSubmit }) => {
           disabled={isSubmitted}
         />
         {pendulumError && <div style={{ color: 'red' }}>{pendulumError}</div>}
-        {!isSubmitted ? <button onClick={handleSubmit}>Begin Offramp</button> : <div>Started</div>}
+        {!isSubmitted ? <button onClick={handleSubmit}>Begin Offramp</button> : <div>Offramp Started</div>}
       </div>
     </div>
   );