Terminal size fix #18 (rows & cols fix)

frontend/src/App.css

@@ -22,7 +22,6 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  border-radius: 5px;
   position: relative;
 }
 
@@ -63,7 +62,7 @@
 .hide-sidebar-button {
   position: fixed;
   bottom: 10px;
-  right: 13px;
+  right: 23px;
   background-color: rgb(108, 108, 108);
   color: white;
   border: none;

frontend/src/App.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import 'xterm/css/xterm.css';
-import { FitAddon } from 'xterm-addon-fit';
+import { FitAddon } from '@xterm/addon-fit';
 import './App.css';
 
 const App = () => {
@@ -10,6 +10,7 @@ const App = () => {
   const fitAddon = useRef(null);
   const socket = useRef(null);
   const [host, setHost] = useState('');
+  const [port, setPort] = useState('22');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [isConnected, setIsConnected] = useState(false);
@@ -50,20 +51,6 @@ const App = () => {
       }
     });
 
-    // Add specific resize call for certain programs like nano or vim
-    const resizeTerminalOnStart = () => {
-      // Resize immediately after starting vim/nano or other programs
-      fitAddon.current.fit();
-      terminal.current.clear();
-    };
-
-    terminal.current.onData((data) => {
-      if (data.includes('nano') || data.includes('vim')) {
-        // Trigger resize immediately when these programs start
-        resizeTerminalOnStart();
-      }
-    });
-
     // Cleanup on component unmount
     return () => {
       terminal.current.dispose();
@@ -87,7 +74,16 @@ const App = () => {
 
     socket.current.onopen = () => {
       terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
-      socket.current.send(JSON.stringify({ host, username, password }));
+      socket.current.send(
+          JSON.stringify({
+            host,
+            port,
+            username,
+            password,
+            rows: terminal.current.rows,
+            cols: terminal.current.cols
+          })
+      );
       setIsConnected(true);
     };
 
@@ -124,6 +120,12 @@ const App = () => {
                 value={host}
                 onChange={(e) => handleInputChange(e, setHost)}
             />
+            <input
+                type="text"
+                placeholder="Port"
+                value={port}
+                onChange={(e) => handleInputChange(e, setPort)}
+            />
             <input
                 type="text"
                 placeholder="Username"

frontend/src/index.css

@@ -5,7 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overflow: hidden; /* Prevent scrolling */
+  overflow: hidden;
 }
 
 code {