fix: 🐛 display punishments on desktop

packages/client/src/pages/user/home.vue

@@ -28,12 +28,38 @@
 							></div>
 							<div class="fade"></div>
 							<div class="title">
-								<div class="nameCollumn">
+								<div class="nameColumn">
 									<MkUserName
 										class="name"
 										:user="user"
 										:nowrap="true"
 									/>
+									<div v-if="$i?.isModerator || $i?.isAdmin">
+										<span
+											v-if="user.isSilenced"
+											style="
+												color: var(--warn);
+												padding: 5px;
+											"
+										>
+											<i
+												class="ph-warning ph-bold ph-lg"
+											></i>
+											{{ i18n.ts.silenced }}
+										</span>
+										<span
+											v-if="user.isSuspended"
+											style="
+												color: var(--error);
+												padding: 5px;
+											"
+										>
+											<i
+												class="ph-warning ph-bold ph-lg"
+											></i>
+											{{ i18n.ts.suspended }}
+										</span>
+									</div>
 									<span
 										v-if="
 											$i &&
@@ -98,7 +124,7 @@
 							:show-indicator="true"
 						/>
 						<div class="title">
-							<div class="nameCollumn">
+							<div class="nameColumn">
 								<MkUserName
 									class="name"
 									:user="user"
@@ -113,20 +139,20 @@
 									class="followed"
 									>{{ i18n.ts.followsYou }}</span
 								>
-								<div
+								<div v-if="$i?.isModerator || $i?.isAdmin">
-									v-if="$i?.isModerator || $i?.isAdmin"
-									class="punishments"
-								>
 									<span
-										class="punished"
 										v-if="user.isSilenced"
+										style="color: var(--warn); padding: 5px"
 									>
 										<i class="ph-warning ph-bold ph-lg"></i>
 										{{ i18n.ts.silenced }}
 									</span>
 									<span
-										class="punished"
 										v-if="user.isSuspended"
+										style="
+											color: var(--error);
+											padding: 5px;
+										"
 									>
 										<i class="ph-warning ph-bold ph-lg"></i>
 										{{ i18n.ts.suspended }}
@@ -516,23 +542,6 @@ onUnmounted(() => {
 						border-radius: 6px;
 					}
 
-					> .punishments {
-						display: flex;
-						gap: 1rem;
-						margin-top: 0.5rem;
-
-						> .punished {
-							padding: 10px;
-							color: var(--infoWarnBg);
-							background-color: var(--infoWarnFg);
-							border-radius: 10px;
-
-							> i {
-								margin-right: 4px;
-							}
-						}
-					}
-
 					> .title {
 						position: absolute;
 						bottom: 0;
@@ -542,7 +551,7 @@ onUnmounted(() => {
 						box-sizing: border-box;
 						color: #fff;
 
-						> .nameCollumn {
+						> .nameColumn {
 							display: block;
 							> .name {
 								margin: 0;
@@ -650,7 +659,7 @@ onUnmounted(() => {
 					font-weight: bold;
 					border-bottom: solid 0.5px var(--divider);
 
-					> .nameCollumn {
+					> .nameColumn {
 						display: block;
 						> .name {
 							margin: 0;