From 5b2d4c853dbe4e1ce3f08be3527675e58228d1c5 Mon Sep 17 00:00:00 2001
From: Nestor Vera <nestorvera@me.com>
Date: Fri, 30 Jan 2026 00:23:55 +0100
Subject: [PATCH] fix(ui): use tooltips in table columns dropdown to avoid
 spanning multiple lines

---
 app/components/ColumnPicker.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 132eb15303..553873ebf8 100644
--- a/app/components/ColumnPicker.vue
+++ b/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>