monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): SSH terminal expanded mode respects sidebar width

Browse Source 
Expanded SSH now uses left: var(--sidebar-width) instead of inset-4,
so it fills the content area without covering the sidebar or header.
Styled header/buttons to match Warm Precision.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-21 16:42:44 -05:00
parent 55266a9188
commit 9c5cf552d9
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/fleet/SSHTerminal.tsx
View File

@@ -172,20 +172,20 @@ export function SSHTerminal({ tenantId, deviceId, deviceName }: SSHTerminalProps
} }
return ( return (
<div className={`rounded-md border overflow-hidden ${expanded ? 'fixed inset-4 z-50 bg-background' : ''}`}> <div className={`rounded-sm border border-border-default overflow-hidden ${expanded ? 'fixed top-0 right-0 bottom-0 z-50 bg-background' : ''}`} style={expanded ? { left: 'var(--sidebar-width, 172px)' } : {}}>
<div className="flex items-center justify-between px-3 py-2 bg-elevated/50 border-b"> <div className="flex items-center justify-between px-3 py-1.5 bg-elevated border-b border-border-default">
<span className="text-sm font-medium">SSH: {deviceName}</span> <span className="text-xs font-medium text-text-primary">SSH: {deviceName}</span>
<div className="flex gap-1"> <div className="flex gap-1">
<button onClick={() => setExpanded(!expanded)} className="p-1 hover:bg-accent rounded"> <button onClick={() => setExpanded(!expanded)} className="p-0.5 text-text-muted hover:text-text-secondary transition-[color] duration-[50ms]">
{expanded ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />} {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
</button> </button>
{state === 'disconnected' ? ( {state === 'disconnected' ? (
<button onClick={handleReconnect} className="px-2 py-1 text-xs rounded bg-accent text-white"> <button onClick={handleReconnect} className="px-2 py-0.5 text-[10px] rounded-[var(--radius-control)] border border-border-default text-text-secondary hover:border-accent transition-[border-color] duration-[50ms]">
Reconnect Reconnect
</button> </button>
) : ( ) : (
<button onClick={handleDisconnect} className="p-1 hover:bg-accent rounded"> <button onClick={handleDisconnect} className="p-0.5 text-text-muted hover:text-text-secondary transition-[color] duration-[50ms]">
<X className="h-4 w-4" /> <X className="h-3.5 w-3.5" />
</button> </button>
)} )}
</div> </div>