Merge pull request #1582 from devtron-labs/fix/xterm-scroll

fix: restrict width of xterm to make it scrollable

Author: AbhishekA1509

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/Terminal.tsx

@@ -10,6 +10,7 @@ import { CLUSTER_STATUS, SocketConnectionType } from '../../../../../../ClusterN
 import { TERMINAL_STATUS } from './constants'
 import './terminal.scss'
 import { TerminalViewType } from './terminal.type'
+import { restrictXtermAccessibilityWidth } from './terminal.utils'
 
 let clusterTimeOut
 
@@ -51,6 +52,7 @@ export default function TerminalView({
         }
         if (sessionId && terminalRef.current) {
             setIsReconnection(true)
+            restrictXtermAccessibilityWidth()
             postInitialize(sessionId)
         } else {
             setSocketConnection(SocketConnectionType.DISCONNECTED)

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx

@@ -320,3 +320,15 @@ export default function terminalStripTypeData(elementData) {
             return null
     }
 }
+
+// To fix the scrollbar issue with Xterm in edit mode, we need to restrict the width and height of the xterm-accessibility div as same as xterm-screen div
+// CON: In case of resize, we need to call this function again
+export const restrictXtermAccessibilityWidth = () => {
+    const xtermScreen = document.querySelector('.xterm-screen') as HTMLElement
+    const xtermAccessibility = document.querySelector('.xterm-accessibility') as HTMLElement
+
+    if (xtermScreen && xtermAccessibility) {
+        xtermAccessibility.style.width = xtermScreen.clientWidth + 'px'
+        xtermAccessibility.style.height = xtermScreen.clientHeight + 'px'
+    }
+}