From c111a16a3423e31a42fd2de8ec77b27c18de45aa Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Wed, 12 Oct 2022 22:42:26 -0400
Subject: [PATCH] Tweak for mobile.

---
 src/components/style.css | 18 ++++++++++++++++++
 src/index.css            | 16 ----------------
 src/index.js             |  6 +++---
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/style.css b/src/components/style.css
index 8218caa..72e9ef8 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -23,7 +23,25 @@
   margin-bottom: 0;
 }
 
+.big-input {
+  font-size: 150%;
+  padding: 0.5em;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgba(255, 255, 255, 0.15);
+  color: white;
+  font-weight: bold;
+}
+
+.big-input[type="submit"] {
+  padding-left: 1em;
+  padding-right: 1em;
+}
 @media (orientation:portrait) {
+  .big-input {
+    font-size: 120%;
+  }
   .popup-inner {
     left: 5%;
     right: 5%;
diff --git a/src/index.css b/src/index.css
index 6d278fe..1266b92 100644
--- a/src/index.css
+++ b/src/index.css
@@ -111,20 +111,4 @@ ol, ul {
 .icon:hover {
   opacity: 1;
   margin-top: -0.35em;
-}
-
-.big-input {
-  font-size: 150%;
-  padding: 0.5em;
-  background-color: rgba(255, 255, 255, 0.1);
-  border-style: solid;
-  border-width: 1px;
-  border-color: rgba(255, 255, 255, 0.15);
-  color: white;
-  font-weight: bold;
-}
-
-.big-input[type="submit"] {
-  padding-left: 1em;
-  padding-right: 1em;
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f5a0e73..d11fd5f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,10 +31,10 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit} style={{ marginBottom: '15em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         <label htmlFor='lobby-name'>
-          <h1 className='white-on-light' style={{ fontSize: '5rem' }}>Lobby Name:</h1>
+          <h1 className='white-on-light' style={{ fontSize: '5rem', textAlign: 'center' }}>Lobby Name:</h1>
         </label>
-        <div>
-          <input className='big-input' name='lobby-name' type="text" value={this.state.value} onChange={this.handleChange} />
+        <div style={{ textAlign: 'center', width: '80%' }}>
+          <input className='big-input' style={{ width: '50%' }} name='lobby-name' type="text" value={this.state.value} onChange={this.handleChange} />
           <input className='big-input' style={{ marginLeft: '8px' }} type="submit" value="Submit" />
         </div>
       </form>