Fix touch device broken use cases

static/application.css

@@ -1,6 +1,6 @@
 body {
 	background: #002B36;
-	padding: 20px 50px;
+	padding: 20px 20px 20px 50px;
 	margin: 0px;
 }
 
@@ -17,13 +17,15 @@ textarea {
 	outline: none;
 	resize: none;
 	font-size: 13px;
+	padding-bottom: 95px;
+	overflow-x: hidden;
 }
 
 /* the line numbers */
 
 #linenos {
   color: #7d7d7d;
-	z-index: -1000;
+	/* z-index: -1000; */
 	position: absolute;
 	top: 20px;
 	left: 0px;
@@ -42,8 +44,10 @@ textarea {
 	border: 0px;
 	outline: none;
 	font-size: 13px;
-	padding-right: 360px;
-  overflow: inherit;
+	padding-bottom: 95px;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	box-sizing: border-box;
 }
 
 #box code {
@@ -55,7 +59,7 @@ textarea {
 
 #key {
 	position: fixed;
-	top: 0px;
+	bottom: 0px;
 	right: 0px;
 	z-index: +1000; /* watch out */
 }

static/index.html

@@ -34,38 +34,23 @@
 			$(function() {
 				app = new haste('hastebin', { twitter: true });
 				handlePop({ target: window });
-				responsive();
+				removeBanner();
 			});
 
-			function responsive() {
-				// apply touch device specific style
-				if ("ontouchstart" in document.documentElement) {
-					var mTextAreaStyle = document.createElement('style');
-					mTextAreaStyle.setAttribute('rel', 'stylesheet')
-					mTextAreaStyle.setAttribute('type', 'text/css');
-					document.head.appendChild(mTextAreaStyle);
-					mTextAreaStyle.sheet.insertRule('textarea{ padding-bottom: 95px; }', 0);
-
-					var key = document.getElementById('key');
-					key.style.top = 'auto';
-					key.style.bottom = '0px';
-
+			function removeBanner() {
 				var box1 = document.getElementById('box1');
 				box1.style.transition = 'opacity 1s';
+
 				setTimeout(() => {
 					box1.style.opacity = 0;
 					box1.addEventListener('transitionend', function(event) {
-							box1.parentElement.removeChild(box1)
+						box1.parentElement.removeChild(box1);
 					}, {
 						capture: false,
 						once: true
 					});
-
-						var tArea = document.querySelector('textarea');
-						tArea.style.paddingBottom = '95px';
 				}, 1000);
 			}
-			}
 		</script>
 
 	</head>
@@ -75,6 +60,10 @@
 
 		<div id="key">
 			<div id="pointer" style="display:none;"></div>
+			<div id="box3" style="display:none;">
+				<div class="label"></div>
+				<div class="shortcut"></div>
+			</div>
 			<div id="box1">
 				<a href="/about.md" class="logo"></a>
 			</div>
@@ -85,10 +74,6 @@
 				<button class="raw function button-picture">Just Text</button>
 				<button class="twitter function button-picture">Twitter</button>
 			</div>
-			<div id="box3" style="display:none;">
-				<div class="label"></div>
-				<div class="shortcut"></div>
-			</div>
 		</div>
 
 		<div id="linenos"></div>