forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: horizontal scrollbar for table view + columns picker (#390)
+30
-13
+29
-12
app/components/PackageListToolbar.vue
+29
-12
app/components/PackageListToolbar.vue
···
142
142
143
143
<div class="flex-1" />
144
144
145
-
<div class="flex flex-wrap items-center gap-3">
146
-
<!-- Column picker (table view only) -->
147
-
<ColumnPicker
148
-
v-if="viewMode === 'table'"
149
-
:columns="columns"
150
-
@toggle="emit('toggleColumn', $event)"
151
-
@reset="emit('resetColumns')"
152
-
/>
153
-
145
+
<div
146
+
class="flex flex-wrap items-center gap-3 sm:justify-end justify-between w-full sm:w-auto"
147
+
>
154
148
<!-- Sort controls -->
155
-
<div class="flex items-center gap-1 shrink-0">
149
+
<div class="flex items-center gap-1 shrink-0 order-1 sm:order-1">
156
150
<!-- Sort key dropdown -->
157
151
<div class="relative">
158
152
<label for="sort-select" class="sr-only">{{ $t('filters.sort.label') }}</label>
···
205
199
</button>
206
200
</div>
207
201
208
-
<!-- View mode toggle -->
209
-
<ViewModeToggle v-model="viewMode" />
202
+
<!-- View mode toggle - mobile (left side, row 2) -->
203
+
<div class="flex sm:hidden items-center gap-1 order-2">
204
+
<ViewModeToggle v-model="viewMode" />
205
+
</div>
206
+
207
+
<!-- Column picker - mobile (right side, row 2) -->
208
+
<ColumnPicker
209
+
v-if="viewMode === 'table'"
210
+
class="flex sm:hidden order-3"
211
+
:columns="columns"
212
+
@toggle="emit('toggleColumn', $event)"
213
+
@reset="emit('resetColumns')"
214
+
/>
215
+
216
+
<!-- View mode toggle + Column picker - desktop (right side, row 1) -->
217
+
<div class="hidden sm:flex items-center gap-1 order-2">
218
+
<ViewModeToggle v-model="viewMode" />
219
+
220
+
<ColumnPicker
221
+
v-if="viewMode === 'table'"
222
+
:columns="columns"
223
+
@toggle="emit('toggleColumn', $event)"
224
+
@reset="emit('resetColumns')"
225
+
/>
226
+
</div>
210
227
</div>
211
228
</div>
212
229
+1
-1
app/pages/search.vue
+1
-1
app/pages/search.vue
···
703
703
</script>
704
704
705
705
<template>
706
-
<main class="flex-1 overflow-x-hidden">
706
+
<main class="flex-1" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
707
707
<!-- Results area with container padding -->
708
708
<div class="container-sm py-6">
709
709
<section v-if="query" :aria-label="$t('search.results')">