fix(ui): fix cramped stats grid on smaller screens (#927)

wojtekmaj · web-flow · commit 6383f8a689c6 · 2026-02-04T11:09:42.000Z
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
@@ -791,7 +791,7 @@ defineOgImageComponent('Package', {
 
         <!-- Stats grid -->
         <dl
-          class="grid grid-cols-2 sm:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
+          class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
         >
           <div class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">

Original file line number	Diff line number	Diff line change
`@@ -791,7 +791,7 @@ defineOgImageComponent('Package', {`
`791`	`791`
`792`	`792`	`<!-- Stats grid -->`
`793`	`793`	`<dl`
`794`		`- class="grid grid-cols-2 sm:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"`
	`794`	`+ class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"`
`795`	`795`	`>`
`796`	`796`	`<div class="space-y-1 sm:col-span-2">`
`797`	`797`	`<dt class="text-xs text-fg-subtle uppercase tracking-wider">`