improvements: address feedback

frontend/.storybook/decorators/DocumentDecorator.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import type { Decorator } from "@storybook/react-vite";
+
+export const DocumentDecorator: Decorator = (Story) => {
+  useEffect(() => {
+    const root = document.getElementsByTagName("html")[0];
+
+    root.setAttribute("class", "overflow-visible");
+  }, []);
+
+  return <Story />;
+};

frontend/.storybook/decorators/RouterDecorator.tsx

@@ -1,17 +1,17 @@
+import { useMemo } from "react";
 import type { Decorator } from "@storybook/react-vite";
 import { createRootRoute, createRouter, RouterProvider } from "@tanstack/react-router";
 
 export const RouterDecorator: Decorator = (Story) => {
-  const rootRoute = createRootRoute({
-    component: Story
-  });
+  const router = useMemo(() => {
+    const routeTree = createRootRoute({
+      component: Story
+    });
 
-  const routeTree = rootRoute;
+    return createRouter({
+      routeTree
+    });
+  }, [Story]);
 
-  const router = createRouter({
-    routeTree
-  });
-
-  // @ts-expect-error just to make Links happy :)
-  return <RouterProvider router={router} />;
+  return <RouterProvider router={router as any} />;
 };

frontend/.storybook/decorators/index.ts

@@ -1 +1,2 @@
+export * from "./DocumentDecorator";
 export * from "./RouterDecorator";

frontend/.storybook/preview.tsx

@@ -1,20 +1,11 @@
 import type { Preview } from "@storybook/react-vite";
 
-import { RouterDecorator } from "./decorators";
+import { DocumentDecorator, RouterDecorator } from "./decorators";
 
 import "../src/index.css";
 
 const preview: Preview = {
-  decorators: [
-    (Story) => {
-      const root = document.getElementsByTagName("html")[0];
-
-      root.setAttribute("class", "overflow-visible");
-
-      return <Story />;
-    },
-    RouterDecorator
-  ],
+  decorators: [DocumentDecorator, RouterDecorator],
   parameters: {
     controls: {
       matchers: {