[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: horizontal scrollbar for table view + columns picker (#390)

authored by

abeer0 and committed by
GitHub
e11d0cc6 12b1a0a7

+30 -13
+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
··· 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')">