fix: improve terminal rendering by removing CSS overrides and increasing minimum font size
- 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:
@@ -21,8 +21,8 @@ interface TerminalProps {
|
||||
}
|
||||
|
||||
const FONT_SIZE_KEY = "terminal-font-size";
|
||||
const MIN_FONT_SIZE = 6;
|
||||
const MAX_FONT_SIZE = 20;
|
||||
const MIN_FONT_SIZE = 12;
|
||||
const MAX_FONT_SIZE = 24;
|
||||
const RECONNECT_ATTEMPTS = 3;
|
||||
const RECONNECT_DELAY_BASE = 1000;
|
||||
|
||||
@@ -51,9 +51,13 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
const activeModifierRef = useRef(activeModifier);
|
||||
activeModifierRef.current = activeModifier;
|
||||
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);
|
||||
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 heartbeatCheckRef = useRef<number | null>(null);
|
||||
|
||||
Reference in New Issue
Block a user