chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: eliminate double scrollbar in script editor and extend page scroll area

Browse Source 
ScriptBodyEditor: overlay now has overflow-hidden and syncs scroll
position from the textarea via onScroll, so only one scrollbar appears.
ScriptManagePage: outer scroll container is now full-width so scrolling
works even when hovering outside the max-w content area.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-14 15:32:59 -04:00
parent 0b01692bbd
commit 5768e04804
2 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/script-editor/ScriptBodyEditor.tsx
View File

@@ -9,6 +9,14 @@ interface Props {
export function ScriptBodyEditor({ value, onChange, disabled }: Props) { export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
const textareaRef = useRef<HTMLTextAreaElement>(null) const textareaRef = useRef<HTMLTextAreaElement>(null)
const overlayRef = useRef<HTMLDivElement>(null)
const handleScroll = useCallback(() => {
if (textareaRef.current && overlayRef.current) {
overlayRef.current.scrollTop = textareaRef.current.scrollTop
overlayRef.current.scrollLeft = textareaRef.current.scrollLeft
}
}, [])
const handleTab = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => { const handleTab = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Tab') { if (e.key === 'Tab') {
@@ -26,9 +34,9 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
}, [value, onChange]) }, [value, onChange])
return ( return (
<div className="relative rounded-xl border border-border"> <div className="relative rounded-xl border border-border overflow-hidden">
{/* Highlighted overlay (read-only visual layer) */} {/* Highlighted overlay (read-only visual layer) — scroll synced to textarea */}
<div className="absolute inset-0 pointer-events-none overflow-auto p-4"> <div ref={overlayRef} className="absolute inset-0 pointer-events-none overflow-hidden p-4">
<PowerShellHighlighter script={value || ' '} /> <PowerShellHighlighter script={value || ' '} />
</div> </div>
@@ -37,6 +45,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
ref={textareaRef} ref={textareaRef}
value={value} value={value}
onChange={e => onChange(e.target.value)} onChange={e => onChange(e.target.value)}
onScroll={handleScroll}
onKeyDown={handleTab} onKeyDown={handleTab}
disabled={disabled} disabled={disabled}
spellCheck={false} spellCheck={false}

22
frontend/src/pages/ScriptManagePage.tsx
View File

@@ -27,16 +27,18 @@ export default function ScriptManagePage() {
} }
return ( return (
<div className="p-6 max-w-5xl mx-auto h-full overflow-y-auto"> <div className="h-full overflow-y-auto">
{mode === 'list' ? ( <div className="p-6 max-w-5xl mx-auto">
<ScriptTemplateListView onEdit={handleEdit} onCreate={handleCreate} /> {mode === 'list' ? (
) : ( <ScriptTemplateListView onEdit={handleEdit} onCreate={handleCreate} />
<ScriptTemplateEditor ) : (
templateId={editingId} <ScriptTemplateEditor
onBack={handleBack} templateId={editingId}
onSaved={handleSaved} onBack={handleBack}
/> onSaved={handleSaved}
)} />
)}
</div>
</div> </div>
) )
} }