From 14000111f9eed56a05b29afa8f6c78babe6fc4df Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 13 Jun 2022 14:56:11 +0200
Subject: [PATCH] docs: fit view on features flows on wrapper resize

---
 docs/components/home/Features.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index 1070b34a..dd9897e0 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -4,6 +4,7 @@ import type { VueFlowStore } from '@braks/vue-flow'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
+const el = ref()
 const instances: VueFlowStore[] = []
 
 const onLoad = (instance: VueFlowStore) => {
@@ -15,13 +16,15 @@ const fitViews = () => {
   instances.forEach((i) => i.fitView())
 }
 
-watchDebounced([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () => fitViews(), {
-  debounce: 50,
-})
+const { stop } = useResizeObserver(
+  el,
+  useDebounceFn(() => fitViews(), 5),
+)
+onBeforeUnmount(stop)
 </script>
 
 <template>
-  <div class="w-full dark:(bg-black text-white)">
+  <div ref="el" class="w-full dark:(bg-black text-white)">
     <div
       class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
     >