fix: terminal sizing and newline rendering issues
- Add ResizeObserver to terminal container for responsive sizing (catches keyboard open/close, header auto-hide, layout changes) - Remove padding from mobile terminal container to maximize space - Fix CSS: ensure xterm viewport fills container height properly - Fix session-card.tsx TypeScript error (removed non-existent port field) - Remove explicit xterm-viewport/xterm-screen width overrides that interfered with xterm.js canvas sizing
This commit is contained in:
@@ -110,9 +110,7 @@ export function SessionCard({
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{session.port && session.status === "running" && (
|
||||
<p className="muted session-card-meta">Port: {session.port}</p>
|
||||
)}
|
||||
|
||||
{session.created_at && (
|
||||
<p className="muted session-card-meta">
|
||||
Created: {new Date(session.created_at).toLocaleDateString()}
|
||||
|
||||
@@ -242,6 +242,25 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
// Watch container size changes (keyboard, header auto-hide, etc.)
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
if (terminalRef.current && typeof ResizeObserver !== "undefined") {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
fitAddon.fit();
|
||||
const { cols, rows } = term;
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(
|
||||
JSON.stringify({
|
||||
type: "resize",
|
||||
cols,
|
||||
rows,
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(terminalRef.current);
|
||||
}
|
||||
|
||||
// Notify parent about terminal readiness
|
||||
if (onTerminalReadyRef.current) {
|
||||
const sendData = (data: string) => {
|
||||
@@ -270,6 +289,9 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
return () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
}
|
||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||
ws.close();
|
||||
term.dispose();
|
||||
|
||||
Reference in New Issue
Block a user