Merge pull request #683 from pixelfed/frontend-ui-refactor

Update Timeline.vue, fix notification avatar bug

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/components.js": "/js/components.js?id=29cbe1102d14e648aea7",
+    "/js/components.js": "/js/components.js?id=866258c03c0ba1ad76f0",
     "/js/app.js": "/js/app.js?id=4721785cceb8eacd55f1",
     "/css/app.css": "/css/app.css?id=c477745c80d3370e7b29",
     "/js/timeline.js": "/js/timeline.js?id=415bfde862ab8c5b4548",

resources/assets/js/components/Timeline.vue

@@ -156,22 +156,22 @@
 							<div class="media-body font-weight-light small">
 								<div v-if="n.type == 'favourite'">
 									<p class="my-0">
-										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> liked your <a class="font-weight-bold" v-bind:href="replyUrl(n.status)">post</a>.
+										<a :href="n.account.url" class="font-weight-bold text-dark word-break">{{n.account.username}}</a> liked your <a class="font-weight-bold" v-bind:href="replyUrl(n.status)">post</a>.
 									</p>
 								</div>
 								<div v-else-if="n.type == 'comment'">
 									<p class="my-0">
-										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> commented on your <a class="font-weight-bold" v-bind:href="replyUrl(n.status)">post</a>.
+										<a :href="n.account.url" class="font-weight-bold text-dark word-break">{{n.account.username}}</a> commented on your <a class="font-weight-bold" v-bind:href="replyUrl(n.status)">post</a>.
 									</p>
 								</div>
 								<div v-else-if="n.type == 'mention'">
 									<p class="my-0">
-										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)">mentioned</a> you.
+										<a :href="n.account.url" class="font-weight-bold text-dark word-break">{{n.account.username}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)">mentioned</a> you.
 									</p>
 								</div>
 								<div v-else-if="n.type == 'follow'">
 									<p class="my-0">
-										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> followed you.
+										<a :href="n.account.url" class="font-weight-bold text-dark word-break">{{n.account.username}}</a> followed you.
 									</p>	
 								</div>
 							</div>
@@ -211,6 +211,9 @@
 	.cursor-pointer {
 		cursor: pointer;
 	}
+	.word-break {
+		word-break: break-all;
+	}
 </style>
 
 <script type="text/javascript">