From d70379ac4371693ce6a10e03f869e2cc653154a9 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 31 Jan 2025 16:38:21 -0800
Subject: [PATCH] Added autoscrolling to add variable

---
 .../components/settings-modal/settings-modal.tsx    | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/w/components/sidebar/components/settings-modal/settings-modal.tsx b/app/w/components/sidebar/components/settings-modal/settings-modal.tsx
index 953f67f764..4b4ea3c915 100644
--- a/app/w/components/sidebar/components/settings-modal/settings-modal.tsx
+++ b/app/w/components/sidebar/components/settings-modal/settings-modal.tsx
@@ -30,11 +30,19 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     null
   )
   const inputRefs = useRef<(HTMLInputElement | null)[]>([])
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     inputRefs.current = inputRefs.current.slice(0, envVars.length)
   }, [envVars.length])
 
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop =
+        scrollContainerRef.current.scrollHeight
+    }
+  }, [envVars])
+
   const setInputRef = (el: HTMLInputElement | null, index: number) => {
     inputRefs.current[index] = el
   }
@@ -161,7 +169,10 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
             </div>
 
             <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)}
               </div>
             </div>