diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 1c45341d..3ff70e47 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -75,6 +75,11 @@
   font-size: 1.2rem;
 }
 
+.md-div pre {
+  white-space: pre;
+  overflow-x: auto;
+}
+
 .md-div table {
   border-collapse: collapse;
   width: 100%;
diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 87ef234e..94915542 100644
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -195,7 +195,7 @@ export class Login extends Component<any, State> {
   }
 
   handleLoginUsernameChange(i: Login, event: any) {
-    i.state.form.username_or_email = event.target.value;
+    i.state.form.username_or_email = event.target.value.trim();
     i.setState(i.state);
   }
 
diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index 581c1c56..14350a58 100644
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -221,7 +221,7 @@ export class Setup extends Component<any, State> {
   }
 
   handleRegisterUsernameChange(i: Setup, event: any) {
-    i.state.form.username = event.target.value;
+    i.state.form.username = event.target.value.trim();
     i.setState(i.state);
   }
 
diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 3efeac62..16a3cc6d 100644
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -496,7 +496,7 @@ export class Signup extends Component<any, State> {
   }
 
   handleRegisterUsernameChange(i: Signup, event: any) {
-    i.state.form.username = event.target.value;
+    i.state.form.username = event.target.value.trim();
     i.setState(i.state);
   }