From 699d2bc23af72a5e731da04d66894d4ebc0ee529 Mon Sep 17 00:00:00 2001
From: Ariadna <pellejeroariadna@gmail.com>
Date: Mon, 16 Jun 2025 23:45:28 +0200
Subject: [PATCH] dynamic columns

---
 .../src/pages/TestingPage/TestingPage.tsx     | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/ethernet-view/src/pages/TestingPage/TestingPage.tsx b/ethernet-view/src/pages/TestingPage/TestingPage.tsx
index af898413c..3af59baf3 100644
--- a/ethernet-view/src/pages/TestingPage/TestingPage.tsx
+++ b/ethernet-view/src/pages/TestingPage/TestingPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-// import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
-// import { Orientation } from "hooks/useSplit/Orientation";
+import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
+import { Orientation } from "hooks/useSplit/Orientation";
 import { ReceiveColumn } from "pages/TestingPage/ReceiveColumn/ReceiveColumn";
 import { OrderColumn } from "pages/TestingPage/OrderColumn/OrderColumn";
 import { MessagesColumn } from "pages/TestingPage/MessagesColumn/MessagesColumn";
@@ -66,13 +66,14 @@ export const TestingPage = () => {
             </button>
           ))}
         </div>
-        <div style={{ display: "flex", height: "100%", gap: "1rem" }}>
-          {visibleComponents.map(({ key, component }) => (
-            <div key={key} style={{ flex: `1 1 ${100 / visibleComponents.length}%`, overflow: "auto" }}>
-              {component}
-            </div>
-          ))}
-        </div>
+       <SplitLayout
+          key={visibleComponents.length}
+          components={visibleComponents.map(({ component, icon }) => ({
+            component,
+            collapsedIcon: icon,
+          }))}
+          orientation={Orientation.HORIZONTAL}
+        />
       </div>
     </div>
   );