fix: leaderboard carousel UI (#1394)

Signed-off-by: Efren Lim <[email protected]>

Author: emlimlf

frontend/app/components/modules/explore/components/leaderboard-carousel-section.vue

@@ -31,14 +31,20 @@ SPDX-License-Identifier: MIT
         </div>
       </template>
       <template #item="{ data }">
-        <lfx-leaderboard-card
-          v-if="!isPending"
-          :config="data"
-          :leaderboards="getLeaderboardsByType(data.key)"
-        />
-        <div v-else>
-          <lfx-skeleton class="!w-full !h-[440px] rounded-lg" />
-        </div>
+        <client-only>
+          <div v-if="!isPending">
+            <lfx-leaderboard-card
+              :config="data"
+              :leaderboards="getLeaderboardsByType(data.key)"
+            />
+          </div>
+          <div v-else>
+            <lfx-skeleton class="!w-full !h-[440px] rounded-lg" />
+          </div>
+          <template #fallback>
+            <lfx-skeleton class="!w-full !h-[440px] rounded-lg" />
+          </template>
+        </client-only>
       </template>
       <template #footer>
         <div class="md:hidden flex justify-center">

frontend/app/components/modules/leaderboards/components/sections/table-row.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: MIT
       <p
         :title="item.name"
         class="text-base leading-5 font-medium text-neutral-900 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"
-        :class="{ 'hover:underline text-sm cursor-pointer': isSmall }"
+        :class="{ 'hover:underline text-sm cursor-pointer': isSmall && !!item.slug }"
         @click="navigateToProject(item.slug)"
       >
         {{ item.name }}