From 81c9922386250273e458b06cf5101e9b235b6ee2 Mon Sep 17 00:00:00 2001
From: Victor Trumpel <victor.trumpel@gmail.com>
Date: Fri, 25 Sep 2026 21:27:44 +0300
Subject: [PATCH 1/2] fix: fix dashboard layout grid on item dynamic added

---
 .../Dashboard/Dashboard.stories.tsx           | 49 +++++++++++++++++++
 .../Dashboard/helpers/createDefaultLayout.ts  | 40 ++++++---------
 .../Dashboard/hooks/useDashboardConfig.ts     |  2 +-
 3 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.stories.tsx b/src/components/Dashboard/Dashboard.stories.tsx
index d0a16ad..cf2de25 100644
--- a/src/components/Dashboard/Dashboard.stories.tsx
+++ b/src/components/Dashboard/Dashboard.stories.tsx
@@ -216,6 +216,53 @@ function NarrowGridStory() {
     );
 }
 
+function DynamicAddItemsStory() {
+    const [layout, setLayout] = React.useState([{i: 'errors', x: 0, y: 0, w: 2, h: 3}]);
+    const [items, setItems] = React.useState(operationalItems);
+
+    const handleAddItem = () => {
+        setItems((currentItems) => {
+            const itemNumber = currentItems.length + 1;
+
+            return [
+                ...currentItems,
+                {
+                    id: `metric-${itemNumber}`,
+                    content: (
+                        <Flex direction="column" gap={1}>
+                            <Text variant="display-3">{itemNumber * 128}</Text>
+                            <Text color="secondary">Dynamically added metric #{itemNumber}</Text>
+                        </Flex>
+                    ),
+                },
+            ];
+        });
+    };
+
+    return (
+        <StoryFrame
+            title="Controlled layout"
+            description="Switch presets, then drag or resize a card: every change is saved back to the controlled layout."
+            actions={
+                <>
+                    <Button selected={layout === balancedLayout} onClick={handleAddItem}>
+                        Add item
+                    </Button>
+                </>
+            }
+        >
+            <Dashboard
+                items={items}
+                defaultLayout={layout}
+                onLayoutChange={(nextLayout) => {
+                    setLayout(nextLayout);
+                    action('onLayoutChange')(nextLayout);
+                }}
+            />
+        </StoryFrame>
+    );
+}
+
 const meta: Meta<typeof Dashboard> = {
     title: 'Components/Dashboard',
     component: Dashboard,
@@ -246,3 +293,5 @@ export const ControlledLayout: Story = {render: () => <ControlledLayoutStory />}
 
 /** Grid columns, row height, gaps and compaction can be adapted to the host container. */
 export const CustomGrid: Story = {render: () => <NarrowGridStory />};
+
+export const AddItems: Story = {render: () => <DynamicAddItemsStory />};
diff --git a/src/components/Dashboard/helpers/createDefaultLayout.ts b/src/components/Dashboard/helpers/createDefaultLayout.ts
index 38b9302..0e1b43a 100644
--- a/src/components/Dashboard/helpers/createDefaultLayout.ts
+++ b/src/components/Dashboard/helpers/createDefaultLayout.ts
@@ -6,6 +6,7 @@ const DEFAULT_ITEM_HEIGHT = 4;
 export const createDefaultLayout = (
     items: DashboardRenderItem[],
     columns: number,
+    defaultLayout?: ConfigLayout[],
 ): ConfigLayout[] => {
     const itemCount = items.length;
 
@@ -14,30 +15,17 @@ export const createDefaultLayout = (
 
     const itemsPerRow = Math.max(Math.floor(columns / width), 1);
 
-    return Array.from({length: itemCount}, (_, index) => ({
-        i: items[index].id,
-        x: (index % itemsPerRow) * width,
-        y: Math.floor(index / itemsPerRow) * height,
-        w: width,
-        h: height,
-    }));
-};
-
-export const createDefaultLayoutForItem = (
-    item: DashboardRenderItem,
-    columns: number,
-    index: number,
-) => {
-    const width = Math.min(Math.ceil(columns / 2), columns);
-    const height = DEFAULT_ITEM_HEIGHT;
-
-    const itemsPerRow = Math.max(Math.floor(columns / width), 1);
-
-    return {
-        i: item.id,
-        x: (index % itemsPerRow) * width,
-        y: Math.floor(index / itemsPerRow) * height,
-        w: width,
-        h: DEFAULT_ITEM_HEIGHT,
-    };
+    return Array.from({length: itemCount}, (_, index) => {
+        if (defaultLayout?.[index]) {
+            return defaultLayout?.[index];
+        }
+
+        return {
+            i: items[index].id,
+            x: (index % itemsPerRow) * width,
+            y: Math.floor(index / itemsPerRow) * height,
+            w: width,
+            h: height,
+        };
+    });
 };
diff --git a/src/components/Dashboard/hooks/useDashboardConfig.ts b/src/components/Dashboard/hooks/useDashboardConfig.ts
index a3387d1..b8301ee 100644
--- a/src/components/Dashboard/hooks/useDashboardConfig.ts
+++ b/src/components/Dashboard/hooks/useDashboardConfig.ts
@@ -38,7 +38,7 @@ export const useDashboardConfig = (
     const cols = gridProps.cols;
 
     const layout = useMemo(
-        () => defaultLayout ?? createDefaultLayout(items, cols),
+        () => createDefaultLayout(items, cols, defaultLayout),
         [defaultLayout, items, cols],
     );
 

From 83b811489576611ca821d9c23847bd6905689c06 Mon Sep 17 00:00:00 2001
From: Victor Trumpel <victor.trumpel@gmail.com>
Date: Mon, 28 Sep 2026 12:11:58 +0300
Subject: [PATCH 2/2] refactor: delete redundant React.Fragment

---
 src/components/Dashboard/Dashboard.stories.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.stories.tsx b/src/components/Dashboard/Dashboard.stories.tsx
index cf2de25..29f130d 100644
--- a/src/components/Dashboard/Dashboard.stories.tsx
+++ b/src/components/Dashboard/Dashboard.stories.tsx
@@ -244,11 +244,9 @@ function DynamicAddItemsStory() {
             title="Controlled layout"
             description="Switch presets, then drag or resize a card: every change is saved back to the controlled layout."
             actions={
-                <>
-                    <Button selected={layout === balancedLayout} onClick={handleAddItem}>
-                        Add item
-                    </Button>
-                </>
+                <Button selected={layout === balancedLayout} onClick={handleAddItem}>
+                    Add item
+                </Button>
             }
         >
             <Dashboard