From a32a8e04041c2ca95efd9e0091f1918d7b8e31d8 Mon Sep 17 00:00:00 2001
From: blueb <ihateblueb@proton.me>
Date: Thu, 3 Oct 2024 00:02:04 -0400
Subject: [PATCH 1/4] improvement: make MkAbuseReport more friendly for smaller
 screen sizes

---
 .../frontend/src/components/MkAbuseReport.vue | 93 ++++++++++++-------
 1 file changed, 59 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 7c8c7dbd30..a790229667 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -4,40 +4,52 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="bcekxzvu _margin _panel">
-	<div class="target">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
-			<MkAvatar class="avatar" :user="report.targetUser" indicator/>
-			<div class="names">
-				<MkUserName class="name" :user="report.targetUser"/>
-				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+	<div class="bcekxzvu _margin _panel" :class="{ resolved: resolved }">
+		<div class="target">
+			<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
+				<MkAvatar class="avatar" :user="report.targetUser" indicator/>
+				<div class="names">
+					<MkUserName class="name" :user="report.targetUser"/>
+					<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+				</div>
+			</MkA>
+			<br>
+			<div class="keyvalCtn">
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.registeredDate }}</template>
+					<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.reporter }}</template>
+					<template #value><MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.createdAt }}</template>
+					<template #value><MkTime :time="report.createdAt" mode="absolute"/> (<MkTime :time="report.createdAt" mode="relative"/>)</template>
+				</MkKeyValue>
 			</div>
-		</MkA>
-		<MkKeyValue>
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value>{{ dateString(report.targetUser.createdAt) }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
-		</MkKeyValue>
-	</div>
-	<div class="detail">
-		<div>
-			<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
+			<hr>
 		</div>
-		<hr/>
-		<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div>
-		<div v-if="report.assignee">
-			{{ i18n.ts.moderator }}:
-			<MkAcct :user="report.assignee"/>
-		</div>
-		<div><MkTime :time="report.createdAt"/></div>
-		<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-				{{ i18n.ts.forwardReport }}
-				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
-			</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
+		<div class="detail">
+			<div>
+				<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
+			</div>
+			<hr/>
+			<div v-if="report.assignee">
+				{{ i18n.ts.moderator }}:
+				<MkA :to="`/admin/user/${report.assignee.id}`" class="_link" :behavior="'window'">@{{ report.assignee.username }}</MkA>
+				<br>
+			</div>
+			<div class="action">
+				<MkSwitch v-model="forward" c:disabled="report.targetUser.host == null || report.resolved">
+					{{ i18n.ts.forwardReport }}
+					<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
+				</MkSwitch>
+				<br v-if="!report.resolved">
+				<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -58,6 +70,7 @@ const emit = defineEmits<{
 }>();
 
 const forward = ref(props.report.forwarded);
+const resolved = ref(props.report.resolved);
 
 function resolve() {
 	os.apiWithDialog('admin/resolve-abuse-user-report', {
@@ -72,13 +85,17 @@ function resolve() {
 <style lang="scss" scoped>
 .bcekxzvu {
 	display: flex;
+	flex-direction: column;
+	transition: .1s;
+
+	&.resolved:not(:hover,:focus) {
+		opacity: 50%;
+	}
 
 	> .target {
-		width: 35%;
 		box-sizing: border-box;
 		text-align: left;
-		padding: 24px;
-		border-right: solid 1px var(--divider);
+		padding: 24px 24px 0px 24px;
 
 		> .info {
 			display: flex;
@@ -100,16 +117,24 @@ function resolve() {
 				padding: 0 8px;
 				flex: 1;
 
+				white-space: pre;
+				overflow: hidden;
+
 				> .name {
 					font-weight: bold;
 				}
 			}
 		}
+
+		> .keyvalCtn {
+			display: inline-flex;
+			gap: 15px;
+		}
 	}
 
 	> .detail {
 		flex: 1;
-		padding: 24px;
+		padding: 0px 24px 24px 24px;
 	}
 }
 </style>

From cbecaad5aea1df105f962ee3e362b5bc2d9139b9 Mon Sep 17 00:00:00 2001
From: blueb <ihateblueb@proton.me>
Date: Thu, 3 Oct 2024 00:06:20 -0400
Subject: [PATCH 2/4] don't make MkAbuseReport harder to see if resolved

---
 packages/frontend/src/components/MkAbuseReport.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index a790229667..f6488f9c84 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-	<div class="bcekxzvu _margin _panel" :class="{ resolved: resolved }">
+	<div class="bcekxzvu _margin _panel">
 		<div class="target">
 			<MkA v-user-preview="report.targetUserId" class="info" :to="`/admin/user/${report.targetUserId}`" :behavior="'window'">
 				<MkAvatar class="avatar" :user="report.targetUser" indicator/>
@@ -70,7 +70,6 @@ const emit = defineEmits<{
 }>();
 
 const forward = ref(props.report.forwarded);
-const resolved = ref(props.report.resolved);
 
 function resolve() {
 	os.apiWithDialog('admin/resolve-abuse-user-report', {
@@ -88,10 +87,6 @@ function resolve() {
 	flex-direction: column;
 	transition: .1s;
 
-	&.resolved:not(:hover,:focus) {
-		opacity: 50%;
-	}
-
 	> .target {
 		box-sizing: border-box;
 		text-align: left;

From 5ef58c90ae9b1c36f11eb2cc3650a599c7072af7 Mon Sep 17 00:00:00 2001
From: blueb <ihateblueb@proton.me>
Date: Thu, 3 Oct 2024 09:12:25 -0400
Subject: [PATCH 3/4] replace brs with margin in MkAbuseReport

---
 .../frontend/src/components/MkAbuseReport.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index f6488f9c84..608ed0e017 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -13,7 +13,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
 				</div>
 			</MkA>
-			<br>
 			<div class="keyvalCtn">
 				<MkKeyValue>
 					<template #key>{{ i18n.ts.registeredDate }}</template>
@@ -35,17 +34,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
 			</div>
 			<hr/>
-			<div v-if="report.assignee">
+			<div class="assignee" v-if="report.assignee">
 				{{ i18n.ts.moderator }}:
 				<MkA :to="`/admin/user/${report.assignee.id}`" class="_link" :behavior="'window'">@{{ report.assignee.username }}</MkA>
-				<br>
 			</div>
 			<div class="action">
 				<MkSwitch v-model="forward" c:disabled="report.targetUser.host == null || report.resolved">
 					{{ i18n.ts.forwardReport }}
 					<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
 				</MkSwitch>
-				<br v-if="!report.resolved">
 				<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
 			</div>
 		</div>
@@ -124,12 +121,24 @@ function resolve() {
 		> .keyvalCtn {
 			display: inline-flex;
 			gap: 15px;
+			margin-top: 15px;
 		}
 	}
 
 	> .detail {
-		flex: 1;
+		display: flex;
+		flex-direction: column;
 		padding: 0px 24px 24px 24px;
+
+		.assignee {
+			margin-bottom: 15px;
+		}
+
+		.action {
+			display: flex;
+			flex-direction: column;
+			gap: 15px;
+		}
 	}
 }
 </style>

From 04c729e5040b1fce1586d4f905f209cd3cba2a28 Mon Sep 17 00:00:00 2001
From: blueb <ihateblueb@proton.me>
Date: Thu, 3 Oct 2024 11:43:04 -0400
Subject: [PATCH 4/4] fix: lint error in MkAbuseReport

---
 packages/frontend/src/components/MkAbuseReport.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 608ed0e017..d13eedaade 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
 			</div>
 			<hr/>
-			<div class="assignee" v-if="report.assignee">
+			<div v-if="report.assignee" class="assignee">
 				{{ i18n.ts.moderator }}:
 				<MkA :to="`/admin/user/${report.assignee.id}`" class="_link" :behavior="'window'">@{{ report.assignee.username }}</MkA>
 			</div>