From 4e1d37d864e692c19613e608048a38b46d5ecd27 Mon Sep 17 00:00:00 2001
From: Marc McIntosh <marcmcintosh1987@gmail.com>
Date: Tue, 26 Dec 2023 23:37:01 +0100
Subject: [PATCH] fix(ui): weird rendering when chats have long text

---
 src/App.tsx                          |  7 +++----
 src/components/PageWrapper/index.tsx |  1 +
 src/features/Chat.tsx                | 11 +++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b83ccfa0..771129ce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import { Flex } from "@radix-ui/themes";
 import { Chat } from "./features/Chat";
 import { useEventBusForHost } from "./hooks/useEventBusForHost";
 import { HistorySideBar } from "./features/HistorySideBar";
-import { PageWrapper } from "./components/PageWrapper";
 import { Theme } from "./components/Theme";
 import "./App.css";
 
@@ -12,9 +11,9 @@ function App() {
     <Theme>
       <Flex>
         <HistorySideBar />
-        <PageWrapper>
-          <Chat />
-        </PageWrapper>
+        {/* <PageWrapper> */}
+        <Chat />
+        {/* </PageWrapper> */}
       </Flex>
     </Theme>
   );
diff --git a/src/components/PageWrapper/index.tsx b/src/components/PageWrapper/index.tsx
index 7f919097..5c668e80 100644
--- a/src/components/PageWrapper/index.tsx
+++ b/src/components/PageWrapper/index.tsx
@@ -1 +1,2 @@
+// TODO: delete this, it's done it's job
 export { PageWrapper } from "./PageWrapper";
diff --git a/src/features/Chat.tsx b/src/features/Chat.tsx
index 480768c0..c5a3c9ae 100644
--- a/src/features/Chat.tsx
+++ b/src/features/Chat.tsx
@@ -19,6 +19,17 @@ export const Chat: React.FC = () => {
       direction="column"
       justify="between"
       grow="1"
+      p={{
+        initial: "9",
+        // initial: "5",
+        //  xs: "6",
+        //  sm: "7",
+        //   md: "9"
+      }}
+      style={{
+        height: "100dvh",
+        maxWidth: "calc(100vw - 260px)", // TODO: host this  as the side bar won't always be there
+      }}
       // width="100%"
     >
       <ChatContent