footer sticks to bottom

3 files changed, 129 insertions, 160 deletions

diff --git a/extension/react-app/src/components/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx
index 11ec2fe2..30f38779 100644
--- a/extension/react-app/src/components/DebugPanel.tsx
+++ b/extension/react-app/src/components/DebugPanel.tsx
@@ -17,39 +17,15 @@ interface DebugPanelProps {
   }[];
 }
 
-const GradientContainer = styled.div`
-  // Uncomment to get gradient border
-  /* background: linear-gradient(
-    101.79deg,
-    #12887a 0%,
-    #87245c 37.64%,
-    #e12637 65.98%,
-    #ffb215 110.45%
-  ); */
-  /* padding: 10px; */
-  background-color: ${secondaryDark};
-  margin: 0;
-  height: 100%;
-  /* border: 1px solid white; */
-  border-radius: ${defaultBorderRadius};
-`;
-
-const MainDiv = styled.div`
-  height: 100%;
-  border-radius: ${defaultBorderRadius};
-  scrollbar-base-color: transparent;
-  background-color: ${vscBackground};
-`;
-
 const TabBar = styled.div<{ numTabs: number }>`
   display: grid;
   grid-template-columns: repeat(${(props) => props.numTabs}, 1fr);
 `;
 
 const TabsAndBodyDiv = styled.div`
-  display: grid;
-  grid-template-rows: auto 1fr;
   height: 100%;
+  border-radius: ${defaultBorderRadius};
+  scrollbar-base-color: transparent;
 `;
 
 function DebugPanel(props: DebugPanelProps) {
@@ -76,42 +52,43 @@ function DebugPanel(props: DebugPanelProps) {
   const [currentTab, setCurrentTab] = useState(0);
 
   return (
-    <GradientContainer>
-      <MainDiv>
-        <TabsAndBodyDiv>
-          {props.tabs.length > 1 && (
-            <TabBar numTabs={props.tabs.length}>
-              {props.tabs.map((tab, index) => {
-                return (
-                  <div
-                    key={index}
-                    className={`p-2 cursor-pointer text-center ${
-                      index === currentTab
-                        ? "bg-secondary-dark"
-                        : "bg-vsc-background"
-                    }`}
-                    onClick={() => setCurrentTab(index)}
-                  >
-                    {tab.title}
-                  </div>
-                );
-              })}
-            </TabBar>
-          )}
+    <TabsAndBodyDiv>
+      {props.tabs.length > 1 && (
+        <TabBar numTabs={props.tabs.length}>
           {props.tabs.map((tab, index) => {
             return (
               <div
                 key={index}
-                hidden={index !== currentTab}
-                style={{ scrollbarGutter: "stable both-edges" }}
+                className={`p-2 cursor-pointer text-center ${
+                  index === currentTab
+                    ? "bg-secondary-dark"
+                    : "bg-vsc-background"
+                }`}
+                onClick={() => setCurrentTab(index)}
               >
-                {tab.element}
+                {tab.title}
               </div>
             );
           })}
-        </TabsAndBodyDiv>
-      </MainDiv>
-    </GradientContainer>
+        </TabBar>
+      )}
+      {props.tabs.map((tab, index) => {
+        return (
+          <div
+            key={index}
+            hidden={index !== currentTab}
+            style={{
+              scrollbarGutter: "stable both-edges",
+              minHeight: "100%",
+              display: "grid",
+              gridTemplateRows: "1fr auto",
+            }}
+          >
+            {tab.element}
+          </div>
+        );
+      })}
+    </TabsAndBodyDiv>
   );
 }
 
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index 20599d30..32a92d0e 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -21,7 +21,7 @@
 html,
 body,
 #root {
-  height: calc(100%);
+  height: 100%;
 }
 
 body {
@@ -31,4 +31,5 @@ body {
   font-family: "Mona Sans", "Arial", sans-serif;
   padding: 0px;
   margin: 0px;
+  height: 100%;
 }
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 5316f42b..05795cdf 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -21,18 +21,11 @@ import {
 import ComboBox from "../components/ComboBox";
 import TextDialog from "../components/TextDialog";
 
-const MainDiv = styled.div`
-  display: grid;
-  grid-template-rows: 1fr auto;
+const TopGUIDiv = styled.div`
+  overflow: hidden;
 `;
 
-let TopGUIDiv = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  background-color: ${vscBackground};
-`;
-
-let UserInputQueueItem = styled.div`
+const UserInputQueueItem = styled.div`
   border-radius: ${defaultBorderRadius};
   color: gray;
   padding: 8px;
@@ -40,7 +33,7 @@ let UserInputQueueItem = styled.div`
   text-align: center;
 `;
 
-const TopBar = styled.div`
+const Footer = styled.footer`
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -303,103 +296,101 @@ function GUI(props: GUIProps) {
           setShowFeedbackDialog(false);
         }}
       ></TextDialog>
-      <MainDiv>
-        <TopGUIDiv
-          ref={topGuiDivRef}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && e.ctrlKey) {
-              onMainTextInput();
-            }
-          }}
-        >
-          {typeof client === "undefined" && (
-            <>
-              <Loader></Loader>
-              <p style={{ textAlign: "center" }}>
-                Trying to reconnect with server...
-              </p>
-            </>
-          )}
-          {history?.timeline.map((node: HistoryNode, index: number) => {
-            return (
-              <StepContainer
-                key={index}
-                onUserInput={(input: string) => {
-                  onStepUserInput(input, index);
-                }}
-                inFuture={index > history?.current_index}
-                historyNode={node}
-                onRefinement={(input: string) => {
-                  client?.sendRefinementInput(input, index);
-                }}
-                onReverse={() => {
-                  client?.reverseToIndex(index);
-                }}
-                onRetry={() => {
-                  client?.retryAtIndex(index);
-                  setWaitingForSteps(true);
-                }}
-                onDelete={() => {
-                  client?.deleteAtIndex(index);
-                }}
-              />
-            );
-          })}
-          {waitingForSteps && <Loader></Loader>}
 
-          <div>
-            {userInputQueue.map((input) => {
-              return <UserInputQueueItem>{input}</UserInputQueueItem>;
-            })}
-          </div>
-
-          <ComboBox
-            disabled={
-              history?.timeline.length
-                ? history.timeline[history.current_index].step.name ===
-                  "Waiting for user confirmation"
-                : false
-            }
-            ref={mainTextInputRef}
-            onEnter={(e) => {
-              onMainTextInput();
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-            onInputValueChange={() => {}}
-            items={availableSlashCommands}
-          />
-          <ContinueButton onClick={onMainTextInput} />
-
-          <TopBar>
-            <a href="https://continue.dev/docs" className="no-underline">
-              <HeaderButton style={{ padding: "3px" }}>
-                Continue Docs
-                <BookOpen size="1.6em" />
-              </HeaderButton>
-            </a>
-            <HeaderButton
-              style={{ padding: "3px" }}
-              onClick={() => {
-                // Set dialog open
-                setShowFeedbackDialog(true);
+      <TopGUIDiv
+        ref={topGuiDivRef}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && e.ctrlKey) {
+            onMainTextInput();
+          }
+        }}
+      >
+        {typeof client === "undefined" && (
+          <>
+            <Loader></Loader>
+            <p style={{ textAlign: "center" }}>
+              Trying to reconnect with server...
+            </p>
+          </>
+        )}
+        {history?.timeline.map((node: HistoryNode, index: number) => {
+          return (
+            <StepContainer
+              key={index}
+              onUserInput={(input: string) => {
+                onStepUserInput(input, index);
+              }}
+              inFuture={index > history?.current_index}
+              historyNode={node}
+              onRefinement={(input: string) => {
+                client?.sendRefinementInput(input, index);
+              }}
+              onReverse={() => {
+                client?.reverseToIndex(index);
               }}
-            >
-              Feedback
-              <ChatBubbleOvalLeftEllipsis size="1.6em" />
-            </HeaderButton>
-            <HeaderButton
-              onClick={() => {
-                client?.sendClear();
+              onRetry={() => {
+                client?.retryAtIndex(index);
+                setWaitingForSteps(true);
               }}
-              style={{ padding: "3px" }}
-            >
-              Clear History
-              <Trash size="1.6em" />
-            </HeaderButton>
-          </TopBar>
-        </TopGUIDiv>
-      </MainDiv>
+              onDelete={() => {
+                client?.deleteAtIndex(index);
+              }}
+            />
+          );
+        })}
+        {waitingForSteps && <Loader></Loader>}
+
+        <div>
+          {userInputQueue.map((input) => {
+            return <UserInputQueueItem>{input}</UserInputQueueItem>;
+          })}
+        </div>
+
+        <ComboBox
+          disabled={
+            history?.timeline.length
+              ? history.timeline[history.current_index].step.name ===
+                "Waiting for user confirmation"
+              : false
+          }
+          ref={mainTextInputRef}
+          onEnter={(e) => {
+            onMainTextInput();
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          onInputValueChange={() => {}}
+          items={availableSlashCommands}
+        />
+        <ContinueButton onClick={onMainTextInput} />
+      </TopGUIDiv>
+      <Footer>
+        <a href="https://continue.dev/docs" className="no-underline">
+          <HeaderButton style={{ padding: "3px" }}>
+            Continue Docs
+            <BookOpen size="1.6em" />
+          </HeaderButton>
+        </a>
+        <HeaderButton
+          style={{ padding: "3px" }}
+          onClick={() => {
+            // Set dialog open
+            setShowFeedbackDialog(true);
+          }}
+        >
+          Feedback
+          <ChatBubbleOvalLeftEllipsis size="1.6em" />
+        </HeaderButton>
+        <HeaderButton
+          onClick={() => {
+            client?.sendClear();
+          }}
+          style={{ padding: "3px" }}
+        >
+          Clear History
+          <Trash size="1.6em" />
+        </HeaderButton>
+      </Footer>
     </>
   );
 }