From e9c4e4eb0eb4e3ebed0a0abc2597d44132aaadaf Mon Sep 17 00:00:00 2001
From: Rshig <90143161+rshigg@users.noreply.github.com>
Date: Tue, 27 Jan 2026 19:54:29 -0500
Subject: [PATCH 1/3] feat: add extra wide layout to package page

---
 app/pages/[...package].vue | 127 +++++++++++++++++++++++++++----------
 app/pages/search.vue       |   4 +-
 uno.config.ts              |   3 +-
 3 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index e03ab644c5..da03718ee4 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -295,12 +295,15 @@ defineOgImageComponent('Package', {
 </script>
 
 <template>
-  <main class="container py-8 sm:py-12 overflow-hidden w-full">
-    <PackageSkeleton v-if="status === 'pending'" />
+  <main class="package-page container">
+    <PackageSkeleton v-if="status === 'pending'" class="col-span-full row-span-full" />
 
-    <article v-else-if="status === 'success' && pkg" class="motion-safe:animate-fade-in min-w-0">
+    <article
+      v-else-if="status === 'success' && pkg"
+      class="motion-safe:animate-fade-in contents animate-fade-in"
+    >
       <!-- Package header -->
-      <header class="mb-8 pb-8 border-b border-border">
+      <header class="area-header pb-8 border-b border-border">
         <div class="mb-4">
           <!-- Package name and version -->
           <div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
@@ -660,10 +663,11 @@ defineOgImageComponent('Package', {
         v-if="displayVersion"
         :package-name="pkg.name"
         :version="displayVersion.version"
+        class="area-vulns"
       />
 
       <!-- Install command with package manager selector -->
-      <section aria-labelledby="install-heading" class="mb-8">
+      <section aria-labelledby="install-heading" class="area-install">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2 id="install-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
             {{ $t('package.install.title') }}
@@ -763,35 +767,28 @@ defineOgImageComponent('Package', {
         </div>
       </section>
 
-      <!-- Two column layout for sidebar content -->
-      <div class="grid lg:grid-cols-3 gap-8">
-        <!-- Main content (README) -->
-        <div class="lg:col-span-2 order-2 lg:order-1 min-w-0">
-          <section aria-labelledby="readme-heading">
-            <h2 id="readme-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-              {{ $t('package.readme.title') }}
-            </h2>
-            <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-            <div
-              v-if="readmeData?.html"
-              class="readme-content prose prose-invert max-w-none"
-              v-html="readmeData.html"
-            />
-            <p v-else class="text-fg-subtle italic">
-              {{ $t('package.readme.no_readme') }}
-              <a
-                v-if="repositoryUrl"
-                :href="repositoryUrl"
-                rel="noopener noreferrer"
-                class="link"
-                >{{ $t('package.readme.view_on_github') }}</a
-              >
-            </p>
-          </section>
-        </div>
+      <!-- README -->
+      <section aria-labelledby="readme-heading" class="area-readme min-w-0">
+        <h2 id="readme-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          {{ $t('package.readme.title') }}
+        </h2>
+        <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
+        <div
+          v-if="readmeData?.html"
+          class="readme-content prose prose-invert max-w-70ch"
+          v-html="readmeData.html"
+        />
+        <p v-else class="text-fg-subtle italic">
+          {{ $t('package.readme.no_readme') }}
+          <a v-if="repositoryUrl" :href="repositoryUrl" rel="noopener noreferrer" class="link">{{
+            $t('package.readme.view_on_github')
+          }}</a>
+        </p>
+      </section>
 
+      <div class="area-sidebar">
         <!-- Sidebar -->
-        <div class="order-1 lg:order-2 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
+        <aside class="sticky top-20 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
           <!-- Maintainers (with admin actions when connected) -->
           <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
 
@@ -882,12 +879,16 @@ defineOgImageComponent('Package', {
             :peer-dependencies-meta="displayVersion?.peerDependenciesMeta"
             :optional-dependencies="displayVersion?.optionalDependencies"
           />
-        </div>
+        </aside>
       </div>
     </article>
 
     <!-- Error state -->
-    <div v-else-if="status === 'error'" role="alert" class="py-20 text-center">
+    <div
+      v-else-if="status === 'error'"
+      role="alert"
+      class="col-span-full flex flex-col items-center py-20 text-center"
+    >
       <h1 class="font-mono text-2xl font-medium mb-4">{{ $t('package.not_found') }}</h1>
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
@@ -896,3 +897,61 @@ defineOgImageComponent('Package', {
     </div>
   </main>
 </template>
+
+<style scoped>
+.package-page {
+  display: grid;
+  padding: 2rem 1rem;
+  gap: 2rem;
+
+  /* Mobile: single column, sidebar above readme */
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    'header'
+    'install'
+    'vulns'
+    'sidebar'
+    'readme';
+}
+
+/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
+@media (min-width: 1024px) {
+  .package-page {
+    padding: 3rem 1.5rem;
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      'header  header'
+      'install install'
+      'vulns   vulns'
+      'readme  sidebar';
+  }
+}
+
+/* Desktop: floating sidebar alongside all content */
+@media (min-width: 1280px) {
+  .package-page {
+    grid-template-columns: 1fr 320px;
+    grid-template-areas:
+      'header  sidebar'
+      'install sidebar'
+      'vulns   sidebar'
+      'readme  sidebar';
+  }
+}
+
+.area-header {
+  grid-area: header;
+}
+.area-install {
+  grid-area: install;
+}
+.area-vulns {
+  grid-area: vulns;
+}
+.area-readme {
+  grid-area: readme;
+}
+.area-sidebar {
+  grid-area: sidebar;
+}
+</style>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 6188bd3396..77f3d37dcf 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -701,7 +701,7 @@ defineOgImageComponent('Default', {
   <main class="overflow-x-hidden">
     <!-- Sticky search header - positioned below AppHeader (h-14 = 56px) -->
     <header class="sticky top-14 z-40 bg-bg/95 backdrop-blur-sm border-b border-border">
-      <div class="container py-4">
+      <div class="container-sm py-4">
         <h1 class="font-mono text-xl sm:text-2xl font-medium mb-4">search</h1>
 
         <search>
@@ -756,7 +756,7 @@ defineOgImageComponent('Default', {
     </header>
 
     <!-- Results area with container padding -->
-    <div class="container pt-20 pb-6">
+    <div class="container-sm pt-20 pb-6">
       <section v-if="query" aria-label="Search results" @keydown="handleResultsKeydown">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
diff --git a/uno.config.ts b/uno.config.ts
index a6aa70badd..fe978125ce 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -98,7 +98,8 @@ export default defineConfig({
   } satisfies Theme,
   shortcuts: [
     // Layout
-    ['container', 'max-w-4xl mx-auto px-4 sm:px-6'],
+    ['container', 'max-w-6xl mx-auto px-4 sm:px-6'],
+    ['container-sm', 'max-w-4xl mx-auto px-4 sm:px-6'],
 
     // Focus states - subtle but accessible
     ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],

From 99c407bc216e5a3a87f66534775cbe879818cd98 Mon Sep 17 00:00:00 2001
From: Rshig <90143161+rshigg@users.noreply.github.com>
Date: Tue, 27 Jan 2026 20:10:48 -0500
Subject: [PATCH 2/3] simplify layout styling

---
 app/pages/[...package].vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index da03718ee4..dbd9ecdf1d 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -295,12 +295,12 @@ defineOgImageComponent('Package', {
 </script>
 
 <template>
-  <main class="package-page container">
-    <PackageSkeleton v-if="status === 'pending'" class="col-span-full row-span-full" />
+  <main class="container py-8 xl:py-12">
+    <PackageSkeleton v-if="status === 'pending'" />
 
     <article
       v-else-if="status === 'success' && pkg"
-      class="motion-safe:animate-fade-in contents animate-fade-in"
+      class="package-page motion-safe:animate-fade-in animate-fade-in"
     >
       <!-- Package header -->
       <header class="area-header pb-8 border-b border-border">
@@ -887,7 +887,7 @@ defineOgImageComponent('Package', {
     <div
       v-else-if="status === 'error'"
       role="alert"
-      class="col-span-full flex flex-col items-center py-20 text-center"
+      class="flex flex-col items-center py-20 text-center"
     >
       <h1 class="font-mono text-2xl font-medium mb-4">{{ $t('package.not_found') }}</h1>
       <p class="text-fg-muted mb-8">
@@ -901,7 +901,6 @@ defineOgImageComponent('Package', {
 <style scoped>
 .package-page {
   display: grid;
-  padding: 2rem 1rem;
   gap: 2rem;
 
   /* Mobile: single column, sidebar above readme */
@@ -917,7 +916,6 @@ defineOgImageComponent('Package', {
 /* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
 @media (min-width: 1024px) {
   .package-page {
-    padding: 3rem 1.5rem;
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
       'header  header'
@@ -930,7 +928,7 @@ defineOgImageComponent('Package', {
 /* Desktop: floating sidebar alongside all content */
 @media (min-width: 1280px) {
   .package-page {
-    grid-template-columns: 1fr 320px;
+    grid-template-columns: 1fr 20rem;
     grid-template-areas:
       'header  sidebar'
       'install sidebar'

From e0110a4a708343967442e6f47496837964ea2316 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Jan 2026 09:58:23 +0000
Subject: [PATCH 3/3] Remove duplicate animate-fade-in to respect motion
 preferences

---
 app/pages/[...package].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index dbd9ecdf1d..b1f7ed705a 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -300,7 +300,7 @@ defineOgImageComponent('Package', {
 
     <article
       v-else-if="status === 'success' && pkg"
-      class="package-page motion-safe:animate-fade-in animate-fade-in"
+      class="package-page motion-safe:animate-fade-in"
     >
       <!-- Package header -->
       <header class="area-header pb-8 border-b border-border">
@@ -775,7 +775,7 @@ defineOgImageComponent('Package', {
         <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
         <div
           v-if="readmeData?.html"
-          class="readme-content prose prose-invert max-w-70ch"
+          class="readme-content prose prose-invert max-w-[70ch]"
           v-html="readmeData.html"
         />
         <p v-else class="text-fg-subtle italic">