fix(misc): work on ocp to improve the errors that were missed and better logging

frontend/src/components/production/ocp/OcpPage.tsx

@@ -11,14 +11,14 @@ export default function OCPPage() {
 
     const server = settings.filter((n) => n.plantToken === "usday1");
     return (
-        <div className="h-dvh w-full overflow-hidden">
+        <div className="h-screen w-full ">
             <div className="flex flex-wrap gap-2">
                 <div className="flex flex-col w-4/5 h-dvh">
                     <div className="">
                         <Lots />
                     </div>
 
-                    <div className="w-5/6">
+                    <div className="w-5/6 h-1/2">
                         <Tabs defaultValue="ocplogs" className="w-full">
                             <TabsList className="grid w-full grid-cols-2">
                                 <TabsTrigger value="ocplogs">

frontend/src/components/ui/resizable-panels.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+    <ResizablePrimitive.PanelGroup
+        className={cn(
+            "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+            className
+        )}
+        {...props}
+    />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+    withHandle,
+    className,
+    ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+}) => (
+    <ResizablePrimitive.PanelResizeHandle
+        className={cn(
+            "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+            className
+        )}
+        {...props}
+    >
+        {withHandle && (
+            <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+                <GripVertical className="h-2.5 w-2.5" />
+            </div>
+        )}
+    </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };