Update

BACKEND/app/services/line_connection.ts

@@ -92,8 +92,7 @@ export default class LineConnection {
       })
 
       this.client.on('data', (data) => {
-        if (this.connecting) return
-        let message = data.toString()
+        let message = this.connecting ? cleanData(data.toString()) : data.toString()
         let rawData = ''
         if (this.isRunningScript) {
           this.waitingScenario = true
@@ -127,7 +126,12 @@ export default class LineConnection {
             this.getInventory()
           }, 3000)
         }
-        appendLog(message, this.config.stationId, this.config.lineNumber, this.config.port)
+        appendLog(
+          cleanData(message),
+          this.config.stationId,
+          this.config.lineNumber,
+          this.config.port
+        )
       })
 
       this.client.on('error', (err) => {

FRONTEND/src/App.css

@@ -4,6 +4,11 @@
   /* background-color: aliceblue; */
 }
 
-button:focus{
+button:focus {
   outline: none;
-}
+}
+
+.xterm-viewport {
+  overflow-y: hidden !important;
+  overscroll-behavior: contain;
+}

FRONTEND/src/App.tsx

@@ -412,7 +412,57 @@ function App() {
                     setShowBottomShadow(y < maxScroll - 2);
                   }}
                 >
-                  {station.lines.length > 0 ? (
+                  {station.lines.length > 8 ? (
+                    <Grid
+                      style={{
+                        marginLeft: "3%",
+                        width: "90%",
+                        display: "flex",
+                        justifyContent: "center",
+                      }}
+                    >
+                      <Grid.Col span={6}>
+                        <Flex wrap="wrap" gap="sm" justify={"center"}>
+                          {station.lines.slice(0, 8).map((line, i) => (
+                            <CardLine
+                              key={i}
+                              socket={socket}
+                              stationItem={station}
+                              line={line}
+                              selectedLines={selectedLines}
+                              setSelectedLines={setSelectedLines}
+                              openTerminal={openTerminal}
+                              loadTerminal={
+                                loadingTerminal &&
+                                Number(station.id) === Number(activeTab)
+                              }
+                            />
+                          ))}
+                        </Flex>
+                      </Grid.Col>
+                      <Grid.Col span={6}>
+                        <Flex wrap="wrap" gap="sm" justify={"center"}>
+                          {station.lines
+                            .slice(8, station.lines.length)
+                            .map((line, i) => (
+                              <CardLine
+                                key={i}
+                                socket={socket}
+                                stationItem={station}
+                                line={line}
+                                selectedLines={selectedLines}
+                                setSelectedLines={setSelectedLines}
+                                openTerminal={openTerminal}
+                                loadTerminal={
+                                  loadingTerminal &&
+                                  Number(station.id) === Number(activeTab)
+                                }
+                              />
+                            ))}
+                        </Flex>
+                      </Grid.Col>
+                    </Grid>
+                  ) : station.lines.length <= 8 && station.lines.length > 0 ? (
                     <Flex wrap="wrap" gap="sm" justify={"center"}>
                       {station.lines.map((line, i) => (
                         <CardLine

FRONTEND/src/components/CardLine.tsx

@@ -109,7 +109,7 @@ const CardLine = ({
             e.preventDefault();
             e.stopPropagation();
           }}
-          style={{ height: "175px", width: "300px" }}
+          style={{ height: "175px", width: "332px" }}
         >
           <TerminalCLI
             cliOpened={loadTerminal}

FRONTEND/src/components/Component.module.css

@@ -1,5 +1,5 @@
 .card_line {
-  width: 320px;
+  width: 350px;
   height: 250px;
   padding: 8px;
   gap: 8px;
@@ -107,3 +107,7 @@
   /* border-bottom: solid rgba(201, 201, 201, 0.377) 1px;
   border-top: solid rgba(201, 201, 201, 0.377) 1px; */
 }
+
+.hideScrollBar::-webkit-scrollbar {
+  display: none;
+}

FRONTEND/src/components/TerminalXTerm.tsx

@@ -182,7 +182,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
           height: "100%",
           backgroundColor: "black",
           paddingBottom: customStyle.paddingBottom ?? "10px",
-          minHeight: customStyle.maxHeight ?? "73vh",
+          maxHeight: customStyle.maxHeight ?? "73vh",
         }}
       >
         <div