fix: add safety guards to font size change and show buttons on all screen sizes

- Add null checks and try/catch around fitAddon.fit() to prevent viewport errors
- Use requestAnimationFrame to ensure DOM is stable before fitting
- Remove isMobile condition from font size buttons in TerminalComponent
- Font size controls now visible on both mobile and desktop terminals
This commit is contained in:
Fusion
2026-05-24 13:15:29 +02:00
parent 4571bebf8e
commit 457f0d29ae
+26 -22
View File
@@ -266,9 +266,17 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, fontSize + delta));
setFontSize(newSize);
localStorage.setItem(FONT_SIZE_KEY, newSize.toString());
if (termRef.current) {
if (termRef.current && fitAddonRef.current) {
termRef.current.options.fontSize = newSize;
fitAddonRef.current?.fit();
requestAnimationFrame(() => {
if (termRef.current && fitAddonRef.current) {
try {
fitAddonRef.current.fit();
} catch {
// Ignore fit errors during re-initialization
}
}
});
}
};
@@ -345,26 +353,22 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
)}
</div>
<div className="terminal-header-right">
{isMobile && (
<>
<button
className="terminal-header-button"
onClick={() => handleFontSizeChange(-1)}
type="button"
aria-label="Decrease font size"
>
A-
</button>
<button
className="terminal-header-button"
onClick={() => handleFontSizeChange(1)}
type="button"
aria-label="Increase font size"
>
A+
</button>
</>
)}
<button
className="terminal-header-button"
onClick={() => handleFontSizeChange(-1)}
type="button"
aria-label="Decrease font size"
>
A-
</button>
<button
className="terminal-header-button"
onClick={() => handleFontSizeChange(1)}
type="button"
aria-label="Increase font size"
>
A+
</button>
{onClose && (
<button className="terminal-close" onClick={onClose} type="button">
Close