fixes & tweaks

packages/client/src/components/MkInstanceTicker.vue

@@ -33,28 +33,36 @@ const bg = {
 
 <style lang="scss" scoped>
 .hpaizdrt {
-	$height: 1.1rem;
-
-	height: $height;
+	display: flex;
+	align-items: center;
+	height: 1.1em;
 	justify-self: flex-end;
-	padding: .1em .7em;
+	padding: .1em .4em;
 	border-radius: 100px;
 	font-size: .8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	overflow: hidden;
+	.header > .body & {
+		width: max-content;
+		max-width: 100%;
+	}
 
 	> .icon {
 		height: 100%;
 	}
 
 	> .name {
+		display: none;
 		margin-left: 4px;
-		line-height: $height;
-		font-size: 0.9em;
+		font-size: 0.85em;
 		vertical-align: top;
 		font-weight: bold;
-		text-overflow: clip;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
+		.article > .main &, .header > .body & {
+			display: unset;
+		}
 	}
 }
 </style>

packages/client/src/components/MkNote.vue

@@ -33,7 +33,10 @@
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
 		<div class="main" @click.self="router.push(notePage(appearNote))">
-			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			<div class="header-container">
+				<MkAvatar class="avatar" :user="note.user"/>
+				<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			</div>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
@@ -429,23 +432,29 @@ function readPromo() {
 			cursor: default;
 		}
 
-		> .avatar {
-			flex-shrink: 0;
-			display: block;
-			margin: 0 14px 8px 0;
-			width: 48px;
-			height: 48px;
-			position: relative;
-			top: 0;
-			left: 0;
+		.header-container {
+			display: flex;
+			> .avatar {
+				flex-shrink: 0;
+				display: block;
+				margin: 0 14px 8px 0;
+				width: 48px;
+				height: 48px;
+				position: relative;
+				top: 0;
+				left: 0;
+			}
+			> .header {
+				width: 0;
+				flex-grow: 1;
+			}
 		}
-
 		> .main {
 			flex: 1;
 			min-width: 0;
 
 			> .body {
-				margin-top: .7em;
+				margin-top: .2em;
 				overflow: hidden;
 				margin-inline: -100px;
 				padding-inline: 100px;
@@ -535,7 +544,7 @@ function readPromo() {
 					}
 
 					> .files {
-						margin-top: .7em;
+						margin-top: .4em;
 						margin-bottom: .4em;
 					}
 					> .url-preview {

packages/client/src/components/MkNoteHeader.vue

@@ -1,6 +1,5 @@
 <template>
 <header class="kkwtjztg">
-	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="user-info">
 		<div>
 			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
@@ -8,15 +7,15 @@
 					<span v-if="note.user.isBot" class="is-bot">bot</span>
 				</MkUserName>
 			</MkA>
+			<div class="username"><MkAcct :user="note.user"/></div>
+		</div>
+		<div>
 			<div class="info">
 				<MkA class="created-at" :to="notePage(note)">
 					<MkTime :time="note.createdAt"/>
 				</MkA>
 				<MkVisibility :note="note"/>
 			</div>
-		</div>
-		<div>
-			<div class="username"><MkAcct :user="note.user"/></div>
 			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="note.user.instance"/>
 		</div>
 	</div>
@@ -60,17 +59,40 @@ defineProps<{
 		width: 0;
 		flex-grow: 1;
 		line-height: 1.5;
+		display: flex;
+		font-size: 1.2em;
 		> div {
-			display: flex;
-			align-items: center;
+			&:first-child {
+				flex-grow: 1;
+				width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			&:last-child {
+				max-width: 50%;
+				gap: .2em .5em;
+			}
+			.article > .main & {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				.username {
+					font-size: .9em;
+				}
+				&:last-child {
+					align-items: flex-end;
+				}
+				> * {
+					max-width: 100%;
+				}
+			}
 		}
 		.name {
-			flex: 1 1 0px;
-			display: block;
+			// flex: 1 1 0px;
+			display: inline;
 			margin: 0 .5em 0 0;
 			padding: 0;
 			overflow: hidden;
-			font-size: 1.2em;
 			font-weight: bold;
 			text-decoration: none;
 			text-overflow: ellipsis;
@@ -91,7 +113,7 @@ defineProps<{
 		}
 
 		.username {
-			flex: 1 1 0px;
+			display: inline;
 			margin: 0 .5em 0 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -99,9 +121,24 @@ defineProps<{
 		}
 
 		.info {
+			display: inline-flex;
 			flex-shrink: 0;
-			margin-left: auto;
+			margin-left: .5em;
 			font-size: 0.9em;
+			.created-at {
+				max-width: 100%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+
+		.ticker {
+			display: inline-flex;
+			margin-left: .5em;
+			vertical-align: middle;
+			> .name {
+				display: none;
+			}
 		}
 	}
 }