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 }"
>
-
-
+
+
+
+
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))))