github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-09 15:07:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added autoscrolling to add variable

Browse Source
This commit is contained in:
Emir Karabeg
2025-01-31 16:38:21 -08:00
parent 61cf06c965
commit d70379ac43
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/w/components/sidebar/components/settings-modal/settings-modal.tsx
View File

@@ -30,11 +30,19 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
null null
) )
const inputRefs = useRef<(HTMLInputElement | null)[]>([]) const inputRefs = useRef<(HTMLInputElement | null)[]>([])
const scrollContainerRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
inputRefs.current = inputRefs.current.slice(0, envVars.length) inputRefs.current = inputRefs.current.slice(0, envVars.length)
}, [envVars.length]) }, [envVars.length])
useEffect(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTop =
scrollContainerRef.current.scrollHeight
}
}, [envVars])
const setInputRef = (el: HTMLInputElement | null, index: number) => { const setInputRef = (el: HTMLInputElement | null, index: number) => {
inputRefs.current[index] = el inputRefs.current[index] = el
} }
@@ -161,7 +169,10 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
</div> </div>
<div className="relative"> <div className="relative">
<div className="overflow-y-auto max-h-[40vh] space-y-2 scrollbar-thin scrollbar-thumb-muted-foreground/20 hover:scrollbar-thumb-muted-foreground/25 scrollbar-track-transparent pr-6 -mr-6 pb-2 pt-2 px-2 -mx-2"> <div
ref={scrollContainerRef}
className="overflow-y-auto max-h-[40vh] space-y-2 scrollbar-thin scrollbar-thumb-muted-foreground/20 hover:scrollbar-thumb-muted-foreground/25 scrollbar-track-transparent pr-6 -mr-6 pb-2 pt-2 px-2 -mx-2"
>
{envVars.map(renderEnvVarRow)} {envVars.map(renderEnvVarRow)}
</div> </div>
</div> </div>