From b77be5c64f5fe4e7435dc922b601810b8df0fd1e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 25 Sep 2023 13:39:08 +0000
Subject: [PATCH] feat: Integrated search data(grid) with mobile view

---
 .../smartsheet/toolbar/SearchData.vue         | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 993ebdcadb..a38f806556 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -23,6 +23,8 @@ const { search, loadFieldQuery } = useFieldQuery()
 
 const isDropdownOpen = ref(false)
 
+const { isMobileMode } = useGlobal()
+
 const isFocused = ref(false)
 
 const searchDropdown = ref(null)
@@ -93,11 +95,23 @@ watch(columns, () => {
       @click="isDropdownOpen = !isDropdownOpen"
     >
       <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
-      <div class="w-16 group-hover:w-12 text-[0.75rem] font-medium text-gray-400 truncate">
+      <div v-if="!isMobileMode" class="w-16 group-hover:w-12 text-[0.75rem] font-medium text-gray-400 truncate">
         {{ displayColumnLabel }}
       </div>
-      <div class="hidden group-hover:block">
-        <component :is="iconMap.arrowDown" class="text-gray-400 text-sm" />
+      <div
+        :class="{
+          'hidden group-hover:block': !isMobileMode,
+          'text-gray-700': isMobileMode,
+        }"
+      >
+        <component
+          :is="iconMap.arrowDown"
+          class="text-sm"
+          :class="{
+            'text-gray-400': !isMobileMode,
+            'text-gray-600': isMobileMode,
+          }"
+        />
       </div>
       <a-select
         v-model:value="search.field"