feat: :lipstick: small ui tweaks, detached child process

4 files changed, 23 insertions, 5 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 982c42d1..5eada708 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -379,6 +379,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                   Math.min(prev + 1, history.length)
                 );
                 setCurrentlyInContextQuery(false);
+              } else if (event.key === "Escape") {
+                setCurrentlyInContextQuery(false);
+                if (downshiftProps.isOpen) {
+                  downshiftProps.closeMenu();
+                } else {
+                  // Move cursor back over to the editor
+                  postVscMessage("focusEditor", {});
+                }
               }
             },
             onClick: () => {
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 586c49f0..edef808e 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -103,8 +103,8 @@ const PillButton = (props: PillButtonProps) => {
             <pre>
               <code
                 style={{
-                  fontSize: "11px",
-                  backgroundColor: vscBackground,
+                  fontSize: "12px",
+                  backgroundColor: "transparent",
                   color: vscForeground,
                   whiteSpace: "pre-wrap",
                   wordWrap: "break-word",
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index d9280c75..1f999892 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -63,6 +63,14 @@ const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>`
   padding-right: 8px;
 `;
 
+const LeftHeaderSubDiv = styled.div`
+  margin: 8px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  grid-gap: 2px;
+`;
+
 const ContentDiv = styled.div<{ isUserInput: boolean }>`
   padding: 8px;
   background-color: ${(props) =>
@@ -167,7 +175,7 @@ function StepContainer(props: StepContainerProps) {
             loading={(props.historyNode.active as boolean) || false}
             error={props.historyNode.observation?.error ? true : false}
           >
-            <div className="m-2 flex items-center">
+            <LeftHeaderSubDiv>
               {!isUserInput &&
                 (props.open ? (
                   <ChevronDownIcon width="1.4em" height="1.4em" />
@@ -176,7 +184,7 @@ function StepContainer(props: StepContainerProps) {
                 ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
-            </div>
+            </LeftHeaderSubDiv>
             {/* <HeaderButton
               onClick={(e) => {
                 e.stopPropagation();
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index ae054947..7e964ad9 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -21,6 +21,8 @@ const StyledDiv = styled.div`
   align-items: center;
   border-bottom: 1px solid ${vscBackground};
   padding: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 `;
 
 const DeleteButtonDiv = styled.div`
@@ -35,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
       <StyledMarkdownPreview
         light={true}
         source={props.children}
-        className="mr-5"
+        className="mr-6"
       />
       {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */}
       <DeleteButtonDiv>