vikingowl/tyto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): prevent sparkline chart overflow on small screens

Browse Source 
- Add min-w-0 to flex containers to allow proper shrinking
- Hide sparklines below 400px viewport width
- Add flex-shrink-0 and overflow-hidden to sparkline containers
- Reduce font sizes and gaps on mobile for better fit

Affects CpuCard, MemoryCard, and GpuCard sparkline displays.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
vikingowl
2025-12-28 05:38:33 +01:00
parent f4dbc55851
commit d9cc4f39dd
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/lib/components/cards/CpuCard.svelte
View File

@@ -17,8 +17,8 @@
{#if $cpuStats}
<div class="space-y-5">
<!-- Total usage with large display -->
<div class="flex items-center gap-4 sm:gap-6">
<div class="flex-1">
<div class="flex items-center gap-3 sm:gap-6">
<div class="flex-1 min-w-0">
<div class="flex items-end gap-2 sm:gap-3 mb-2">
<span class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
{$cpuStats.totalUsage.toFixed(1)}%
@@ -27,8 +27,8 @@
</div>
<ProgressBar value={$cpuStats.totalUsage} color="auto" showLabel={false} size="lg" />
</div>
<div class="w-24 h-12 sm:w-32 sm:h-16">
<SparkLine data={$cpuHistory} width={128} height={64} color="#3b82f6" />
<div class="hidden min-[400px]:block flex-shrink-0 w-20 h-10 sm:w-28 sm:h-14 overflow-hidden">
<SparkLine data={$cpuHistory} width={112} height={56} color="#3b82f6" />
</div>
</div>

14
frontend/src/lib/components/cards/GpuCard.svelte
View File

@@ -19,18 +19,18 @@
<div class="space-y-5">
<!-- Utilization -->
<div class="flex items-center gap-6">
<div class="flex-1">
<div class="flex items-end gap-3 mb-2">
<span class="text-4xl font-bold bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent">
<div class="flex items-center gap-3 sm:gap-6">
<div class="flex-1 min-w-0">
<div class="flex items-end gap-2 sm:gap-3 mb-2">
<span class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent">
{$gpuStats.utilization}%
</span>
<span class="text-slate-400 text-sm mb-1">GPU</span>
<span class="text-slate-400 text-xs sm:text-sm mb-1">GPU</span>
</div>
<ProgressBar value={$gpuStats.utilization} color="orange" showLabel={false} size="lg" />
</div>
<div class="w-32 h-16">
<SparkLine data={$gpuHistory} width={128} height={64} color="#f97316" />
<div class="hidden min-[400px]:block flex-shrink-0 w-20 h-10 sm:w-28 sm:h-14 overflow-hidden">
<SparkLine data={$gpuHistory} width={112} height={56} color="#f97316" />
</div>
</div>

14
frontend/src/lib/components/cards/MemoryCard.svelte
View File

@@ -13,18 +13,18 @@
<div class="space-y-5">
<!-- Main memory display -->
<div class="flex items-center gap-6">
<div class="flex-1">
<div class="flex items-end gap-3 mb-2">
<span class="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
<div class="flex items-center gap-3 sm:gap-6">
<div class="flex-1 min-w-0">
<div class="flex items-end gap-2 sm:gap-3 mb-2">
<span class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
{usedPercent.toFixed(1)}%
</span>
<span class="text-slate-400 text-sm mb-1">used</span>
<span class="text-slate-400 text-xs sm:text-sm mb-1">used</span>
</div>
<ProgressBar value={usedPercent} color="purple" showLabel={false} size="lg" />
</div>
<div class="w-32 h-16">
<SparkLine data={$memoryHistory} width={128} height={64} color="#8b5cf6" />
<div class="hidden min-[400px]:block flex-shrink-0 w-20 h-10 sm:w-28 sm:h-14 overflow-hidden">
<SparkLine data={$memoryHistory} width={112} height={56} color="#8b5cf6" />
</div>
</div>