lukaszraczylo/ghtracker
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/ghtracker.git synced 2026-10-15 01:07:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use the full page width and fit phone screens

Browse Source 
The page no longer caps its width. On very wide screens the attention list shows two columns of projects.

On phones the header, the health strip and the filter chips wrap or scroll inside their own box, and each item shows its age under the text. The side panel scrolls on its own.
This commit is contained in:
lukaszraczylo
2026-10-02 04:40:27 +01:00
parent 6e305b860b
commit 1852ea0885
9 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FleetOverview.vue
+7 -7
View File
@@ -57,7 +57,7 @@ const rows = computed<{ label: string; value: number; icon: IconDefinition; tone
<template>
<section
class="grid grid-cols-[minmax(0,1fr)] items-end gap-x-14 gap-y-8 lg:grid-cols-[minmax(0,1fr)_20rem]"
class="grid grid-cols-[minmax(0,1fr)] items-end gap-x-14 gap-y-8 lg:grid-cols-[minmax(0,1fr)_22rem]"
aria-label="Fleet status"
>
<div>
@@ -68,22 +68,22 @@ const rows = computed<{ label: string; value: number; icon: IconDefinition; tone
<template v-else>All {{ repos.length }} projects are healthy</template>
</p>
<h1
class="flex flex-wrap items-baseline gap-x-10 gap-y-1 font-semibold tracking-tight"
class="flex flex-wrap items-baseline gap-x-6 gap-y-1 sm:gap-x-10 font-semibold tracking-tight"
data-test="headline"
>
<template v-if="crit > 0 || warn > 0">
<span v-if="crit > 0" class="text-crit">
<span class="text-7xl leading-none tabular-nums">{{ crit }}</span>
<span class="text-5xl leading-none tabular-nums sm:text-7xl">{{ crit }}</span>
<span class="ml-2 text-xl font-medium">critical</span>
</span>
<span v-if="warn > 0" class="text-warn">
<span class="text-7xl leading-none tabular-nums">{{ warn }}</span>
<span class="text-5xl leading-none tabular-nums sm:text-7xl">{{ warn }}</span>
<span class="ml-2 text-xl font-medium">{{ warn === 1 ? 'warning' : 'warnings' }}</span>
</span>
</template>
<span v-else class="text-ok text-7xl leading-none">All clear</span>
<span v-else class="text-ok text-5xl leading-none sm:text-7xl">All clear</span>
</h1>
<div class="mt-8">
<div class="mt-6 sm:mt-8">
<FleetStrip
:repos="repos"
:counts="counts"
@@ -101,7 +101,7 @@ const rows = computed<{ label: string; value: number; icon: IconDefinition; tone
<span class="flex items-center gap-1.5"
><span class="bg-ok/40 size-2 rounded-[2px]"></span>healthy</span
>
<span class="ml-auto">Select a segment to focus a project</span>
<span class="sm:ml-auto">Tap a segment to focus a project</span>
</p>
</div>
</div>