Update stories to make the visual changes easier to see

frontend/src/components/VHeader/meta/VFilterButton.stories.mdx

@@ -29,10 +29,16 @@ import { IMAGE } from "~/constants/media"
   }}
 />
 
+[//]:
+  #
+  "Flexible-width wrappers are added to the template to make the button
+better visible on a darker background and to make the changes in button width
+easier to see."
+
 export const Template = (args, { argTypes }) => ({
-  template: `<div id="wrapper" class="w-40 h-16 bg-dark-charcoal-06 flex align-center justify-center">
+  template: `<div class="flex"><div id="wrapper" class="px-4 h-16 bg-dark-charcoal-06 flex align-center justify-center">
   <VFilterButton v-bind="args" v-on="args" />
-  </div>`,
+  </div></div>`,
   components: { VFilterButton },
   props: Object.keys(argTypes),
   setup() {

frontend/test/storybook/visual-regression/v-filter-button.spec.ts

@@ -42,6 +42,20 @@ test.describe("VFilterButton", () => {
         )
       })
 
+      /**
+       * When focused and not pressed, the button is the same with and without hover,
+       * so we reuse the snapshot from the focused test.
+       */
+      test(`focused, hovered, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await page.locator("button", { hasText: "Filter" }).focus()
+        await page.locator("button", { hasText: "Filter" }).hover()
+        await expectSnapshot(
+          `filter-button-focused-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+
       test(`pressed, ${filterCount} filters`, async ({ page }) => {
         await gotoWithArgs(page, {
           appliedFilters: filterCount,