From 0786a57ea2019d6bee9285d4d18f54b67e5cd1dc Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Mon, 17 Oct 2022 14:55:26 +0200
Subject: [PATCH] fix(grid): update column count when content szie changes

---
 .../vue3/src/components/EventButtonGrid.story.vue  | 14 ++++++++++----
 .../src/app/components/story/StoryVariantGrid.vue  |  4 ++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/examples/vue3/src/components/EventButtonGrid.story.vue b/examples/vue3/src/components/EventButtonGrid.story.vue
index ea8c193e..df4ed271 100644
--- a/examples/vue3/src/components/EventButtonGrid.story.vue
+++ b/examples/vue3/src/components/EventButtonGrid.story.vue
@@ -8,9 +8,15 @@ import { logEvent } from 'histoire/client'
     title="events/EventButtonGrid"
     :layout="{ type: 'grid', width: 500 }"
   >
-    <EventButton @myEvent="logEvent('My event', $event)" /><br>
-    <button @click="logEvent('Click', $event)">
-      Click
-    </button>
+    <Variant
+      v-for="n in 9"
+      :key="n"
+      :title="`Variant ${n}`"
+    >
+      <EventButton @myEvent="logEvent('My event', $event)" /><br>
+      <button @click="logEvent('Click', $event)">
+        Click
+      </button>
+    </Variant>
   </Story>
 </template>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
index f2268454..9000fc87 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -107,6 +107,10 @@ onMounted(() => {
   updateSize()
 })
 
+useResizeObserver(gridEl, () => {
+  updateSize()
+})
+
 const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))))
 </script>