From 749779354c954f13b46ab4ae9f0f5c7d98304c60 Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Fri, 30 Jan 2026 11:30:33 +0600
Subject: [PATCH 1/2] chore: horizontal scrollbar for table view

---
 app/pages/search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 93d555f2..5d1815c9 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -703,7 +703,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="flex-1 overflow-x-hidden">
+  <main class="flex-1" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
     <!-- Results area with container padding -->
     <div class="container-sm py-6">
       <section v-if="query" :aria-label="$t('search.results')">

From a3f22acd23a1f3194f24d8ed2fa7f89959544152 Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Fri, 30 Jan 2026 12:04:05 +0600
Subject: [PATCH 2/2] chore: improve column in mobile version

---
 app/components/PackageListToolbar.vue | 41 +++++++++++++++++++--------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/app/components/PackageListToolbar.vue b/app/components/PackageListToolbar.vue
index b0248537..6de759a4 100644
--- a/app/components/PackageListToolbar.vue
+++ b/app/components/PackageListToolbar.vue
@@ -142,17 +142,11 @@ function getSortKeyLabelKey(key: SortKey): string {
 
       <div class="flex-1" />
 
-      <div class="flex flex-wrap items-center gap-3">
-        <!-- Column picker (table view only) -->
-        <ColumnPicker
-          v-if="viewMode === 'table'"
-          :columns="columns"
-          @toggle="emit('toggleColumn', $event)"
-          @reset="emit('resetColumns')"
-        />
-
+      <div
+        class="flex flex-wrap items-center gap-3 sm:justify-end justify-between w-full sm:w-auto"
+      >
         <!-- Sort controls -->
-        <div class="flex items-center gap-1 shrink-0">
+        <div class="flex items-center gap-1 shrink-0 order-1 sm:order-1">
           <!-- Sort key dropdown -->
           <div class="relative">
             <label for="sort-select" class="sr-only">{{ $t('filters.sort.label') }}</label>
@@ -205,8 +199,31 @@ function getSortKeyLabelKey(key: SortKey): string {
           </button>
         </div>
 
-        <!-- View mode toggle -->
-        <ViewModeToggle v-model="viewMode" />
+        <!-- View mode toggle - mobile (left side, row 2) -->
+        <div class="flex sm:hidden items-center gap-1 order-2">
+          <ViewModeToggle v-model="viewMode" />
+        </div>
+
+        <!-- Column picker - mobile (right side, row 2) -->
+        <ColumnPicker
+          v-if="viewMode === 'table'"
+          class="flex sm:hidden order-3"
+          :columns="columns"
+          @toggle="emit('toggleColumn', $event)"
+          @reset="emit('resetColumns')"
+        />
+
+        <!-- View mode toggle + Column picker - desktop (right side, row 1) -->
+        <div class="hidden sm:flex items-center gap-1 order-2">
+          <ViewModeToggle v-model="viewMode" />
+
+          <ColumnPicker
+            v-if="viewMode === 'table'"
+            :columns="columns"
+            @toggle="emit('toggleColumn', $event)"
+            @reset="emit('resetColumns')"
+          />
+        </div>
       </div>
     </div>