fix(grid): update column count when content szie changes

histoire-dev · Oct 17, 2022 · 0786a57 · 0786a57
1 parent 091da7b
commit 0786a57
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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>