From f16904c1a0a4a30ad4de1e37130f63dd6726a46e Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 4 Jan 2023 23:08:48 -0500
Subject: [PATCH] grid from note component BE GONE

---
 packages/client/src/components/MkNote.vue     |  42 +------
 .../client/src/components/MkNoteHeader.vue    | 112 ++++++++++--------
 2 files changed, 71 insertions(+), 83 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 8fdefcbfa3..5b87ebdace 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -32,10 +32,9 @@
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
-		<MkAvatar class="avatar" :user="appearNote.user"/>
+		<!-- <MkAvatar class="avatar" :user="appearNote.user"/> -->
 		<div class="main" @click.self="router.push(notePage(appearNote))">
 			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
 			<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"/>
@@ -426,9 +425,6 @@ function readPromo() {
 	> .article {
 		padding: 28px 32px 18px;
 		cursor: pointer;
-		display: grid;
-		align-items: center;
-		grid-template-columns: 58px;
 
 		@media (pointer: coarse) {
 			cursor: default;
@@ -438,7 +434,6 @@ function readPromo() {
 			flex-shrink: 0;
 			display: block;
 			margin: 0 14px 8px 0;
-			grid-row: 1 / span 2;
 			width: 48px;
 			height: 48px;
 			position: relative;
@@ -449,38 +444,9 @@ function readPromo() {
 		> .main {
 			flex: 1;
 			min-width: 0;
-			display: contents;
-
-			> header.header {
-				display: contents;
-			
-				> .name, .info {
-					grid-row: 1;
-				}
-			}
-
-			> :not(.ticker) {
-				grid-column: 1 / span 3;
-				width: 100%;
-				max-width: 100%;
-			}
-
-			> .name, .info {
-				grid-row: 1;
-			}
-
-			> .ticker {
-				grid-row: 2;
-				align-self: flex-start;
-				margin-left: auto;
-			}
-
-			> .ticker {
-				font-size: 0.9em;
-			}
 
 			> .body {
-				margin-top: .2em;
+				margin-top: .7em;
 				overflow: hidden;
 				margin-inline: -100px;
 				padding-inline: 100px;
@@ -569,6 +535,10 @@ function readPromo() {
 						}
 					}
 
+					> .files {
+						margin-top: .7em;
+						margin-bottom: .4em;
+					}
 					> .url-preview {
 						margin-top: 8px;
 					}
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 7be4b00425..2cbed86b76 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -1,16 +1,24 @@
 <template>
 <header class="kkwtjztg">
-	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
-		<MkUserName :user="note.user" class="mkusername">
-			<span v-if="note.user.isBot" class="is-bot">bot</span>
-		</MkUserName>
-	</MkA>
-	<div class="username"><MkAcct :user="note.user"/></div>
-	<div class="info">
-		<MkA class="created-at" :to="notePage(note)">
-			<MkTime :time="note.createdAt"/>
-		</MkA>
-		<MkVisibility :note="note"/>
+	<MkAvatar class="avatar" :user="note.user"/>
+	<div class="user-info">
+		<div>
+			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
+				<MkUserName :user="note.user" class="mkusername">
+					<span v-if="note.user.isBot" class="is-bot">bot</span>
+				</MkUserName>
+			</MkA>
+			<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>
 </header>
 </template>
@@ -31,53 +39,63 @@ defineProps<{
 <style lang="scss" scoped>
 .kkwtjztg {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 	white-space: nowrap;
 	justify-self: flex-end;
-	padding: .1em .7em;
 	border-radius: 100px;
 	font-size: .8em;
 	text-shadow: 0 2px 2px var(--shadow);
 
-	> .name {
-		flex-shrink: 1;
-		display: block;
-		margin: 0 .5em 0 0;
-		padding: 0;
-		overflow: hidden;
-		font-size: 1.2em;
-		font-weight: bold;
-		text-decoration: none;
-		text-overflow: ellipsis;
-
-		>.mkusername >.is-bot {
-			flex-shrink: 0;
-			align-self: center;
+	> .avatar {
+		width: 3.7em;
+		height: 3.7em;
+		margin-right: 8px;
+	}
+	> .user-info {
+		flex-grow: 1;
+		> div {
+			display: flex;
+			
+		}
+		.name {
+			flex: 1 1 0px;
+			display: block;
 			margin: 0 .5em 0 0;
-			padding: 1px 6px;
-			font-size: 80%;
-			border: solid 0.5px var(--divider);
-			border-radius: 3px;
+			padding: 0;
+			overflow: hidden;
+			font-size: 1.2em;
+			font-weight: bold;
+			text-decoration: none;
+			text-overflow: ellipsis;
+
+			.mkusername >.is-bot {
+				flex-shrink: 0;
+				align-self: center;
+				margin: 0 .5em 0 0;
+				padding: 1px 6px;
+				font-size: 80%;
+				border: solid 0.5px var(--divider);
+				border-radius: 3px;
+			}
+
+			&:hover {
+				text-decoration: underline;
+			}
 		}
 
-		&:hover {
-			text-decoration: underline;
+		.username {
+			flex: 1 1 0px;
+			margin: 0 .5em 0 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			align-self: flex-start;
 		}
-	}
 
-	> .username {
-		flex-shrink: 9999999;
-		margin: 0 .5em 0 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		grid-row: 2;
-		align-self: flex-start;
-	}
-
-	> .info {
-		flex-shrink: 0;
-		margin-left: auto;
-		font-size: 0.9em;
+		.info {
+			flex-shrink: 0;
+			margin-left: auto;
+			font-size: 0.9em;
+		}
 	}
 }
 </style>