diff --git a/AppImage/app/layout.tsx b/AppImage/app/layout.tsx index 0fcdcb1..3fe3a1b 100644 --- a/AppImage/app/layout.tsx +++ b/AppImage/app/layout.tsx @@ -5,6 +5,7 @@ import { GeistMono } from "geist/font/mono" import { ThemeProvider } from "../components/theme-provider" import { Suspense } from "react" import "./globals.css" +import "./terminal.css" export const metadata: Metadata = { title: "ProxMenux Monitor", diff --git a/AppImage/app/terminal.css b/AppImage/app/terminal.css new file mode 100644 index 0000000..8e60e97 --- /dev/null +++ b/AppImage/app/terminal.css @@ -0,0 +1,31 @@ +/* Force remove all xterm.js internal padding and margins */ +.xterm { + padding: 0 !important; + margin: 0 !important; +} + +.xterm-viewport { + padding: 0 !important; + margin: 0 !important; +} + +.xterm-screen { + padding: 0 !important; + margin: 0 !important; +} + +.xterm-rows { + padding: 0 !important; + margin: 0 !important; +} + +.xterm-helpers { + padding: 0 !important; + margin: 0 !important; +} + +/* Ensure terminal container has no padding */ +[class*="terminal-container"] { + padding: 0 !important; + margin: 0 !important; +} diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx index f6377e0..851ab0d 100644 --- a/AppImage/components/terminal-panel.tsx +++ b/AppImage/components/terminal-panel.tsx @@ -319,26 +319,38 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl term.open(container) - const xtermElement = container.querySelector(".xterm") as HTMLElement - const xtermViewport = container.querySelector(".xterm-viewport") as HTMLElement - const xtermScreen = container.querySelector(".xterm-screen") as HTMLElement + const removeXtermPadding = () => { + const xtermElement = container.querySelector(".xterm") as HTMLElement + const xtermViewport = container.querySelector(".xterm-viewport") as HTMLElement + const xtermScreen = container.querySelector(".xterm-screen") as HTMLElement + const xtermRows = container.querySelector(".xterm-rows") as HTMLElement - if (xtermElement) { - xtermElement.style.padding = "0" - xtermElement.style.margin = "0" - } - if (xtermViewport) { - xtermViewport.style.padding = "0" - xtermViewport.style.margin = "0" - } - if (xtermScreen) { - xtermScreen.style.padding = "0" - xtermScreen.style.margin = "0" + if (xtermElement) { + xtermElement.style.padding = "0" + xtermElement.style.margin = "0" + } + if (xtermViewport) { + xtermViewport.style.padding = "0" + xtermViewport.style.margin = "0" + } + if (xtermScreen) { + xtermScreen.style.padding = "0" + xtermScreen.style.margin = "0" + } + if (xtermRows) { + xtermRows.style.padding = "0" + xtermRows.style.margin = "0" + } } + // Remove padding immediately + removeXtermPadding() + + // Remove padding again after a short delay to ensure it applies setTimeout(() => { + removeXtermPadding() fitAddon.fit() - }, 50) + }, 100) const wsUrl = websocketUrl || getWebSocketUrl() const ws = new WebSocket(wsUrl)