From d0a19b55892c3f00adef4d267482fa1e905b9655 Mon Sep 17 00:00:00 2001
From: Blake Matthes <cowchmonkey@gmail.com>
Date: Mon, 14 Apr 2025 17:21:29 -0500
Subject: [PATCH] refactor(ocp): resizbale with scrollling added makes more
 easy to review if table overflows

---
 .../components/production/ocp/LabelLog.tsx    |  6 +--
 .../src/components/production/ocp/OcpLogs.tsx |  5 +--
 .../src/components/production/ocp/OcpPage.tsx | 44 +++++++++++++------
 .../tableData/production/labels/labelData.tsx |  5 ++-
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/production/ocp/LabelLog.tsx b/frontend/src/components/production/ocp/LabelLog.tsx
index 48a208b..dbdf20c 100644
--- a/frontend/src/components/production/ocp/LabelLog.tsx
+++ b/frontend/src/components/production/ocp/LabelLog.tsx
@@ -1,5 +1,3 @@
-import { LstCard } from "@/components/extendedUI/LstCard";
-
 // import {useSessionStore} from "@/lib/store/sessionStore";
 // import {useSettingStore} from "@/lib/store/useSettings";
 import { useQuery } from "@tanstack/react-query";
@@ -16,12 +14,12 @@ export default function LabelLog() {
     if (isLoading) return <div>Loading</div>;
     const labelData = data ? data : [];
     return (
-        <LstCard className="m-2 p-2 min-h-2/5">
+        <div className="m-2">
             <LabelTable
                 columns={labelolumns}
                 data={labelData}
                 //style={style}
             />
-        </LstCard>
+        </div>
     );
 }
diff --git a/frontend/src/components/production/ocp/OcpLogs.tsx b/frontend/src/components/production/ocp/OcpLogs.tsx
index 06ed6b7..a5a6d63 100644
--- a/frontend/src/components/production/ocp/OcpLogs.tsx
+++ b/frontend/src/components/production/ocp/OcpLogs.tsx
@@ -1,4 +1,3 @@
-import { LstCard } from "@/components/extendedUI/LstCard";
 import { getOcpLogs } from "@/utils/querys/production/ocpLogs";
 import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns";
 import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData";
@@ -36,12 +35,12 @@ export default function OcpLogs() {
     }
 
     return (
-        <LstCard className="m-2 p-2 min-h-2/5">
+        <div className="m-2">
             <OcpLogTable
                 columns={columns}
                 data={logData}
                 //style={style}
             />
-        </LstCard>
+        </div>
     );
 }
diff --git a/frontend/src/components/production/ocp/OcpPage.tsx b/frontend/src/components/production/ocp/OcpPage.tsx
index baa81bd..f20434e 100644
--- a/frontend/src/components/production/ocp/OcpPage.tsx
+++ b/frontend/src/components/production/ocp/OcpPage.tsx
@@ -26,24 +26,37 @@ export default function OCPPage() {
             >
                 <ResizablePanel>
                     <ResizablePanelGroup direction="vertical">
-                        <ResizablePanel>
-                            <div style={{ overflow: "auto" }}>
-                                <Lots />
-                            </div>
+                        <ResizablePanel
+                            style={{
+                                overflow: "auto",
+                                scrollbarWidth: "none",
+                            }}
+                        >
+                            <Lots />
                         </ResizablePanel>
                         <ResizableHandle />
                         <ResizablePanel>
-                            <ResizablePanelGroup direction="horizontal">
-                                <ResizablePanel className="overflow: auto">
-                                    <div style={{ overflow: "auto" }}>
-                                        <LabelLog />
-                                    </div>
+                            <ResizablePanelGroup
+                                direction="horizontal"
+                                autoSaveId="ocpPage"
+                            >
+                                <ResizablePanel
+                                    //className="text-sm p-4 overflow-scroll"
+                                    style={{
+                                        overflow: "auto",
+                                        scrollbarWidth: "none",
+                                    }}
+                                >
+                                    <LabelLog />
                                 </ResizablePanel>
                                 <ResizableHandle />
-                                <ResizablePanel>
-                                    <div style={{ overflow: "auto" }}>
-                                        <OcpLogs />
-                                    </div>
+                                <ResizablePanel
+                                    style={{
+                                        overflow: "auto",
+                                        scrollbarWidth: "none",
+                                    }}
+                                >
+                                    <OcpLogs />
                                 </ResizablePanel>
                             </ResizablePanelGroup>
                         </ResizablePanel>
@@ -51,7 +64,10 @@ export default function OCPPage() {
                 </ResizablePanel>
                 <ResizableHandle />
                 <ResizablePanel defaultSize={25}>
-                    <ResizablePanelGroup direction="vertical">
+                    <ResizablePanelGroup
+                        direction="vertical"
+                        autoSaveId="ocpPage"
+                    >
                         {server[0].value === "usday1vms006" && (
                             <ResizablePanel className="max-h-[300px]">
                                 <WrapperManualTrigger />
diff --git a/frontend/src/utils/tableData/production/labels/labelData.tsx b/frontend/src/utils/tableData/production/labels/labelData.tsx
index 184b0ea..7f99ac8 100644
--- a/frontend/src/utils/tableData/production/labels/labelData.tsx
+++ b/frontend/src/utils/tableData/production/labels/labelData.tsx
@@ -25,6 +25,7 @@ import {
     SelectValue,
 } from "@/components/ui/select";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -55,7 +56,7 @@ export function LabelTable<TData, TValue>({
 
     //console.log(parseInt(style.height.replace("px", "")) - 50);
     return (
-        <div>
+        <LstCard>
             <div>
                 <div className="flex flex-row justify-between">
                     {data.length === 0 ? (
@@ -169,6 +170,6 @@ export function LabelTable<TData, TValue>({
                     Next
                 </Button>
             </div>
-        </div>
+        </LstCard>
     );
 }