absolute position to fully show tooltip

ppy-sb · Dec 31, 2023 · 89f00d9 · 89f00d9
1 parent 9e7a45f
commit 89f00d9
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/src/components/app/score-list-item.vue b/src/components/app/score-list-item.vue
@@ -96,7 +96,7 @@ fr-FR:
               :src="beatmap.beatmapset.assets.list"
               :alt="autoLocale(beatmap.beatmapset.meta).title"
               :onerror="placeholder"
-              class="object-cover w-20 h-16 rounded-xl shadow-md"
+              class="object-cover w-20 h-16 shadow-md rounded-xl"
             >
           </picture>
           <icon v-else class="w-20 h-16" name="clarity:unknown-status-line" size="100%" />
@@ -129,10 +129,13 @@ fr-FR:
               :name="rankingStatusIconMapping[beatmap.status]!"
               :aria-label="beatmap.status"
             />
-            <span v-if="meta" class="text-sm truncate md:text-md xl:text-lg font-bold">
+            <span v-if="meta" class="text-sm font-bold truncate md:text-md xl:text-lg">
               {{ meta.artist }} - {{ meta.title }}
             </span>
-            <div class="flex gap-2 text-xs md:text-sm lg:text-md flex-wrap">
+            <div class="text-xs md:text-sm lg:text-md opacity-0 pointer-events-none">
+              IM HERE TO TAKE HEIGHT
+            </div>
+            <div class="absolute flex flex-wrap gap-2 text-xs md:text-sm lg:text-md">
               <span v-if="beatmap" class="font-semibold">
                 {{ beatmap.version }}
               </span>
@@ -151,22 +154,22 @@ fr-FR:
           </div>
         </div>
       </div>
-      <div class="flex relative">
+      <div class="relative flex">
         <div class="flex flex-col">
           <div class="flex items-center justify-end flex-grow text-lg sm:text-xl lg:text-2xl">
             <template v-if="(ppRankingSystems).includes(props.rankingSystem as LeaderboardPPRankingSystem)">
-              <div class="font-bold font-mono">
+              <div class="font-mono font-bold">
                 {{ score.pp.toFixed(2) }}
               </div>
               <span class="font-light">{{ $t('global.pp') }}</span>
             </template>
             <template v-else-if="(leaderboardScoreRankingSystems).includes(props.rankingSystem as LeaderboardScoreRankingSystem)">
-              <div class="font-bold font-mono">
+              <div class="font-mono font-bold">
                 {{ numberFmt(score.score) }}
               </div>
             </template>
           </div>
-          <div class="mt-auto text-sm md:text-md lg:text-md whitespace-nowrap justify-end">
+          <div class="justify-end mt-auto text-sm md:text-md lg:text-md whitespace-nowrap">
             <div class="text-right">
               <template v-if="beatmap">
                 <span class="font-semibold align-middle">
@@ -193,7 +196,7 @@ fr-FR:
             </span>
           </div>
         </div>
-        <div class="text-4xl md:text-5xl font-mono w-14 md:w-20 text-center">
+        <div class="font-mono text-4xl text-center md:text-5xl w-14 md:w-20">
           {{ score.grade }}
         </div>
       </div>