diff --git a/AppImage/app/terminal.css b/AppImage/app/terminal.css index 8e60e97..d497c3d 100644 --- a/AppImage/app/terminal.css +++ b/AppImage/app/terminal.css @@ -1,22 +1,28 @@ -/* Force remove all xterm.js internal padding and margins */ +/* Aggressively force remove all xterm.js internal padding and margins */ .xterm { padding: 0 !important; margin: 0 !important; + /* Move content left to compensate for xterm's internal 2px padding */ + position: relative; + left: -2px !important; } .xterm-viewport { padding: 0 !important; margin: 0 !important; + left: -2px !important; } .xterm-screen { padding: 0 !important; margin: 0 !important; + left: -2px !important; } .xterm-rows { padding: 0 !important; margin: 0 !important; + left: -2px !important; } .xterm-helpers { @@ -24,8 +30,22 @@ margin: 0 !important; } -/* Ensure terminal container has no padding */ +/* Target the canvas element that has the hardcoded padding */ +.xterm canvas { + padding: 0 !important; + margin: 0 !important; + left: -2px !important; + position: relative; +} + +/* Ensure terminal container has no padding or overflow */ [class*="terminal-container"] { padding: 0 !important; margin: 0 !important; + overflow: hidden !important; +} + +/* Fix any potential scrollbar offset */ +.xterm .xterm-viewport::-webkit-scrollbar { + width: 0px !important; } diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx index 851ab0d..55c8b6d 100644 --- a/AppImage/components/terminal-panel.tsx +++ b/AppImage/components/terminal-panel.tsx @@ -324,23 +324,36 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl const xtermViewport = container.querySelector(".xterm-viewport") as HTMLElement const xtermScreen = container.querySelector(".xterm-screen") as HTMLElement const xtermRows = container.querySelector(".xterm-rows") as HTMLElement + const xtermCanvas = container.querySelectorAll(".xterm canvas") if (xtermElement) { xtermElement.style.padding = "0" xtermElement.style.margin = "0" + xtermElement.style.position = "relative" + xtermElement.style.left = "-2px" } if (xtermViewport) { xtermViewport.style.padding = "0" xtermViewport.style.margin = "0" + xtermViewport.style.left = "-2px" } if (xtermScreen) { xtermScreen.style.padding = "0" xtermScreen.style.margin = "0" + xtermScreen.style.left = "-2px" } if (xtermRows) { xtermRows.style.padding = "0" xtermRows.style.margin = "0" + xtermRows.style.left = "-2px" } + xtermCanvas.forEach((canvas) => { + const canvasEl = canvas as HTMLElement + canvasEl.style.padding = "0" + canvasEl.style.margin = "0" + canvasEl.style.position = "relative" + canvasEl.style.left = "-2px" + }) } // Remove padding immediately