fix: use tooltips in table columns dropdown to avoid spanning multiple lines (#370)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: hacknug

app/components/ColumnPicker.vue

@@ -93,7 +93,7 @@ function handleReset() {
         v-if="isOpen"
         ref="menuRef"
         :id="menuId"
-        class="absolute right-0 mt-2 w-56 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+        class="absolute right-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
         role="group"
         :aria-label="$t('filters.columns.show')"
       >
@@ -109,7 +109,7 @@ function handleReset() {
             <label
               v-for="column in toggleableColumns"
               :key="column.id"
-              class="flex items-center px-3 py-2 transition-colors duration-200"
+              class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
               :class="
                 column.disabled
                   ? 'opacity-50 cursor-not-allowed'
@@ -124,16 +124,20 @@ function handleReset() {
                 class="w-4 h-4 accent-fg bg-bg-muted border-border rounded disabled:opacity-50"
                 @change="!column.disabled && emit('toggle', column.id)"
               />
-              <span class="ml-2 text-sm text-fg-muted font-mono flex-1">
+              <span class="text-sm text-fg-muted font-mono flex-1">
                 {{ getColumnLabel(column.id) }}
               </span>
-              <span
+              <AppTooltip
                 v-if="column.disabled"
                 :id="`${column.id}-disabled-reason`"
-                class="text-xs text-fg-subtle italic"
+                class="text-fg-subtle"
+                :text="$t('filters.columns.coming_soon')"
+                position="left"
               >
-                {{ $t('filters.columns.coming_soon') }}
-              </span>
+                <span class="size-4 flex justify-center items-center text-xs border rounded-full"
+                  >i</span
+                >
+              </AppTooltip>
             </label>
           </div>