Tweak for mobile.

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%;

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;
 }

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>
+        <div style={{ textAlign: 'center', width: '80%' }}>
-          <input className='big-input' name='lobby-name' type="text" value={this.state.value} onChange={this.handleChange} />
+          <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>