fix: use css modules for package page (#1242)

Author: danielroe

app/pages/package/[[org]]/[name].vue

@@ -517,12 +517,12 @@ onKeyStroke(
   <main class="container flex-1 w-full py-8">
     <PackageSkeleton v-if="status === 'pending'" />
 
-    <article v-else-if="status === 'success' && pkg" class="package-page">
+    <article v-else-if="status === 'success' && pkg" :class="$style.packagePage">
       <!-- Package header -->
       <header
-        class="area-header sticky top-14 z-1 bg-[--bg] py-2 border-border"
+        class="sticky top-14 z-1 bg-[--bg] py-2 border-border"
         ref="header"
-        :class="{ 'border-b': isHeaderPinned }"
+        :class="[$style.areaHeader, { 'border-b': isHeaderPinned }]"
       >
         <!-- Package name and version -->
         <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
@@ -545,10 +545,11 @@ onKeyStroke(
             <button
               type="button"
               @click="copyPkgName()"
-              class="copy-button absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
-              :class="
-                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
-              "
+              class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+              :class="[
+                $style.copyButton,
+                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
+              ]"
               :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
             >
               <span
@@ -610,7 +611,8 @@ onKeyStroke(
             v-if="resolvedVersion"
             as="nav"
             :aria-label="$t('package.navigation')"
-            class="package-nav hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
+            class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
+            :class="$style.packageNav"
           >
             <LinkBase
               variant="button-secondary"
@@ -701,7 +703,7 @@ onKeyStroke(
       </header>
 
       <!-- Package details -->
-      <section class="area-details">
+      <section :class="$style.areaDetails">
         <div class="mb-4">
           <!-- Description container with min-height to prevent CLS -->
           <div class="max-w-2xl min-h-[4.5rem]">
@@ -978,7 +980,7 @@ onKeyStroke(
       </section>
 
       <!-- Binary-only packages: Show only execute command (no install) -->
-      <section v-if="isBinaryOnly" class="area-install scroll-mt-20">
+      <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
             {{ $t('package.run.title') }}
@@ -1000,7 +1002,7 @@ onKeyStroke(
       </section>
 
       <!-- Regular packages: Install command with optional run command -->
-      <section v-else id="get-started" class="area-install scroll-mt-20">
+      <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2
             id="get-started-heading"
@@ -1029,7 +1031,7 @@ onKeyStroke(
         </div>
       </section>
 
-      <div class="area-vulns space-y-6">
+      <div class="space-y-6" :class="$style.areaVulns">
         <!-- Bad package warning -->
         <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
         <!-- Vulnerability scan -->
@@ -1049,7 +1051,7 @@ onKeyStroke(
       </div>
 
       <!-- README -->
-      <section id="readme" class="area-readme min-w-0 scroll-mt-20">
+      <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
         <div class="flex flex-wrap items-center justify-between mb-3 px-1">
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <LinkBase to="#readme">
@@ -1129,7 +1131,7 @@ onKeyStroke(
         </section>
       </section>
 
-      <PackageSidebar class="area-sidebar">
+      <PackageSidebar :class="$style.areaSidebar">
         <div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>
@@ -1212,10 +1214,13 @@ onKeyStroke(
   </main>
 </template>
 
-<style scoped>
-.package-page {
+<style module>
+.packagePage {
   display: grid;
   gap: 2rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
@@ -1230,7 +1235,7 @@ onKeyStroke(
 
 /* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
 @media (min-width: 1024px) {
-  .package-page {
+  .packagePage {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
       'header  header'
@@ -1244,7 +1249,7 @@ onKeyStroke(
 
 /* Desktop: floating sidebar alongside all content */
 @media (min-width: 1280px) {
-  .package-page {
+  .packagePage {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
       'header  sidebar'
@@ -1255,68 +1260,61 @@ onKeyStroke(
   }
 }
 
-.area-header {
-  grid-area: header;
-}
-
-.area-details {
-  grid-area: details;
-}
-
-.area-install {
-  grid-area: install;
-}
-
-.area-vulns {
-  grid-area: vulns;
-  overflow-x: hidden;
-}
-
-.area-readme {
-  grid-area: readme;
-}
-
-.area-readme > .readme {
-  overflow-x: hidden;
+/* Ensure all children respect max-width */
+.packagePage > * {
+  max-width: 100%;
+  min-width: 0;
 }
 
-.area-sidebar {
-  grid-area: sidebar;
+.areaHeader {
+  grid-area: header;
 }
 
 /* Improve package name wrapping for narrow screens */
-.area-header h1 {
+.areaHeader h1 {
   overflow-wrap: anywhere;
 }
 
 /* Ensure description text wraps properly */
-.area-header p {
+.areaHeader p {
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
 }
 
+.areaDetails {
+  grid-area: details;
+}
+
+.areaInstall {
+  grid-area: install;
+}
+
 /* Allow install command text to break on narrow screens */
-.area-install code {
+.areaInstall code {
   word-break: break-word;
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
-/* Ensure all text content wraps on narrow screens */
-.package-page {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
+.areaVulns {
+  grid-area: vulns;
+  overflow-x: hidden;
 }
 
-/* Ensure all children respect max-width */
-.package-page > * {
-  max-width: 100%;
-  min-width: 0;
+.areaReadme {
+  grid-area: readme;
+}
+
+.areaReadme > :global(.readme) {
+  overflow-x: hidden;
+}
+
+.areaSidebar {
+  grid-area: sidebar;
 }
 
-.copy-button {
+.copyButton {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
@@ -1331,8 +1329,8 @@ onKeyStroke(
     width 0.01s 0.34s allow-discrete;
 }
 
-.group:hover .copy-button,
-.copy-button:focus-visible {
+:global(.group):hover .copyButton,
+.copyButton:focus-visible {
   clip: auto;
   clip-path: none;
   height: auto;
@@ -1344,22 +1342,22 @@ onKeyStroke(
 }
 
 @media (hover: none) {
-  .copy-button {
+  .copyButton {
     display: none;
   }
 }
 
 /* Mobile floating nav: safe-area positioning + kbd hiding */
 @media (max-width: 639.9px) {
-  .package-nav {
+  .packageNav {
     bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
   }
 
-  .package-nav > :deep(a kbd) {
+  .packageNav > :global(a kbd) {
     display: none;
   }
 
-  .package-page {
+  .packagePage {
     padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
   }
 }