fix: stop messages pane from taking over whole screen

Signed-off-by: Donnie Adams <[email protected]>

Author: thedadams

app/page.tsx

@@ -33,7 +33,9 @@ function RunFile() {
         >
           <div className="w-full h-full flex pb-10">
             <Threads />
-            <Script enableThreads showAssistantName className="w-[75%] pb-10" />
+            <div className="mx-auto w-[75%] 2xl:w-[55%] 3xl:[w-50%]">
+              <Script enableThreads showAssistantName className="px-4 pb-10" />
+            </div>
           </div>
         </div>
       </section>

components/script/chatBar.tsx

@@ -96,7 +96,7 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
   }
 
   return (
-    <div className="flex px-4 space-x-2 sw-full mx-auto 2xl:w-[75%]">
+    <div className="flex px-4 space-x-2 sw-full">
       <Button
         isIconOnly
         startContent={<GoKebabHorizontal />}

components/script/messages.tsx

@@ -163,7 +163,7 @@ const Messages = ({
   noAvatar?: boolean;
   restart?: () => void;
 }) => (
-  <div className="mx-auto px-6 2xl:w-[75%]">
+  <div>
     {messages.map((message, index) => (
       <Message
         key={index}