adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-09-30 11:33:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: let agent git panel resize to nearly full window width (#1525)

Browse source 
The git panel was capped at a fixed 720px max width, which wasted space on
wide/ultrawide screens. Make the max width dynamic relative to the viewport
(window width minus a minimum chat width) so it can be dragged up to ~50/50
or wider, and re-clamp on window resize.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
This commit is contained in:
Johannes du Plessis 2026-06-15 09:55:19 -07:00 • committed by GitHub
parent eb18b07b20
commit acae8b9419
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
ui/src/components/agents/AgentGitPanel.tsx
View file

@ -77,14 +77,25 @@ const COLLAPSED_STATE_TRUE = "1"
const COLLAPSED_STATE_FALSE = "0"
const PANEL_DEFAULT_WIDTH = 420
const PANEL_MIN_WIDTH = 320
const PANEL_MAX_WIDTH = 720
// Keep at least this much room for the chat so the panel can grow to nearly the
// full window (e.g. ~50/50 on ultrawide screens) without hiding the chat.
const PANEL_MIN_CHAT_WIDTH = 360
function getPanelMaxWidth(): number {
if (typeof window === "undefined") return PANEL_DEFAULT_WIDTH
return Math.max(PANEL_MIN_WIDTH, window.innerWidth - PANEL_MIN_CHAT_WIDTH)
}
function clampPanelWidth(width: number): number {
return Math.min(getPanelMaxWidth(), Math.max(PANEL_MIN_WIDTH, width))
}
function readStoredPanelWidth(): number {
if (typeof window === "undefined") return PANEL_DEFAULT_WIDTH
const raw = window.localStorage.getItem(PANEL_STORAGE_WIDTH)
const parsed = raw ? Number(raw) : NaN
if (!Number.isFinite(parsed)) return PANEL_DEFAULT_WIDTH
return Math.min(PANEL_MAX_WIDTH, Math.max(PANEL_MIN_WIDTH, parsed))
return clampPanelWidth(parsed)
}
function readStoredPanelCollapsed(): boolean {
@ -191,10 +202,19 @@ export function AgentGitPanel({ thread, messages }: AgentGitPanelProps) {
}
const setWidth = useCallback((next: number) => {
const clamped = Math.min(PANEL_MAX_WIDTH, Math.max(PANEL_MIN_WIDTH, next))
const clamped = clampPanelWidth(next)
setWidthState(clamped)
window.localStorage.setItem(PANEL_STORAGE_WIDTH, String(clamped))
}, [])
// Re-clamp the stored width when the window shrinks so the panel never
// exceeds the available space (which would squeeze out the chat).
useEffect(() => {
if (typeof window === "undefined") return
const onResize = () => setWidth(width)
window.addEventListener("resize", onResize)
return () => window.removeEventListener("resize", onResize)
}, [setWidth, width])
const [selectedTreePath, setSelectedTreePath] = useState<string | null>(null)
const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({})
const pr = thread.pr