Make thread and new thread pages mobile responsive

src/components/InputEditor.vue

@@ -196,4 +196,18 @@
 			}
 		}
 	}
+
+	@media (max-width: 420px) {
+		.input_editor {
+			width: 100%;
+			left: 0;
+
+			@at-root #{&}__reply_username {
+				top: auto;
+				bottom: 0.5rem;
+				left: 0.5rem;
+				width: auto;
+			}
+		}
+	}
 </style>

src/components/ThreadDisplay.vue

@@ -172,4 +172,20 @@
 			word-break: break-all;
 		}
 	}
+
+	@media (max-width: 420px) {
+		.thread_display {
+			@at-root #{&}__header {
+				flex-direction: column;
+			}
+			@at-root #{&}__meta_bar {
+				font-size: 0.9rem;
+				margin-bottom: 0.25rem;
+			}
+
+			@at-root #{&}__content {
+				display: none;
+			}
+		}
+	}
 </style>

src/components/ThreadPoll.vue

@@ -214,4 +214,10 @@
 			}
 		}
 	}
+
+	@media (max-width: 420px) {
+		.poll {
+			width: 100%;
+		}
+	}
 </style>

src/components/routes/Thread.vue

@@ -7,7 +7,21 @@
 			@goToPost='goToPostNotification'
 		></thread-post-notification>
 
-		<div class='thread_side_bar'>
+		<header class='thread_header'>
+			<div
+				class='thread_header__thread_title thread_header__thread_title--app_header'
+				:class='{
+					"thread_header__thread_title--app_header-show": headerTitle
+				}'
+			>
+				{{thread}}
+			</div>
+			<div class='thread_header__thread_title' ref='title'>
+				{{thread}}
+			</div>
+		</header>
+
+				<div class='thread_side_bar'>
 			<loading-button
 				class='button--thin_text'
 				:class='{ "button--disabled" : !$store.state.thread.selectedPosts.length }'
@@ -45,19 +59,7 @@
 				@input='goToPost'
 			></post-scrubber>
 		</div>
-		<header class='thread_header'>
-			<div
-				class='thread_header__thread_title thread_header__thread_title--app_header'
-				:class='{
-					"thread_header__thread_title--app_header-show": headerTitle
-				}'
-			>
-				{{thread}}
-			</div>
-			<div class='thread_header__thread_title' ref='title'>
-				{{thread}}
-			</div>
-		</header>
+
 		<input-editor
 			v-model='editor'
 
@@ -426,4 +428,30 @@
 		padding: 0.5rem 1rem;
 		border-radius: 0.25rem;
 	}
+
+
+
+	@media (max-width: 420px) {
+		.thread_side_bar {
+			position: initial;
+			display: flex;
+			flex-direction: row-reverse;
+
+			.post_scrubber {
+				display: none;
+			}
+		}
+
+		.posts {
+			width: 100%;
+			padding: 0.25rem 0.5rem;
+			box-shadow: 0 0 0.3rem rgba(175, 175, 175, 0.25);
+		}
+		.locked_thread {
+			width: 100%;
+		}
+		.thread_header__thread_title--app_header {
+			display: none;
+		}
+	}
 </style>

src/components/routes/ThreadNew.vue

@@ -9,16 +9,21 @@
 				placeholder='Thread title'
 				v-model='name'
 				:error='errors.name'
-				style='margin: 0 0.5rem; display: inline-block;'
+				class='thread_meta_info__title'
 				large='true'
 				width='15rem'
 			></fancy-input>
 			
-			<button class='button button--thin_text' v-if='!showPoll' @click='togglePoll(true)'>Add poll</button>
+			<button
+				class='thread_meta_info__add_poll button button--thin_text'
+				v-if='!showPoll'
+				@click='togglePoll(true)'
+			>Add poll</button>
 			<transition name='slide'>
 				<div class='thread_meta_info__poll' v-if='showPoll'>
 					<div class='thread_meta_info__poll__top_bar'>
 						<fancy-input
+							class='thread_meta_info__poll__question'
 							v-model='pollQuestion'
 							placeholder='Poll question'
 							width='20rem'
@@ -276,6 +281,16 @@
 		padding: 1rem;
 		margin: 1rem 0;
 
+		@at-root #{&}__title {
+			margin: 0 0.5rem;
+			margin-top: 0.5rem;
+			display: inline-block;
+		}
+
+		@at-root #{&}__add_poll {
+			margin-top: 0.5rem;
+		}
+
 		@at-root #{&}__text {
 			margin-bottom: 0.5rem;
 		}
@@ -284,6 +299,7 @@
 			border-top: thin solid $color__gray--primary;
 			margin-top: 1rem;
 			padding-top: 0.75rem;
+			position: relative;
 
 			@at-root #{&}__top_bar {
 				display: flex;
@@ -362,4 +378,35 @@
 			}
 		}
 	}
+
+	@media (max-width: 420px) {
+		.thread_meta_info {
+			@at-root #{&}__title.fancy_input {
+				margin: 0;
+				margin-top: 0.5rem;
+			}
+
+			@at-root #{&}__poll__top_bar .button {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+			}
+			@at-root #{&}__poll__question {
+				width: 100%;
+
+				> div, input {
+					width: 100% !important;
+				}
+			}
+		}
+
+		.editor {
+			flex-direction: column;
+
+			@at-root #{&}__input, #{&}__preview {
+				border: 0;
+				width: 100%;
+			}
+		}
+	}
 </style>