happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: responsive MCP server cards for mobile viewports

This commit is contained in:
Pascal 2026-01-31 07:58:13 +01:00
parent cd8e5741f2
commit 1615b1c58c
2 changed files with 39 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
View File

@ -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}

4
tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
View File

@ -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}