feat: heading style for too long psl site

Author: enpitsuLin

src/App.vue

@@ -48,16 +48,20 @@
             :class="showTable ? '-rotate-90' : 'rotate-90'"
           ></div>
         </div>
-        <span class="p-2 text-sm">
+        <span class="p-2 text-sm truncate">
           <i18n-t keypath="tip">
             <template #count>
               <span
-                class="rounded-full px-2 py-0.25 text-xs bg-indigo-500 text-white"
+                class="rounded-full mx-1 px-2 py-0.25 text-xs bg-indigo-500 text-white"
               >
                 {{ data?.length }}
               </span>
             </template>
-            <template #host>{{ pagePsl }}</template>
+            <template #host>
+              <span :title="pagePsl ?? ''">
+                {{ pagePsl }}
+              </span>
+            </template>
           </i18n-t>
         </span>
         <div

src/components/DataTable.vue

@@ -34,7 +34,7 @@
           <template v-for="(item, i) of data" :key="item.id">
             <tr>
               <td
-                class="relative whitespace-nowrap p-2 text-right text-xs font-medium cursor-pointer"
+                class="relative truncate p-2 text-right text-xs font-medium cursor-pointer"
                 @click="toggleExpand(i)"
               >
                 <div
@@ -44,22 +44,22 @@
               </td>
               <td
                 :title="item.name"
-                class="whitespace-nowrap text-ellipsis break-all overflow-hidden py-2 pl-4 pr-3 text-xs font-medium max-w-60"
+                class="break-all truncate py-2 pl-4 pr-3 text-xs font-medium max-w-60"
               >
                 {{ item.name }}
               </td>
               <td
-                class="whitespace-nowrap text-ellipsis break-all overflow-hidden px-3 py-2 text-xs text-$ud-text-secondary"
+                class="break-all truncate px-3 py-2 text-xs text-$ud-text-secondary"
               >
                 {{ item.daily_installs }}
               </td>
               <td
-                class="whitespace-nowrap text-ellipsis break-all overflow-hidden px-3 py-2 text-xs text-$ud-text-secondary"
+                class="break-all truncate px-3 py-2 text-xs text-$ud-text-secondary"
               >
                 {{ formatTimeAgoWithI18n(new Date(item.code_updated_at)) }}
               </td>
               <td
-                class="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-xs font-medium"
+                class="relative truncate py-2 pl-3 pr-4 text-right text-xs font-medium"
               >
                 <a
                   :href="item.code_url"