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
@@ -6,6 +6,7 @@ interface MobileTerminalHeaderProps {
onBack?: () => void;
onMenuToggle?: () => void;
onClose?: () => void;
onFontSizeChange?: (delta: number) => void;
isVisible: boolean;
connectionStatus?: "connecting" | "connected" | "disconnected" | "error";
}
@@ -15,6 +16,7 @@ export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
onBack,
onMenuToggle,
onClose,
onFontSizeChange,
isVisible,
connectionStatus = "connecting",
}) => {
@@ -56,6 +58,26 @@ export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
</div>
<div className="mobile-terminal-header-right">
{onFontSizeChange && (
<>
<button
className="mobile-terminal-header-button"
onClick={() => onFontSizeChange(-1)}
type="button"
aria-label="Decrease font size"
>
<span style={{ fontSize: "0.75rem" }}>A-</span>
</button>
<button
className="mobile-terminal-header-button"
onClick={() => onFontSizeChange(1)}
type="button"
aria-label="Increase font size"
>
<span style={{ fontSize: "1rem" }}>A+</span>
</button>
</>
)}
{onClose && (
<button
className="mobile-terminal-header-button"
@@ -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}
/>
+10 -3
View File
@@ -15,7 +15,8 @@ interface TerminalProps {
onTerminalReady?: (
sendData: (data: string) => void,
connectionStatus: "connecting" | "connected" | "disconnected" | "error",
focusInput: () => void
focusInput: () => void,
changeFontSize: (delta: number) => void
) => void;
}
@@ -219,7 +220,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
const focusInput = () => {
termRef.current?.focus();
};
onTerminalReadyRef.current(sendData, status, focusInput);
const changeFontSize = (delta: number) => {
handleFontSizeChange(delta);
};
onTerminalReadyRef.current(sendData, status, focusInput, changeFontSize);
}
// Visibility API for reconnection
@@ -251,7 +255,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
const focusInput = () => {
termRef.current?.focus();
};
onTerminalReady(sendData, status, focusInput);
const changeFontSize = (delta: number) => {
handleFontSizeChange(delta);
};
onTerminalReady(sendData, status, focusInput, changeFontSize);
}
}, [status, onTerminalReady]);