fix: don't introduce a bigger gap than already exists in prod

Author: lino-levan

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

@@ -921,13 +921,6 @@ defineOgImageComponent('Package', {
         </dl>
       </header>
 
-      <!-- Bad package warning -->
-      <PackageReplacement
-        v-if="moduleReplacement"
-        :replacement="moduleReplacement"
-        class="area-replacement"
-      />
-
       <!-- Binary-only packages: Show only execute command (no install) -->
       <section v-if="isBinaryOnly" aria-labelledby="run-heading" class="area-install scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3">
@@ -1191,8 +1184,10 @@ defineOgImageComponent('Package', {
         </div>
       </section>
 
-      <!-- Vulnerability scan - full width -->
       <div class="area-vulns">
+        <!-- Bad package warning -->
+        <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+        <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree
             v-if="displayVersion"
@@ -1384,7 +1379,6 @@ defineOgImageComponent('Package', {
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
     'header'
-    'replacement'
     'install'
     'vulns'
     'sidebar'
@@ -1396,11 +1390,10 @@ defineOgImageComponent('Package', {
   .package-page {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      'header      header'
-      'replacement replacement'
-      'install     install'
-      'vulns       vulns'
-      'readme      sidebar';
+      'header  header'
+      'install install'
+      'vulns   vulns'
+      'readme  sidebar';
   }
 }
 
@@ -1409,22 +1402,17 @@ defineOgImageComponent('Package', {
   .package-page {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      'header      sidebar'
-      'replacement sidebar'
-      'install     sidebar'
-      'vulns       sidebar'
-      'readme      sidebar';
+      'header  sidebar'
+      'install sidebar'
+      'vulns   sidebar'
+      'readme  sidebar';
   }
 }
 
 .area-header {
   grid-area: header;
   overflow-x: hidden;
 }
-.area-replacement {
-  grid-area: replacement;
-  overflow-x: hidden;
-}
 .area-install {
   grid-area: install;
   overflow-x: hidden;