From 31a5247b9ca52fed91c8ce245fcdaa503881e664 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 23 Jun 2019 16:12:11 +0900
Subject: [PATCH] :art:

---
 .../common/views/deck/deck.notification.vue   | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/client/app/common/views/deck/deck.notification.vue b/src/client/app/common/views/deck/deck.notification.vue
index 8a21bedb9..27a2dffef 100644
--- a/src/client/app/common/views/deck/deck.notification.vue
+++ b/src/client/app/common/views/deck/deck.notification.vue
@@ -4,8 +4,8 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="notification.user | userPage">
+				<mk-reaction-icon :reaction="notification.reaction" class="icon"/>
+				<router-link :to="notification.user | userPage" class="name">
 					<mk-user-name :user="notification.user"/>
 				</router-link>
 				<mk-time :time="notification.createdAt"/>
@@ -22,8 +22,8 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				<fa icon="retweet"/>
-				<router-link :to="notification.user | userPage">
+				<fa icon="retweet" class="icon"/>
+				<router-link :to="notification.user | userPage" class="name">
 					<mk-user-name :user="notification.user"/>
 				</router-link>
 				<mk-time :time="notification.createdAt"/>
@@ -40,8 +40,8 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				<fa icon="user-plus"/>
-				<router-link :to="notification.user | userPage">
+				<fa icon="user-plus" class="icon"/>
+				<router-link :to="notification.user | userPage" class="name">
 					<mk-user-name :user="notification.user"/>
 				</router-link>
 				<mk-time :time="notification.createdAt"/>
@@ -53,9 +53,9 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				<fa icon="user-clock"/>
+				<fa icon="user-clock" class="icon"/>
 				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
+					<mk-user-name :user="notification.user" class="name"/>
 				</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
@@ -66,9 +66,9 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				<fa icon="chart-pie"/>
+				<fa icon="chart-pie" class="icon"/>
 				<router-link :to="notification.user | userPage">
-					<mk-user-name :user="notification.user"/>
+					<mk-user-name :user="notification.user" class="name"/>
 				</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
@@ -137,9 +137,13 @@ export default Vue.extend({
 				align-items baseline
 				white-space nowrap
 
-				[data-icon], .mk-reaction-icon
+				> .icon
 					margin-right 4px
 
+				> .name
+					overflow hidden
+					text-overflow ellipsis
+
 				> .mk-time
 					margin-left auto
 					color var(--noteHeaderInfo)