From 3036f43b756768453a66c973bebdd383f7c3c68a Mon Sep 17 00:00:00 2001
From: Younes <younesbarraddev@gmail.com>
Date: Mon, 12 Jun 2023 00:31:18 +0100
Subject: [PATCH] fix: featured version ui shifts (#1191)

---
 pages/[type]/[id].vue | 71 ++++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/pages/[type]/[id].vue b/pages/[type]/[id].vue
index 6938fb0f..2c0c8652 100644
--- a/pages/[type]/[id].vue
+++ b/pages/[type]/[id].vue
@@ -569,43 +569,46 @@
               <ChevronRightIcon class="featured-header-chevron" aria-hidden="true" />
             </nuxt-link>
           </div>
-          <NuxtLink
-            v-for="version in featuredVersions"
-            :key="version.id"
-            class="featured-version button-transparent"
-            :to="`/${project.project_type}/${
-              project.slug ? project.slug : project.id
-            }/version/${encodeURI(version.displayUrlEnding)}`"
-          >
-            <a
-              v-tooltip="
-                version.primaryFile.filename + ' (' + $formatBytes(version.primaryFile.size) + ')'
-              "
-              :href="version.primaryFile.url"
-              class="download square-button brand-button"
-              :aria-label="`Download ${version.name}`"
-              @click.stop="(event) => event.stopPropagation()"
+          <ClientOnly>
+            <NuxtLink
+              v-for="(version, index) in featuredVersions"
+              :key="index"
+              class="featured-version button-transparent"
+              :to="`/${project.project_type}/${
+                project.slug ? project.slug : project.id
+              }/version/${encodeURI(version.displayUrlEnding)}`"
+              :ref_key="`featured-version-${index}`"
             >
-              <DownloadIcon aria-hidden="true" />
-            </a>
-            <div class="info">
-              <nuxt-link
-                :to="`/${project.project_type}/${
-                  project.slug ? project.slug : project.id
-                }/version/${encodeURI(version.displayUrlEnding)}`"
-                class="top"
+              <NuxtLink
+                v-tooltip="
+                  version.primaryFile.filename + ' (' + $formatBytes(version.primaryFile.size) + ')'
+                "
+                :to="version.primaryFile.url"
+                external
+                class="download square-button brand-button"
+                :aria-label="`Download ${version.name}`"
               >
-                {{ version.name }}
-              </nuxt-link>
-              <div v-if="version.game_versions.length > 0" class="game-version item">
-                {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
-                {{ $formatVersion(version.game_versions) }}
+                <DownloadIcon aria-hidden="true" />
+              </NuxtLink>
+              <div class="info">
+                <NuxtLink
+                  :to="`/${project.project_type}/${
+                    project.slug ? project.slug : project.id
+                  }/version/${encodeURI(version.displayUrlEnding)}`"
+                  class="top"
+                >
+                  {{ version.name }}
+                </NuxtLink>
+                <div v-if="version.game_versions.length > 0" class="game-version item">
+                  {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
+                  {{ $formatVersion(version.game_versions) }}
+                </div>
+                <Badge v-if="version.version_type === 'release'" type="release" color="green" />
+                <Badge v-else-if="version.version_type === 'beta'" type="beta" color="orange" />
+                <Badge v-else-if="version.version_type === 'alpha'" type="alpha" color="red" />
               </div>
-              <Badge v-if="version.version_type === 'release'" type="release" color="green" />
-              <Badge v-else-if="version.version_type === 'beta'" type="beta" color="orange" />
-              <Badge v-else-if="version.version_type === 'alpha'" type="alpha" color="red" />
-            </div>
-          </NuxtLink>
+            </NuxtLink>
+          </ClientOnly>
           <hr class="card-divider" />
         </template>
         <h2 class="card-header">Project members</h2>