diff --git a/www/assets/style.css b/www/assets/style.css
index e751212..7beb67e 100644
--- a/www/assets/style.css
+++ b/www/assets/style.css
@@ -4,21 +4,9 @@
 	background-color: rgba(158,158,158,0.2);
 }
 
-md-card-content.terminal {
-    background-color: rgb(113, 113, 113);
-    padding: 0;
-}
-
-.terminal {
-    background-color: rgb(113, 113, 113);
-}
-
-.terminal .xterm-viewport {
-    background-color: rgb(113, 113, 113);
-}
-
-.terminal .xterm-rows {
+md-card-content.terminal-container {
     background-color: #000;
+    padding: 0;
 }
 
 .clock {
diff --git a/www/assets/xterm.css b/www/assets/xterm.css
index 435cf0e..4877f86 100644
--- a/www/assets/xterm.css
+++ b/www/assets/xterm.css
@@ -61,9 +61,14 @@
     position: absolute;
     opacity: 0;
     left: -9999em;
+    top: 0;
     width: 0;
     height: 0;
     z-index: -10;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
 }
 
 .terminal .terminal-cursor {
@@ -117,6 +122,11 @@
     top: 0;
 }
 
+.terminal .xterm-rows > div {
+    /* Lines containing spans and text nodes ocassionally wrap despite being the same width (#327) */
+    white-space: nowrap;
+}
+
 .terminal .xterm-scroll-area {
     visibility: hidden;
 }
diff --git a/www/index.html b/www/index.html
index 39bed2e..e2f25b8 100644
--- a/www/index.html
+++ b/www/index.html
@@ -100,7 +100,7 @@
                           </md-card-actions>
                   </md-card>
                   <md-card flex md-theme="default" md-theme-watch >
-                      <md-card-content flex id="terminal-{{instance.name}}" class="terminal">
+                      <md-card-content flex id="terminal-{{instance.name}}" class="terminal-container">
                       </md-card-content>
                   </md-card>
               </md-content>