From 6c1d4cbd895a508ee0f406fb08c8445582f7f187 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 7 Oct 2026 01:06:30 +1100
Subject: [PATCH] fix(ui): keep sparklines and code text clear on phones

At phone and tablet widths a six digit star count left no room for the sparkline, which spilled into the Forks card. Wrapped commands in article code blocks ran under the copy button, hiding flags such as --agent.
---
 app/app.config.ts                                     | 8 ++++++++
 layers/registry/app/pages/gh/[owner]/[repo]/index.vue | 9 +++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/app.config.ts b/app/app.config.ts
index 8a25ac1d..c68ca378 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -41,5 +41,13 @@ export default {
         variant: 'outline',
       },
     },
+    prose: {
+      pre: {
+        slots: {
+          // The copy button sits over the first line, so long commands that wrap keep clear of it.
+          base: 'pe-12',
+        },
+      },
+    },
   },
 }
diff --git a/layers/registry/app/pages/gh/[owner]/[repo]/index.vue b/layers/registry/app/pages/gh/[owner]/[repo]/index.vue
index 0fccf830..e3d986cb 100644
--- a/layers/registry/app/pages/gh/[owner]/[repo]/index.vue
+++ b/layers/registry/app/pages/gh/[owner]/[repo]/index.vue
@@ -475,12 +475,12 @@ useHead(computed(() => ({
                 <UIcon name="i-lucide-package" class="size-3.5" aria-hidden="true" />
                 Indexed skills
               </p>
-              <div class="mt-2 flex min-h-8 items-end justify-between gap-3">
+              <div class="mt-2 flex min-h-8 flex-wrap items-end justify-between gap-x-3 gap-y-1">
                 <USkeleton v-if="repoSkillsLoading" class="h-7 w-12" />
                 <p v-else class="font-mono text-xl font-medium tabular-nums">
                   {{ repoSkills.length.toLocaleString() }}
                 </p>
-                <div class="h-7 w-20 shrink-0 sm:w-24">
+                <div class="ms-auto h-7 w-20 shrink-0 sm:w-24">
                   <USkeleton
                     v-if="repoHistoryStatus === 'pending'"
                     class="h-full w-full"
@@ -509,11 +509,12 @@ useHead(computed(() => ({
                 <UIcon name="i-lucide-star" class="size-3.5" aria-hidden="true" />
                 GitHub stars
               </p>
-              <div class="mt-2 flex min-h-8 items-end justify-between gap-3">
+              <!-- A phone card is too narrow for a six digit count and the sparkline, so the sparkline wraps under it. -->
+              <div class="mt-2 flex min-h-8 flex-wrap items-end justify-between gap-x-3 gap-y-1">
                 <p class="font-mono text-xl font-medium tabular-nums">
                   {{ sourceStars.toLocaleString() }}
                 </p>
-                <div class="h-7 w-20 shrink-0 sm:w-24">
+                <div class="ms-auto h-7 w-20 shrink-0 sm:w-24">
                   <USkeleton
                     v-if="repoHistoryStatus === 'pending'"
                     class="h-full w-full"