alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve terminal rendering by removing CSS overrides and increasing minimum font size

Browse Source 
- Remove CSS overrides that interfere with xterm.js internal sizing
- Increase MIN_FONT_SIZE from 10 to 12 to prevent broken character rendering
- Increase default font sizes from 10/12 to 12/14 (desktop/mobile)
- Add clamping for stored font size values to prevent old tiny values
- Remove !important rules on xterm-viewport that could cause clipping
This commit is contained in:
Alex Blank
2026-05-26 16:20:22 +02:00
parent 555517c144
commit cd9c9539a2
2 changed files with 12 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/terminal.tsx
+8 -4
View File
@@ -21,8 +21,8 @@ interface TerminalProps {
} }
const FONT_SIZE_KEY = "terminal-font-size"; const FONT_SIZE_KEY = "terminal-font-size";
const MIN_FONT_SIZE = 6; const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 20; const MAX_FONT_SIZE = 24;
const RECONNECT_ATTEMPTS = 3; const RECONNECT_ATTEMPTS = 3;
const RECONNECT_DELAY_BASE = 1000; const RECONNECT_DELAY_BASE = 1000;
@@ -51,9 +51,13 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
const activeModifierRef = useRef(activeModifier); const activeModifierRef = useRef(activeModifier);
activeModifierRef.current = activeModifier; activeModifierRef.current = activeModifier;
const [fontSize, setFontSize] = useState(() => { const [fontSize, setFontSize] = useState(() => {
if (typeof window === "undefined") return isMobile ? 12 : 10; if (typeof window === "undefined") return isMobile ? 14 : 12;
const stored = localStorage.getItem(FONT_SIZE_KEY); const stored = localStorage.getItem(FONT_SIZE_KEY);
return stored ? parseInt(stored, 10) : isMobile ? 12 : 10; if (stored) {
const parsed = parseInt(stored, 10);
return Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, parsed));
}
return isMobile ? 14 : 12;
}); });
const lastPingRef = useRef<number>(0); const lastPingRef = useRef<number>(0);
const heartbeatCheckRef = useRef<number | null>(null); const heartbeatCheckRef = useRef<number | null>(null);
apps/web/src/styles.css
+4 -22
View File
@@ -2637,22 +2637,13 @@ a.nav-item,
overflow: hidden; overflow: hidden;
} }
.terminal-container .xterm { /* xterm.js manages its own positioning and sizing */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.terminal-container canvas { .terminal-container canvas {
display: block; display: block;
} }
/* Ensure xterm fills container */ /* xterm.js manages its own viewport dimensions - do not override */
.terminal-container .xterm-viewport {
width: 100% !important;
}
/* Mobile terminal container - no padding to maximize space */ /* Mobile terminal container - no padding to maximize space */
.terminal-wrapper.mobile .terminal-container { .terminal-wrapper.mobile .terminal-container {
@@ -3264,18 +3255,9 @@ a.nav-item,
position: relative; position: relative;
} }
/* xterm fills container */ /* xterm.js manages its own sizing */
.terminal-wrapper.mobile .terminal-container .xterm {
width: 100%;
height: 100%;
}
/* Enable scrolling in mobile terminal */ /* xterm.js manages its own scrolling and viewport dimensions */
.terminal-wrapper.mobile .terminal-container .xterm-viewport {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
height: 100% !important;
}
/* Special Keys Strip */ /* Special Keys Strip */
.special-keys-strip { .special-keys-strip {