mirror of
https://github.com/Sea-Haven-Industries/open-swe.git
synced 2026-10-04 14:52:12 +00:00
feat: let agent git panel resize to nearly full window width (#1525)
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:
parent
eb18b07b20
commit
acae8b9419
1 changed files with 23 additions and 3 deletions
|
|
@ -77,14 +77,25 @@ const COLLAPSED_STATE_TRUE = "1"
|
||||||
const COLLAPSED_STATE_FALSE = "0"
|
const COLLAPSED_STATE_FALSE = "0"
|
||||||
const PANEL_DEFAULT_WIDTH = 420
|
const PANEL_DEFAULT_WIDTH = 420
|
||||||
const PANEL_MIN_WIDTH = 320
|
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 {
|
function readStoredPanelWidth(): number {
|
||||||
if (typeof window === "undefined") return PANEL_DEFAULT_WIDTH
|
if (typeof window === "undefined") return PANEL_DEFAULT_WIDTH
|
||||||
const raw = window.localStorage.getItem(PANEL_STORAGE_WIDTH)
|
const raw = window.localStorage.getItem(PANEL_STORAGE_WIDTH)
|
||||||
const parsed = raw ? Number(raw) : NaN
|
const parsed = raw ? Number(raw) : NaN
|
||||||
if (!Number.isFinite(parsed)) return PANEL_DEFAULT_WIDTH
|
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 {
|
function readStoredPanelCollapsed(): boolean {
|
||||||
|
|
@ -191,10 +202,19 @@ export function AgentGitPanel({ thread, messages }: AgentGitPanelProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const setWidth = useCallback((next: number) => {
|
const setWidth = useCallback((next: number) => {
|
||||||
const clamped = Math.min(PANEL_MAX_WIDTH, Math.max(PANEL_MIN_WIDTH, next))
|
const clamped = clampPanelWidth(next)
|
||||||
setWidthState(clamped)
|
setWidthState(clamped)
|
||||||
window.localStorage.setItem(PANEL_STORAGE_WIDTH, String(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 [selectedTreePath, setSelectedTreePath] = useState<string | null>(null)
|
||||||
const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({})
|
const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({})
|
||||||
const pr = thread.pr
|
const pr = thread.pr
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue