4 files changed, 25 insertions, 18 deletions
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index d70a3d70..c4f22211 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -14,7 +14,11 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
     <HeaderButton
       style={{ padding: "3px" }}
       onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+      onMouseLeave={() => {
+        setTimeout(() => {
+          setHover(false);
+        }, 100);
+      }}
       onClick={props.onClick}
     >
       <span hidden={!hover}>{props.text}</span>
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 525989af..d99b4d96 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -48,7 +48,7 @@ export const Pre = styled.pre`
   max-height: 150px;
   overflow-y: scroll;
   margin: 0;
-  background-color: ${secondaryDark};
+  background-color: ${vscBackground};
   border: none;
 
   /* text wrapping */
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index 32a92d0e..db8afab9 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -22,6 +22,7 @@ html,
 body,
 #root {
   height: 100%;
+  background-color: var(--vsc-background);
 }
 
 body {
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 279d052b..994cb896 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -194,7 +194,7 @@ function GUI(props: GUIProps) {
     if (topGuiDivRef.current) {
       const timeout = setTimeout(() => {
         window.scrollTo({
-          top: window.outerHeight,
+          top: topGuiDivRef.current!.offsetHeight,
           behavior: "smooth",
         });
       }, 200);
@@ -206,7 +206,9 @@ function GUI(props: GUIProps) {
     console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate);
     client?.onStateUpdate((state) => {
       // Scroll only if user is at very bottom of the window.
-      const shouldScrollToBottom = window.outerHeight - window.scrollY < 200;
+      const shouldScrollToBottom =
+        topGuiDivRef.current &&
+        topGuiDivRef.current?.offsetHeight - window.scrollY < 100;
       setWaitingForSteps(state.active);
       setHistory(state.history);
       setUserInputQueue(state.user_input_queue);
@@ -347,12 +349,12 @@ function GUI(props: GUIProps) {
         </div>
 
         <ComboBox
-          disabled={
-            history?.timeline.length
-              ? history.timeline[history.current_index].step.name ===
-                "Waiting for user confirmation"
-              : false
-          }
+          // disabled={
+          //   history?.timeline.length
+          //     ? history.timeline[history.current_index].step.name ===
+          //       "Waiting for user confirmation"
+          //     : false
+          // }
           ref={mainTextInputRef}
           onEnter={(e) => {
             onMainTextInput();
@@ -365,6 +367,14 @@ function GUI(props: GUIProps) {
         <ContinueButton onClick={onMainTextInput} />
       </TopGUIDiv>
       <Footer>
+        <HeaderButtonWithText
+          onClick={() => {
+            client?.sendClear();
+          }}
+          text="Clear History"
+        >
+          <Trash size="1.6em" />
+        </HeaderButtonWithText>
         <a href="https://continue.dev/docs" className="no-underline">
           <HeaderButtonWithText text="Continue Docs">
             <BookOpen size="1.6em" />
@@ -379,14 +389,6 @@ function GUI(props: GUIProps) {
         >
           <ChatBubbleOvalLeftEllipsis size="1.6em" />
         </HeaderButtonWithText>
-        <HeaderButtonWithText
-          onClick={() => {
-            client?.sendClear();
-          }}
-          text="Clear History"
-        >
-          <Trash size="1.6em" />
-        </HeaderButtonWithText>
       </Footer>
     </>
   );