feat(client): responsive adaptation for graph page (#182)

Author: alexzhang1030

packages/client/src/components/graph/GraphNavbar.vue

@@ -15,10 +15,8 @@ const filterId = graphFilterNodeId
 </script>
 
 <template>
-  <div flex="~ items-center gap-4" absolute left-0 top-0 z-10 navbar-base w-full px4 text-sm glass-effect>
-    <div>
-      <VueInput v-model="text" placeholder="Search modules..." />
-    </div>
+  <div flex="~ items-center gap-4 nowrap" class="[&_>*]:flex-[0_0_auto]" absolute left-0 top-0 z-10 navbar-base w-full overflow-x-auto px4 text-sm glass-effect>
+    <VueInput v-model="text" placeholder="Search modules..." />
     <div v-for="item in selectableItems" :key="item[0]" flex="~ gap-2 items-center">
       <VueCheckbox v-model="settings[item[0]]" />
       <span :class="{ 'text-gray-400 dark:text-gray-600': !settings[item[0]] }">Show {{ item[1] ?? item[0] }}</span>