From c2f4835fe75b18395d77d803a283210ddd9101c0 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Mon, 29 Jun 2026 18:00:59 +0100
Subject: [PATCH] fix: spacing + friends (#6550)

---
 .../src/components/ui/friends/FriendsList.vue         |  7 ++++---
 .../content-tab/components/ContentModpackCard.vue     | 11 ++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index cff91a960c..c622c078e4 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	ButtonStyled,
@@ -301,11 +301,12 @@ const messages = defineMessages({
 			</ButtonStyled>
 			<StyledInput
 				v-model="search"
+				:icon="SearchIcon"
 				type="text"
 				:placeholder="formatMessage(messages.searchFriends)"
 				clearable
-				variant="outlined"
-				wrapper-class="flex-1"
+				input-class="!bg-transparent !border !border-solid !border-button-bg !text-primary !placeholder:text-primary"
+				wrapper-class="flex-1 [&>svg]:!text-primary [&>svg]:!opacity-100"
 				@keyup.esc="search = ''"
 			/>
 		</template>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
index 154cb27bd8..b77ee8ce01 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -154,10 +154,19 @@ onUnmounted(() => {
 						>
 							{{ project.title }}
 						</AutoLink>
-						<span v-if="project.filename" class="truncate text-secondary mb-2">
+						<span
+							v-if="project.filename && (owner || version)"
+							class="truncate text-secondary mb-2"
+						>
 							{{ project.filename }}
 						</span>
 					</div>
+					<div
+						v-if="project.filename && !(owner || version)"
+						class="flex min-h-8 min-w-0 items-center text-secondary"
+					>
+						<span class="truncate">{{ project.filename }}</span>
+					</div>
 					<div
 						v-if="owner || version"
 						class="flex flex-nowrap items-center gap-2 overflow-hidden text-secondary"