From 1852ea08851a224b8fbc919b6ae638ec54abc8e7 Mon Sep 17 00:00:00 2001
From: Lukasz Raczylo <lukasz@raczylo.com>
Date: Fri, 2 Oct 2026 04:40:27 +0100
Subject: [PATCH] fix(ui): use the full page width and fit phone screens

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.
---
 src/App.vue                       |  6 +++---
 src/components/AppHeader.vue      | 13 +++++++++----
 src/components/AttentionList.vue  |  2 +-
 src/components/AttentionRow.vue   |  9 +++++++--
 src/components/FilterBar.vue      |  5 ++++-
 src/components/FleetOverview.vue  | 14 +++++++-------
 src/components/FleetStrip.vue     |  9 +++++++--
 src/components/ProjectList.vue    |  5 ++++-
 src/components/components.test.ts |  4 ++--
 9 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f488f5b..9133268 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,7 +64,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <main class="mx-auto max-w-7xl px-5 py-6 sm:px-8">
+  <main class="w-full px-4 py-4 sm:px-6 sm:py-6 lg:px-10">
     <AppHeader
       :last-refresh="state?.lastRefresh ?? ''"
       :now-ms="nowMs"
@@ -92,7 +92,7 @@ onBeforeUnmount(() => {
       Fetching data from GitHub
     </p>
     <template v-else>
-      <div class="mt-12">
+      <div class="mt-8 sm:mt-12">
         <FleetOverview
           :crit="state.counts.crit"
           :warn="state.counts.warn"
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
         />
       </div>
       <div
-        class="mt-14 grid grid-cols-[minmax(0,1fr)] gap-x-10 gap-y-12 lg:grid-cols-[minmax(0,1fr)_23rem]"
+        class="mt-10 grid grid-cols-[minmax(0,1fr)] gap-x-10 gap-y-10 sm:mt-14 lg:grid-cols-[minmax(0,1fr)_24rem] 2xl:grid-cols-[minmax(0,1fr)_28rem]"
       >
         <AttentionList
           ref="list"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 89bca0a..80f58f4 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -28,7 +28,7 @@ const nextIn = computed(() => {
 </script>
 
 <template>
-  <header class="flex items-center justify-between gap-4">
+  <header class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
     <div class="flex items-center gap-3">
       <span
         class="border-border bg-surface text-link flex size-9 items-center justify-center rounded-md border"
@@ -37,8 +37,12 @@ const nextIn = computed(() => {
       </span>
       <span class="text-lg font-semibold tracking-tight">ghtracker</span>
     </div>
-    <div class="text-muted-foreground flex items-center gap-5 text-sm">
-      <span v-if="updated" class="hidden sm:inline" data-test="updated">
+    <div class="text-muted-foreground flex flex-wrap items-center gap-x-5 gap-y-1 text-sm">
+      <span
+        v-if="updated"
+        class="order-last w-full text-xs sm:order-none sm:w-auto sm:text-sm"
+        data-test="updated"
+      >
         Scanned {{ updated }} ago
         <span class="text-muted-foreground/70"> · next in {{ nextIn }}</span>
       </span>
@@ -52,7 +56,8 @@ const nextIn = computed(() => {
         @click="$emit('rescan')"
       >
         <FontAwesomeIcon :icon="faArrowsRotate" :spin="scanning" aria-hidden="true" />
-        {{ scanning ? 'Rescanning…' : 'Rescan repositories' }}
+        <span class="hidden sm:inline">{{ scanning ? 'Rescanning…' : 'Rescan repositories' }}</span>
+        <span class="sm:hidden">{{ scanning ? 'Scanning…' : 'Rescan' }}</span>
       </Button>
     </div>
   </header>
diff --git a/src/components/AttentionList.vue b/src/components/AttentionList.vue
index 17a0fa4..baf60f2 100644
--- a/src/components/AttentionList.vue
+++ b/src/components/AttentionList.vue
@@ -43,7 +43,7 @@ defineExpose({ focusSearch: () => bar.value?.focus() })
       <FontAwesomeIcon :icon="faCircleCheck" class="text-ok text-xl" aria-hidden="true" />
       Nothing matches the current filters.
     </div>
-    <div v-else class="flex flex-col gap-4">
+    <div v-else class="grid grid-cols-[minmax(0,1fr)] items-start gap-4 2xl:grid-cols-2">
       <RepoGroup
         v-for="block in blocks"
         :key="block.repo.fullName"
diff --git a/src/components/AttentionRow.vue b/src/components/AttentionRow.vue
index 7fcd081..5e9dcb2 100644
--- a/src/components/AttentionRow.vue
+++ b/src/components/AttentionRow.vue
@@ -12,7 +12,10 @@ const ratio = computed(() => secondsSince(props.row.since, props.nowMs) / props.
 </script>
 
 <template>
-  <li class="grid grid-cols-[2rem_minmax(0,1fr)_auto] items-start gap-x-3 py-3" data-test="row">
+  <li
+    class="grid grid-cols-[2rem_minmax(0,1fr)] items-start gap-x-3 gap-y-1 py-3 sm:grid-cols-[2rem_minmax(0,1fr)_auto]"
+    data-test="row"
+  >
     <span
       class="flex size-8 items-center justify-center rounded-md"
       :class="row.severity === 'crit' ? 'bg-crit/12 text-crit' : 'bg-warn/12 text-warn'"
@@ -31,7 +34,9 @@ const ratio = computed(() => secondsSince(props.row.since, props.nowMs) / props.
         {{ shorten(row.detail, 120) }}
       </p>
     </div>
-    <div class="flex flex-col items-end gap-1.5 pt-0.5">
+    <div
+      class="col-start-2 flex items-center gap-3 sm:col-start-auto sm:flex-col sm:items-end sm:gap-1.5 sm:pt-0.5"
+    >
       <span class="text-muted-foreground font-mono text-xs whitespace-nowrap">
         {{ isZeroTime(row.since) ? '' : ageSince(row.since, nowMs) }}
       </span>
diff --git a/src/components/FilterBar.vue b/src/components/FilterBar.vue
index 13e081d..f77af17 100644
--- a/src/components/FilterBar.vue
+++ b/src/components/FilterBar.vue
@@ -49,7 +49,7 @@ function onOwners(value: unknown): void {
 <template>
   <div class="flex flex-col gap-3" data-test="filter-bar">
     <div class="flex flex-wrap items-center gap-3">
-      <div class="relative min-w-56 flex-1">
+      <div class="relative min-w-0 basis-full sm:min-w-56 sm:flex-1 sm:basis-0">
         <FontAwesomeIcon
           :icon="faMagnifyingGlass"
           class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2"
@@ -75,6 +75,7 @@ function onOwners(value: unknown): void {
       </div>
       <ToggleGroup
         type="single"
+        class="max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         variant="outline"
         size="sm"
         :model-value="filters.severity"
@@ -96,6 +97,7 @@ function onOwners(value: unknown): void {
     <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
       <ToggleGroup
         type="multiple"
+        class="max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         variant="outline"
         size="sm"
         :model-value="filters.kinds"
@@ -117,6 +119,7 @@ function onOwners(value: unknown): void {
       <ToggleGroup
         v-if="owners.length > 1"
         type="multiple"
+        class="max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         variant="outline"
         size="sm"
         :model-value="filters.owners"
diff --git a/src/components/FleetOverview.vue b/src/components/FleetOverview.vue
index 2322bf7..ca33f76 100644
--- a/src/components/FleetOverview.vue
+++ b/src/components/FleetOverview.vue
@@ -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>
diff --git a/src/components/FleetStrip.vue b/src/components/FleetStrip.vue
index 64f736e..9b11c11 100644
--- a/src/components/FleetStrip.vue
+++ b/src/components/FleetStrip.vue
@@ -24,14 +24,19 @@ function summary(c: RepoCounts | undefined): string {
 
 <template>
   <TooltipProvider :delay-duration="80">
-    <div class="flex gap-1" role="group" aria-label="Project health" data-test="strip">
+    <div
+      class="grid grid-cols-[repeat(auto-fill,minmax(1.5rem,1fr))] gap-1"
+      role="group"
+      aria-label="Project health"
+      data-test="strip"
+    >
       <Tooltip v-for="repo in repos" :key="repo.fullName">
         <TooltipTrigger as-child>
           <button
             type="button"
             :aria-label="`${repo.fullName}: ${summary(counts.get(repo.fullName))}`"
             :aria-pressed="focused === repo.fullName"
-            class="h-14 min-w-0 flex-1 rounded-[3px] transition-colors focus-visible:outline-offset-1"
+            class="h-9 min-w-0 rounded-[3px] sm:h-11 transition-colors focus-visible:outline-offset-1"
             :class="[
               SEGMENT[repo.health],
               focused === repo.fullName
diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue
index 49cf191..b54d592 100644
--- a/src/components/ProjectList.vue
+++ b/src/components/ProjectList.vue
@@ -26,7 +26,10 @@ const LABEL = { crit: 'Critical', warn: 'Warning', ok: 'Healthy' } as const
     >
       No projects match the search.
     </p>
-    <ul v-else class="border-border bg-surface divide-border divide-y rounded-lg border">
+    <ul
+      v-else
+      class="border-border bg-surface divide-border max-h-[70vh] divide-y overflow-y-auto rounded-lg border lg:max-h-[calc(100vh-7rem)]"
+    >
       <li
         v-for="repo in repos"
         :key="repo.fullName"
diff --git a/src/components/components.test.ts b/src/components/components.test.ts
index 7335105..e2f9539 100644
--- a/src/components/components.test.ts
+++ b/src/components/components.test.ts
@@ -39,12 +39,12 @@ describe('AppHeader', () => {
 
   it('emits rescan and shows progress while a scan runs', async () => {
     const w = mount(AppHeader, { props: { ...base, manualRefresh: true } })
-    expect(w.get('[data-test=rescan]').text()).toBe('Rescan repositories')
+    expect(w.get('[data-test=rescan]').text()).toContain('Rescan repositories')
     await w.get('[data-test=rescan]').trigger('click')
     expect(w.emitted('rescan')).toHaveLength(1)
     const busy = mount(AppHeader, { props: { ...base, manualRefresh: true, scanning: true } })
     expect(busy.get('[data-test=rescan]').attributes('disabled')).toBeDefined()
-    expect(busy.get('[data-test=rescan]').text()).toBe('Rescanning…')
+    expect(busy.get('[data-test=rescan]').text()).toContain('Rescanning…')
   })
 })