Fix overflow issues with long user input

frontend/src/components/ThreadDisplay.vue

@@ -8,7 +8,7 @@
 
 			@click='goToUser'
 		></avatar-icon>
-		<div style='width: 100%;' @click='goToThread'>
+		<div style='width: calc(100% - 3rem);' @click='goToThread'>
 			<div class='thread_display__header'>
 				<span class='thread_display__name'>
 					{{thread.name}}
@@ -16,7 +16,7 @@
 				<div class='thread_display__meta_bar'>
 					<div>
 						By
-						<span class='thread_display__username' ref='username'>{{threadUsername}}</span>
+						<span class='thread_display__username' ref='username'>{{threadUsername | truncateMid(25)}}</span>
 						in
 						<span class='thread_display__category' ref='category'>{{thread.Category.name}}</span>
 						&middot;
@@ -119,11 +119,16 @@
 			@at-root #{&}__name {
 				font-weight: 500;
 				font-size: 1.25rem;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				line-height: 1.5rem;
+				height: 1.5rem;
 			}
 			@at-root #{&}__meta_bar {
-				display: flex;
 				color: $color--gray__darkest;
-				justify-content: space-between;
+				flex-shrink: 0;
+				line-height: 1.5rem;
+				height: 1.5rem;
 			}
 
 		@at-root #{&}__replies_bar {

frontend/src/components/ThreadPoll.vue

@@ -135,6 +135,7 @@
 		@at-root #{&}__question {
 			font-weight: bold;
 			font-size: 1.125rem;
+			word-break: break-all;
 		}
 
 		@at-root #{&}__answers, #{&}__results {
@@ -149,6 +150,8 @@
 			cursor: pointer;
 			transition: all 0.2s;
 			position: relative;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
 			&::after {
 				content: '';
@@ -192,6 +195,7 @@
 		}
 		@at-root #{&}__result {
 			margin: 0.5rem 0;
+			word-break: break-all;
 
 			@at-root #{&}__info {
 				color: $color__text--secondary;

frontend/src/components/routes/Thread.vue

@@ -407,9 +407,10 @@
 		justify-content: space-between;
 
 		@at-root #{&}__thread_title {
-			@include text($font--role-default, 3rem, 400);
-			width: calc(100% - 8rem);
+			@include text($font--role-default, 2rem, 400);
+			width: 80%;
 			margin-bottom: 1rem;
+			word-break: break-all;
 		}
 	}
 
@@ -484,7 +485,11 @@
 			width: 100%;
 		}
 		div.thread_side_bar {
-			padding-left: 2.25rem;
+			padding-left: 2rem;
+
+			&> :first-child {
+				margin-left: 0;
+			}
 		}
 	}
 
@@ -499,8 +504,11 @@
 			flex-direction: row;
 			align-items: flex-end;
 
-			padding-left: 0.25rem;
+			margin-left: 1rem;
 
+			& > :first-child {
+				margin-left: 0;
+			}
 			> * {
 				margin: 0 0.5rem;
 			}

frontend/src/main.js

@@ -165,7 +165,17 @@ Vue.filter('truncate', function (value, length) {
 	if(value.length <= length) {
 		return value
 	} else {
-		return value.slice(0, length) + '...'
+		return value.slice(0, length) + '…'
+	}
+});
+Vue.filter('truncateMid', function (value, length) {
+	if(value.length <= length) {
+		return value
+	} else {
+		let firstLen = Math.round(length/2);
+		let secondLen = length - firstLen;
+
+		return value.slice(0, firstLen) + '…' + value.slice(value.length-secondLen, value.length)
 	}
 });