1 files changed, 37 insertions, 17 deletions
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 7e964ad9..90cd549b 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
-import { secondaryDark, vscBackground } from ".";
+import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
@@ -21,35 +21,55 @@ const StyledDiv = styled.div`
   align-items: center;
   border-bottom: 1px solid ${vscBackground};
   padding: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 0px;
+  padding-bottom: 0px;
 `;
 
 const DeleteButtonDiv = styled.div`
   position: absolute;
   top: 8px;
-  right: 16px;
+  right: 8px;
+`;
+
+const StyledPre = styled.pre`
+  margin-right: 22px;
+  margin-left: 8px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: "Lexend", sans-serif;
+  font-size: 13px;
 `;
 
 const UserInputContainer = (props: UserInputContainerProps) => {
+  const [isHovered, setIsHovered] = useState(false);
   return (
-    <StyledDiv>
-      <StyledMarkdownPreview
+    <StyledDiv
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      {/* <StyledMarkdownPreview
         light={true}
         source={props.children}
         className="mr-6"
-      />
+      /> */}
+      <StyledPre className="mr-6">{props.children}</StyledPre>
       {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */}
       <DeleteButtonDiv>
-        <HeaderButtonWithText
-          onClick={(e) => {
-            props.onDelete();
-            e.stopPropagation();
-          }}
-          text="Delete"
-        >
-          <XMarkIcon width="1.4em" height="1.4em" />
-        </HeaderButtonWithText>
+        {isHovered && (
+          <HeaderButtonWithText
+            onClick={(e) => {
+              props.onDelete();
+              e.stopPropagation();
+            }}
+            text="Delete"
+          >
+            <XMarkIcon width="1.4em" height="1.4em" />
+          </HeaderButtonWithText>
+        )}
       </DeleteButtonDiv>
     </StyledDiv>
   );