fix(ui): optimize table style

app/components/Package/Table.vue

@@ -115,7 +115,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <!-- Name (always visible) -->
           <th
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
             }"
@@ -149,23 +149,23 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('version')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
           >
             {{ $t(getColumnLabelKey('version')) }}
           </th>
 
           <th
             v-if="isColumnVisible('description')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
           >
             {{ $t(getColumnLabelKey('description')) }}
           </th>
 
           <th
             v-if="isColumnVisible('downloads')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200':
                 isSortable('downloads'),
@@ -200,7 +200,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('updated')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
             }"
@@ -234,55 +234,55 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('maintainers')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('maintainers')) }}
           </th>
 
           <th
             v-if="isColumnVisible('keywords')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('keywords')) }}
           </th>
 
           <th
             v-if="isColumnVisible('qualityScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('qualityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('popularityScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('popularityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('maintenanceScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('maintenanceScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('combinedScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('combinedScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('security')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('security')) }}
           </th>
@@ -301,17 +301,17 @@ function getColumnLabelKey(id: ColumnId): string {
             <td v-if="isColumnVisible('description')" class="py-3 px-3">
               <div class="h-4 w-48 bg-bg-muted rounded animate-pulse" />
             </td>
-            <td v-if="isColumnVisible('downloads')" class="py-3 px-3 text-end">
+            <td v-if="isColumnVisible('downloads')" class="py-3 px-3">
               <div class="h-4 w-16 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('updated')" class="py-3 px-3">
-              <div class="h-4 w-20 bg-bg-muted rounded animate-pulse" />
+              <div class="h-4 w-20 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('maintainers')" class="py-3 px-3">
-              <div class="h-4 w-24 bg-bg-muted rounded animate-pulse" />
+              <div class="h-4 w-24 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('keywords')" class="py-3 px-3">
-              <div class="h-4 w-32 bg-bg-muted rounded animate-pulse" />
+              <div class="h-4 w-32 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
           </tr>
         </template>

app/components/Package/TableRow.vue

@@ -44,15 +44,15 @@ const allMaintainersText = computed(() => {
 
 <template>
   <tr
-    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
+    class="group border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
     tabindex="0"
     :data-result-index="index"
   >
     <!-- Name (always visible) -->
     <td class="py-2 px-3">
       <NuxtLink
         :to="packageUrl"
-        class="font-mono text-sm text-fg hover:text-accent-muted transition-colors duration-200"
+        class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
       >
         {{ pkg.name }}
       </NuxtLink>
@@ -80,7 +80,10 @@ const allMaintainersText = computed(() => {
     </td>
 
     <!-- Updated -->
-    <td v-if="isColumnVisible('updated')" class="py-2 px-3 font-mono text-xs text-fg-muted">
+    <td
+      v-if="isColumnVisible('updated')"
+      class="py-2 px-3 font-mono text-end text-xs text-fg-muted"
+    >
       <DateTime
         v-if="updatedDate"
         :datetime="updatedDate"
@@ -92,7 +95,7 @@ const allMaintainersText = computed(() => {
     </td>
 
     <!-- Maintainers -->
-    <td v-if="isColumnVisible('maintainers')" class="py-2 px-3 text-sm text-fg-muted">
+    <td v-if="isColumnVisible('maintainers')" class="py-2 px-3 text-sm text-fg-muted text-end">
       <span
         v-if="pkg.maintainers?.length"
         :title="pkg.maintainers.length > 3 ? allMaintainersText : undefined"
@@ -104,7 +107,7 @@ const allMaintainersText = computed(() => {
         >
           <NuxtLink
             :to="`/~${maintainer.username || maintainer.name}`"
-            class="hover:text-accent-muted transition-colors duration-200"
+            class="hover:text-accent-fallback transition-colors duration-200"
             @click.stop
             >{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink
           ><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span>
@@ -117,10 +120,10 @@ const allMaintainersText = computed(() => {
     </td>
 
     <!-- Keywords -->
-    <td v-if="isColumnVisible('keywords')" class="py-2 px-3">
+    <td v-if="isColumnVisible('keywords')" class="py-2 px-3 text-end">
       <div
         v-if="pkg.keywords?.length"
-        class="flex flex-wrap gap-1"
+        class="flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
         <TagClickable
@@ -130,6 +133,7 @@ const allMaintainersText = computed(() => {
           :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
+          :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
         >
           {{ keyword }}
         </TagClickable>

uno.config.ts

@@ -120,7 +120,7 @@ export default defineConfig({
   shortcuts: [
     // Layout
     ['container', 'max-w-6xl mx-auto px-4 sm:px-6'],
-    ['container-sm', 'max-w-4xl mx-auto px-4 sm:px-6'],
+    ['container-sm', 'max-w-5xl mx-auto px-4 sm:px-6'],
 
     // Focus states - subtle but accessible
     ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],