forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: use tooltips in table columns dropdown to avoid spanning multiple lines (#370)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Nestor Vera
Daniel Roe
and committed by
GitHub
6378beec
3ac0f83f
+11
-7
+11
-7
app/components/ColumnPicker.vue
+11
-7
app/components/ColumnPicker.vue
···
93
93
v-if="isOpen"
94
94
ref="menuRef"
95
95
:id="menuId"
96
-
class="absolute right-0 mt-2 w-56 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
96
+
class="absolute right-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
97
97
role="group"
98
98
:aria-label="$t('filters.columns.show')"
99
99
>
···
109
109
<label
110
110
v-for="column in toggleableColumns"
111
111
:key="column.id"
112
-
class="flex items-center px-3 py-2 transition-colors duration-200"
112
+
class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
113
113
:class="
114
114
column.disabled
115
115
? 'opacity-50 cursor-not-allowed'
···
124
124
class="w-4 h-4 accent-fg bg-bg-muted border-border rounded disabled:opacity-50"
125
125
@change="!column.disabled && emit('toggle', column.id)"
126
126
/>
127
-
<span class="ml-2 text-sm text-fg-muted font-mono flex-1">
127
+
<span class="text-sm text-fg-muted font-mono flex-1">
128
128
{{ getColumnLabel(column.id) }}
129
129
</span>
130
-
<span
130
+
<AppTooltip
131
131
v-if="column.disabled"
132
132
:id="`${column.id}-disabled-reason`"
133
-
class="text-xs text-fg-subtle italic"
133
+
class="text-fg-subtle"
134
+
:text="$t('filters.columns.coming_soon')"
135
+
position="left"
134
136
>
135
-
{{ $t('filters.columns.coming_soon') }}
136
-
</span>
137
+
<span class="size-4 flex justify-center items-center text-xs border rounded-full"
138
+
>i</span
139
+
>
140
+
</AppTooltip>
137
141
</label>
138
142
</div>
139
143