BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize terminal layout resizing

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-05-22 01:53:32 +03:00
parent 2d85cc86be
commit a22433ed71
2 changed files with 3 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/BottomTerminalDock.tsx
+2 -2
View File
@@ -121,10 +121,10 @@ export const BottomTerminalDock: React.FC<BottomTerminalDockProps> = ({ isOpen,
'flex overflow-hidden border-t border-border bg-sidebar', 'flex overflow-hidden border-t border-border bg-sidebar',
shouldApplyFullscreenLayout ? 'absolute inset-x-0 bottom-0 z-40' : 'relative', shouldApplyFullscreenLayout ? 'absolute inset-x-0 bottom-0 z-40' : 'relative',
isResizing ? 'transition-none' : 'transition-[height] duration-300 ease-in-out', isResizing ? 'transition-none' : 'transition-[height] duration-300 ease-in-out',
!isOpen && 'border-t-0' (!isOpen || shouldApplyFullscreenLayout) && 'border-t-0'
)} )}
style={shouldApplyFullscreenLayout ? { style={shouldApplyFullscreenLayout ? {
top: 'var(--oc-header-height, 48px)', top: 0,
} : { } : {
height: `${appliedHeight}px`, height: `${appliedHeight}px`,
minHeight: `${appliedHeight}px`, minHeight: `${appliedHeight}px`,
packages/ui/src/components/views/TerminalView.tsx
+1 -25
View File
@@ -162,7 +162,6 @@ export const TerminalView: React.FC = () => {
const [isReconnectPending, setIsReconnectPending] = React.useState(false); const [isReconnectPending, setIsReconnectPending] = React.useState(false);
const [activeModifier, setActiveModifier] = React.useState<Modifier | null>(null); const [activeModifier, setActiveModifier] = React.useState<Modifier | null>(null);
const [isRestarting, setIsRestarting] = React.useState(false); const [isRestarting, setIsRestarting] = React.useState(false);
const [viewportLayoutVersion, setViewportLayoutVersion] = React.useState(0);
const streamCleanupRef = React.useRef<(() => void) | null>(null); const streamCleanupRef = React.useRef<(() => void) | null>(null);
const activeTerminalIdRef = React.useRef<string | null>(null); const activeTerminalIdRef = React.useRef<string | null>(null);
@@ -835,29 +834,6 @@ export const TerminalView: React.FC = () => {
return `${directoryPart}::${tabPart}::${terminalPart}`; return `${directoryPart}::${tabPart}::${terminalPart}`;
}, [effectiveDirectory, activeTabId, terminalSessionId]); }, [effectiveDirectory, activeTabId, terminalSessionId]);
const viewportSessionKey = React.useMemo(() => {
return `${terminalViewportKey}::layout-${viewportLayoutVersion}`;
}, [terminalViewportKey, viewportLayoutVersion]);
React.useEffect(() => {
if (useTouchTerminalInput || !isBottomTerminalOpen || !isTerminalVisible) {
return;
}
if (typeof window === 'undefined') {
setViewportLayoutVersion((value) => value + 1);
return;
}
const timeoutId = window.setTimeout(() => {
setViewportLayoutVersion((value) => value + 1);
}, 140);
return () => {
window.clearTimeout(timeoutId);
};
}, [bottomTerminalHeight, isBottomTerminalExpanded, isBottomTerminalOpen, isTerminalVisible, useTouchTerminalInput]);
React.useEffect(() => { React.useEffect(() => {
if (!isTerminalVisible || useTouchTerminalInput) { if (!isTerminalVisible || useTouchTerminalInput) {
return; return;
@@ -1139,7 +1115,7 @@ export const TerminalView: React.FC = () => {
ref={(controller) => { ref={(controller) => {
terminalControllerRef.current = controller; terminalControllerRef.current = controller;
}} }}
sessionKey={viewportSessionKey} sessionKey={terminalViewportKey}
chunks={bufferChunks} chunks={bufferChunks}
onInput={handleViewportInput} onInput={handleViewportInput}
onResize={handleViewportResize} onResize={handleViewportResize}