update server info label styles

packages/ui/src/components/servers/ServerListing.vue

@@ -21,7 +21,12 @@
 				<div class="ml-4 flex flex-col gap-2.5">
 					<div class="flex flex-row items-center gap-2">
 						<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
-						<ChevronRightIcon />
+						<div
+							v-if="isConfiguring"
+							class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 py-1"
+						>
+							<SparklesIcon class="size-5 shrink-0" /> New
+						</div>
 					</div>
 
 					<div
@@ -37,15 +42,10 @@
 						Using {{ projectData?.title || 'Unknown' }}
 					</div>
 
-					<div
-						v-if="isConfiguring"
-						class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand"
-					>
-						<SparklesIcon class="size-5 shrink-0" /> New server
-					</div>
 					<ServerInfoLabels
-						v-else
+						:server-data="
-						:server-data="{ game, mc_version, loader, loader_version, net }"
+							isConfiguring ? { net } : { game, mc_version, loader, loader_version, net }
+						"
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
 						:linked="false"
@@ -107,7 +107,7 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { ChevronRightIcon, LoaderCircleIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
+import { LoaderCircleIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
@@ -158,8 +158,8 @@ const props = defineProps<ServerListingProps>()
 
 const { kyros, labrinth } = injectModrinthClient()
 
-const showGameLabel = computed(() => !!props.game)
+const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
-const showLoaderLabel = computed(() => !!props.loader)
+const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
 
 const { data: projectData } = useQuery({
 	queryKey: ['project', props.upstream?.project_id] as const,

packages/ui/src/components/servers/labels/ServerInfoLabels.vue

@@ -7,15 +7,16 @@
 			:is-link="linked"
 		/>
 		<ServerLoaderLabel
+			v-if="showLoaderLabel"
 			:loader="serverData.loader"
 			:loader-version="serverData.loader_version ?? ''"
-			:no-separator="column"
+			:no-separator="column || !showGameLabel"
 			:is-link="linked"
 		/>
 		<ServerSubdomainLabel
 			v-if="serverData.net?.domain"
 			:subdomain="serverData.net.domain"
-			:no-separator="column"
+			:no-separator="column || (!showLoaderLabel && !showGameLabel)"
 			:is-link="linked"
 		/>
 		<ServerUptimeLabel

packages/ui/src/components/servers/labels/ServerLoaderLabel.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-4 truncate">
-		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
 		<div class="flex flex-row items-center gap-2">
 			<LoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>

packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue

@@ -4,7 +4,7 @@
 		v-tooltip="'Copy custom URL'"
 		class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
 	>
-		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
 		<div class="flex flex-row items-center gap-2">
 			<LinkIcon class="flex size-5 shrink-0" />
 			<div

packages/ui/src/components/servers/labels/ServerUptimeLabel.vue

@@ -5,7 +5,7 @@
 		class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-4"
 		data-pyro-uptime
 	>
-		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div v-if="!noSeparator" class="experimental-styles-within h-1.5 w-1.5 bg-button-border"></div>
 
 		<div class="flex gap-2">
 			<TimerIcon class="flex size-5 shrink-0" />