From 1615b1c58ccaa7fa584bb055ea7feaeafe91d481 Mon Sep 17 00:00:00 2001
From: Pascal <admin@serveurperso.com>
Date: Sat, 31 Jan 2026 07:58:13 +0100
Subject: [PATCH] fix: responsive MCP server cards for mobile viewports

---
 .../app/mcp/McpCapabilitiesBadges.svelte      | 97 +++++++------------
 .../McpServerCard/McpServerCardHeader.svelte  |  4 +-
 2 files changed, 39 insertions(+), 62 deletions(-)

diff --git a/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte b/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
index 32668cff15..141e97e2de 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
@@ -1,78 +1,55 @@
 <script lang="ts">
 	import { Wrench, Database, MessageSquare, FileText, Sparkles, ListChecks } from '@lucide/svelte';
-	import { cn } from '$lib/components/ui/utils';
 	import type { MCPCapabilitiesInfo } from '$lib/types';
 	import { Badge } from '$lib/components/ui/badge';
 
 	interface Props {
 		capabilities?: MCPCapabilitiesInfo;
-		class?: string;
 	}
 
-	let { capabilities, class: className }: Props = $props();
+	let { capabilities }: Props = $props();
 </script>
 
 {#if capabilities}
-	<div class={cn('space-y-2 text-xs', className)}>
-		<div>
-			<div class="flex flex-wrap gap-2">
-				{#if capabilities.server.tools}
-					<Badge
-						variant="outline"
-						class="h-5 gap-1 bg-green-50 px-1.5 text-[10px] dark:bg-green-950"
-					>
-						<Wrench class="h-3 w-3 text-green-600 dark:text-green-400" />
+	{#if capabilities.server.tools}
+		<Badge variant="outline" class="h-5 gap-1 bg-green-50 px-1.5 text-[10px] dark:bg-green-950">
+			<Wrench class="h-3 w-3 text-green-600 dark:text-green-400" />
+			Tools
+		</Badge>
+	{/if}
 
-						Tools
-					</Badge>
-				{/if}
+	{#if capabilities.server.resources}
+		<Badge variant="outline" class="h-5 gap-1 bg-blue-50 px-1.5 text-[10px] dark:bg-blue-950">
+			<Database class="h-3 w-3 text-blue-600 dark:text-blue-400" />
+			Resources
+		</Badge>
+	{/if}
 
-				{#if capabilities.server.resources}
-					<Badge variant="outline" class="h-5 gap-1 bg-blue-50 px-1.5 text-[10px] dark:bg-blue-950">
-						<Database class="h-3 w-3 text-blue-600 dark:text-blue-400" />
+	{#if capabilities.server.prompts}
+		<Badge variant="outline" class="h-5 gap-1 bg-purple-50 px-1.5 text-[10px] dark:bg-purple-950">
+			<MessageSquare class="h-3 w-3 text-purple-600 dark:text-purple-400" />
+			Prompts
+		</Badge>
+	{/if}
 
-						Resources
-					</Badge>
-				{/if}
+	{#if capabilities.server.logging}
+		<Badge variant="outline" class="h-5 gap-1 bg-orange-50 px-1.5 text-[10px] dark:bg-orange-950">
+			<FileText class="h-3 w-3 text-orange-600 dark:text-orange-400" />
+			Logging
+		</Badge>
+	{/if}
 
-				{#if capabilities.server.prompts}
-					<Badge
-						variant="outline"
-						class="h-5 gap-1 bg-purple-50 px-1.5 text-[10px] dark:bg-purple-950"
-					>
-						<MessageSquare class="h-3 w-3 text-purple-600 dark:text-purple-400" />
+	{#if capabilities.server.completions}
+		<Badge variant="outline" class="h-5 gap-1 bg-cyan-50 px-1.5 text-[10px] dark:bg-cyan-950">
+			<Sparkles class="h-3 w-3 text-cyan-600 dark:text-cyan-400" />
+			Completions
+		</Badge>
+	{/if}
 
-						Prompts
-					</Badge>
-				{/if}
-
-				{#if capabilities.server.logging}
-					<Badge
-						variant="outline"
-						class="h-5 gap-1 bg-orange-50 px-1.5 text-[10px] dark:bg-orange-950"
-					>
-						<FileText class="h-3 w-3 text-orange-600 dark:text-orange-400" />
-
-						Logging
-					</Badge>
-				{/if}
-
-				{#if capabilities.server.completions}
-					<Badge variant="outline" class="h-5 gap-1 bg-cyan-50 px-1.5 text-[10px] dark:bg-cyan-950">
-						<Sparkles class="h-3 w-3 text-cyan-600 dark:text-cyan-400" />
-
-						Completions
-					</Badge>
-				{/if}
-
-				{#if capabilities.server.tasks}
-					<Badge variant="outline" class="h-5 gap-1 bg-pink-50 px-1.5 text-[10px] dark:bg-pink-950">
-						<ListChecks class="h-3 w-3 text-pink-600 dark:text-pink-400" />
-
-						Tasks
-					</Badge>
-				{/if}
-			</div>
-		</div>
-	</div>
+	{#if capabilities.server.tasks}
+		<Badge variant="outline" class="h-5 gap-1 bg-pink-50 px-1.5 text-[10px] dark:bg-pink-950">
+			<ListChecks class="h-3 w-3 text-pink-600 dark:text-pink-400" />
+			Tasks
+		</Badge>
+	{/if}
 {/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
index 6c3e418ad7..bd2b4b714f 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
@@ -44,7 +44,7 @@
 <div class="space-y-3">
 	<div class="flex items-start justify-between gap-3">
 		<div class="grid min-w-0 gap-3">
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-2 overflow-hidden">
 				{#if faviconUrl}
 					<img
 						src={faviconUrl}
@@ -63,7 +63,7 @@
 				<p class="truncate leading-none font-medium">{displayName}</p>
 
 				{#if serverInfo?.version}
-					<Badge variant="secondary" class="h-4 shrink-0 px-1 text-[10px]">
+					<Badge variant="secondary" class="h-4 max-w-[200px] truncate px-1 text-[10px]">
 						v{serverInfo.version}
 					</Badge>
 				{/if}