three way with nice display too!!

packages/desktop/package.json

@@ -42,8 +42,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4002",
-            "loggerPort": "9002",
+            "port": "4080",
+            "loggerPort": "9010",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 https://api.quotable.io/random 'unsafe-eval'",
             "renderer": {

packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx

@@ -86,7 +86,7 @@ export default function LineDetails() {
   }, [selectedLine]);
 
   return (
-    <div className="flex flex-col flex-1 bg-white relative">
+    <div className="flex flex-col flex-1 bg-white relative overflow-auto">
       {/* line details */}
       <div
         className="p-5 z-30 titlebar
@@ -143,7 +143,10 @@ export default function LineDetails() {
         {/* <LineHistory /> */}
 
         {/* live line */}
-        <div className="flex flex-col">
+        <div
+          className="flex-1 flex flex-col justify-start items-center 
+        gap-2 p-5 mx-auto max-w-lg w-full"
+        >
           {Object.keys(peerMap).map((lineId, index) => {
             if (lineId !== selectedLine.lineDetails._id.toString()) return <></>;
 
@@ -212,7 +215,7 @@ function StreamPlayer({ peerStream }: { peerStream: MediaStream }) {
   return (
     <>
       this is a stream component of one remote peer
-      <video ref={streamRef} height={600} width={600} autoPlay muted />
+      <video ref={streamRef} height={400} width={400} className={'shadow-xl'} autoPlay muted />
     </>
   );
 }