feat: add font size controls to mobile terminal header and fix auto-hide space reclamation

- TerminalComponent: expose changeFontSize via onTerminalReady callback
- MobileTerminalWrapper: pass changeFontSize to header
- MobileTerminalHeader: add A- and A+ font size buttons
- CSS: collapse header height/padding/margin/border when hidden to reclaim space
This commit is contained in:
Fusion
2026-05-24 13:10:07 +02:00
parent ec45283257
commit 4571bebf8e
4 changed files with 46 additions and 6 deletions
@@ -32,6 +32,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
sendData: (data: string) => void;
connectionStatus: "connecting" | "connected" | "disconnected" | "error";
focusInput: () => void;
changeFontSize: (delta: number) => void;
} | null>(null);
const headerAutoHide = useAutoHide({ timeout: 3000, enabled: isMobile });
@@ -41,8 +42,8 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
}, [headerAutoHide]);
const handleTerminalReady = useCallback(
(sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error", focusInput: () => void) => {
setTerminalRef({ sendData, connectionStatus, focusInput });
(sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error", focusInput: () => void, changeFontSize: (delta: number) => void) => {
setTerminalRef({ sendData, connectionStatus, focusInput, changeFontSize });
},
[]
);
@@ -71,6 +72,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
onBack={onBack}
onMenuToggle={onMenuToggle}
onClose={onClose}
onFontSizeChange={(delta) => terminalRef?.changeFontSize(delta)}
isVisible={headerAutoHide.isVisible}
connectionStatus={terminalRef?.connectionStatus}
/>