Make fully responsive with better media queries (not just 420px mobile)

frontend/src/App.vue

@@ -137,7 +137,7 @@
 						Login
 					</div>
 				</template>
-				<search-box></search-box>
+				<search-box header-bar='true'></search-box>
 			</div>
 			<div class='header__overlay' :class='{ "header__overlay--show": showMenu }' @click='toggleMenu'></div>
 			<span class='fa fa-bars header__menu_button' @click='toggleMenu'></span>
@@ -472,13 +472,18 @@
 		@include user-select(none);
 		cursor: pointer;
 		background: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 20rem;
+
 
 		&:hover, &:visited, &:active {
 			color: $color__text--primary;
 		}
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: 870px) {
 		.route_container {
 			width: calc(100% - 2rem);
 			margin: 0 1rem;
@@ -488,6 +493,7 @@
 		.logo {
 			position: relative;
 			z-index: 2;
+			max-width: calc(100vw - 7rem);
 		}
 
 		.header__menu_button {

frontend/src/assets/scss/variables.scss

@@ -32,6 +32,51 @@ $color__red--primary: #e74860;
 $color__red--darker: #B71C1C;
 
 
+//Breakpoints
+$breakpoint--large_screen: 1200px;
+$breakpoint--tablet: 870px;
+$breakpoint--phone: 550px;
+
+//Breakpoints
+$breakpoint--large_screen-thread: 1150px;
+$breakpoint--tablet-thread: 850px;
+$breakpoint--phone-thread: 500px;
+
+@mixin thread_mobile_breakpoint ($selector) {
+	@media (max-width: 1150px) and (min-width: $breakpoint--tablet-thread) {
+		#{selector} {
+			width: calc(80% - 5rem);
+		}
+	}
+	@media (max-width: $breakpoint--phone-thread) {
+		#{$selector} {
+			border-radius: 0;
+			border-left: 0;
+			border-right: 0;
+		}
+	}
+	@media (min-width: $breakpoint--tablet-thread) and (max-width: 1150px) {
+		#{$selector} {
+			width: calc(80% - 5rem);
+		}
+	}
+	@media (min-width: $breakpoint--phone-thread) and (max-width: $breakpoint--tablet-thread) {
+		#{$selector} {
+			margin-left: 2rem;
+			margin-riɡht: 2rem;
+			width: calc(100% - 4rem);
+		}
+	}
+	@media (max-width: $breakpoint--phone-thread) {
+		#{$selector} {
+			width: 100%;
+			border-left: 0;
+			border-right: 0;
+			border-radius: 0;
+		}
+	}
+}
+
 @keyframes flash {
 	0% {
 		background-color: $color__gray--darker;

frontend/src/components/MoreThreads.vue

@@ -105,17 +105,10 @@
 		}
 	}
 
-	@media (max-width: 420px) {
-		.more_threads {
-			width: 100%;
-			margin-bottom: -6.5rem;
-			border-radius: 0;
-			border-left: 0;
-			border-right: 0;
-
-			@at-root #{&}__empty {
-				margin-top: 0;
-			}
+	@include thread_mobile_breakpoint ('.more_threads');
+	@media (max-width: $breakpoint--tablet) {
+		@at-root #{&}__empty {
+			margin-top: 0;
 		}
 	} 
 </style>

frontend/src/components/NotificationButton.vue

@@ -428,7 +428,20 @@
 		}
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: 600px) {
+		.notification_button__menu_group {
+			left: calc(3.5rem - 100vw);
+			width: calc(100vw - 0.25rem);
+		}
+		.notification_button__menu {
+			width: 100%;
+			left: unset;
+			right: unset !important;
+
+		}
+	}
+
+	@media (max-width: 870px) {
 		//Because the notification button is
 		//actually a child of the hamburger menu
 		//it 'pops up' when the overlay is showing
@@ -481,8 +494,8 @@
 			}
 
 			@at-root #{&}__menu {
-				width: 100%;
 				left: unset;
+				right: 0.5rem;
 
 				@at-root #{&}__empty {
 					font-weight: normal;

frontend/src/components/SearchBox.vue

@@ -6,6 +6,7 @@
 	>
 		<input
 			class='search_box__field'
+			:class='{ "search_box__field--header": headerBar }'
 			:placeholder='placeholder || "Search this forum"'
 			v-model='searchField'
 		>
@@ -21,7 +22,7 @@
 <script>
 	export default {
 		name: 'SearchBox',
-		props: ['placeholder'],
+		props: ['placeholder', 'header-bar'],
 		data () {
 			return {
 				searchField: ''
@@ -54,6 +55,7 @@
 			height: 100%;
 			padding: 0 0.5rem;
 			border: 0;
+			transition: width 0.2s;
 
 			@include text;
 			color: $color__text--primary;
@@ -75,4 +77,10 @@
 			}
 		}
 	}
+
+	@media (max-width: 950px) and (min-width: $breakpoint--tablet) {
+		.search_box__field--header {
+			width: 4rem;
+		}
+	}
 </style>

frontend/src/components/ThreadPoll.vue

@@ -216,9 +216,5 @@
 		}
 	}
 
-	@media (max-width: 420px) {
-		.poll {
-			width: 100%;
-		}
-	}
+	@include thread_mobile_breakpoint ('.poll');
 </style>

frontend/src/components/routes/Index.vue

@@ -410,7 +410,7 @@
 		}
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: $breakpoint--tablet) {
 		.thread_sorting {
 			flex-direction: column-reverse;
 			align-items: left;
@@ -435,4 +435,10 @@
 			margin-left: 0;
 		}
 	}
+
+	@media (max-width: $breakpoint--tablet) and (min-width: $breakpoint--phone) {
+		.route_container {
+			padding: 1rem 2rem;
+		}
+	}
 </style>

frontend/src/components/routes/Settings.vue

@@ -152,7 +152,15 @@
 		border: thin solid $color__gray--darker;
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: $breakpoint--tablet) and (min-width: $breakpoint--phone) {
+		div.settings_menu, div.settings_page {
+			width: calc(100% - 4rem);
+			margin: 0.5rem 2rem;
+			padding: 1rem;
+		}
+	}
+
+	@media (max-width: $breakpoint--tablet) {
 		.route_container--settings {
 			flex-direction: column;
 		}
@@ -187,7 +195,7 @@
 		}
 
 		.settings_page {
-			width: auto;
+			width: 100%;
 			margin: 0;
 			margin-top: 1rem;
 		}

frontend/src/components/routes/SettingsAccount.vue

@@ -148,7 +148,9 @@
 </script>
 
 <style lang='scss' scoped>
-	@media (max-width: 420px) {
+	@import '../../assets/scss/variables.scss';
+	
+	@media (max-width: $breakpoint--tablet) {
 		.h1 {
 			display: none;
 		}

frontend/src/components/routes/SettingsGeneral.vue

@@ -296,7 +296,7 @@
 		}
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: $breakpoint--tablet) {
 		.h1 {
 			display: none;
 		}

frontend/src/components/routes/Thread.vue

@@ -421,19 +421,59 @@
 
 
 
-	@media (max-width: 420px) {
+	@media (max-width: $breakpoint--phone-thread) {
 		.route_container {
 			width: 100%;
 			margin: 0;
 		}
 
+		.thread_side_bar {
+			margin-left: 1rem;
+		}
+
+		.posts {
+			padding: 0.25rem 0.5rem;
+			border-radius: 0;
+			border-left: 0;
+			border-right: 0;
+		}
+
+		div.thread_header__thread_title {
+			padding-left: 1rem;
+		}
+
+	}
+
+	@media (max-width: $breakpoint--large_screen-thread) {
+		.posts {
+			width: calc(80% - 5rem);
+		}
+	}
+	@media (min-width: $breakpoint--phone-thread) and (max-width: $breakpoint--tablet-thread) {
+		div.posts {
+			margin-left: 2rem;
+			margin-right: 2rem;
+			width: calc(100% - 4rem);
+		}
+
+		div.thread_header__thread_title {
+			font-size: 2rem;
+			padding-left: 2.25rem;
+			width: 100%;
+		}
+		div.thread_side_bar {
+			padding-left: 2.25rem;
+		}
+	}
+
+	@media (max-width: $breakpoint--tablet-thread) {
 		.thread_side_bar {
 			display: flex;
 			position: initial;
 			flex-direction: row;
 			align-items: flex-end;
 
-			padding-left: 1rem;
+			padding-left: 0.25rem;
 
 			> * {
 				margin: 0 0.5rem;
@@ -446,10 +486,6 @@
 
 		.posts {
 			width: 100%;
-			padding: 0.25rem 0.5rem;
-			border-radius: 0;
-			border-left: 0;
-			border-right: 0;
 			overflow: hidden;
 		}
 		.locked_thread {
@@ -458,7 +494,7 @@
 
 		.thread_header__thread_title {
 			font-size: 2rem;
-			padding-left: 1rem;
+			padding-left: 0.25rem;
 			width: 100%;
 		}
 	}

frontend/src/components/routes/ThreadNew.vue

@@ -423,7 +423,7 @@
 		}
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: 600px) {
 		.thread_meta_info {
 			@at-root #{&}__form {
 				flex-direction: column;

frontend/src/components/routes/User.vue

@@ -187,9 +187,10 @@
 		width: 0;
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: $breakpoint--tablet) {
 		.user_route {
 			width: inherit;
+			overflow-x: hidden;
 		}
 		.user__view_holder {
 			flex-direction: column;

frontend/src/components/routes/UserPosts.vue

@@ -125,7 +125,7 @@
 		}
 	}
 
-	@media (max-width: 420px) {
+	@media (max-width: $breakpoint--tablet) {
 		.user_posts {
 			margin-top: 1rem;
 			overflow: hidden;