Better renote annotation rendering

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>

src/client/app/desktop/views/components/notes.note.vue

@@ -4,7 +4,6 @@
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<p>
 		<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
 			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 		</router-link>
@@ -12,7 +11,6 @@
 		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
 		<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
 		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
@@ -324,13 +322,12 @@ root(isDark)
 			border-radius 4px
 
 	> .renote
-		color #9dbb00
+		display flex
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		align-items baseline
-
-		> p
-			margin 0
 		padding 16px 32px
 		line-height 28px
+		color #9dbb00
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
 		.avatar-anchor
 			display inline-block
@@ -345,15 +342,24 @@ root(isDark)
 		[data-fa]
 			margin-right 4px
 
+		> span
+			flex-shrink 0
+
+			&:last-of-type
+				margin-right 8px
+
 		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
 			font-weight bold
 
 		> .mk-time
-			position absolute
+			display block
-			top 16px
+			margin-left auto
-			right 32px
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
 
 		& + article
 			padding-top 8px

src/client/app/mobile/views/components/note.vue

@@ -4,7 +4,6 @@
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<p>
 		<router-link class="avatar-anchor" :to="note.user | userPage">
 			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
@@ -12,7 +11,6 @@
 		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
 		<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
 		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
@@ -251,13 +249,12 @@ export default Vue.extend({
 		font-size 16px
 
 	> .renote
-		color #9dbb00
+		display flex
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		align-items baseline
-
-		> p
-			margin 0
 		padding 8px 16px
 		line-height 28px
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
 		@media (min-width 500px)
 			padding 16px
@@ -275,18 +272,24 @@ export default Vue.extend({
 		[data-fa]
 			margin-right 4px
 
+		> span
+			flex-shrink 0
+
+			&:last-of-type
+				margin-right 8px
+
 		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
 			font-weight bold
 
 		> .mk-time
-			position absolute
+			display block
-			top 8px
+			margin-left auto
-			right 16px
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
-
-			@media (min-width 500px)
-				top 16px
 
 		& + article
 			padding-top 8px