From 83113cbf568d630f41fc72d2c47412d88d83672d Mon Sep 17 00:00:00 2001
From: JianJroh <rhjian@foxmail.com>
Date: Tue, 26 Mar 2024 16:26:50 +0800
Subject: [PATCH] feat(client/components): support responsive horizontal layout

---
 packages/client/src/pages/components.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index d21f44ea..b5c2e47a 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -259,11 +259,16 @@ watchDebounced(filterName, (v) => {
 }, { debounce: 300 })
 
 const devtoolsState = useDevToolsState()
+
+// responsive horizontal layout
+const splitpanesRef = ref<HTMLDivElement>()
+const { width: splitpanesWidth } = useElementSize(splitpanesRef)
+const horizontal = computed(() => splitpanesWidth.value < 700)
 </script>
 
 <template>
   <PanelGrids h-screen>
-    <Splitpanes>
+    <Splitpanes ref="splitpanesRef" :horizontal="horizontal">
       <Pane flex flex-col border="r base">
         <div w-full flex gap2 px2 py2>
           <VueInput v-if="loaded" v-model="filterName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." flex-1 />