Merge pull request #9 from OpenKnots/okcode/wider-chat-conversation

Widen chat conversation layout to 7xl

Author: BunsDev

apps/web/src/components/BranchToolbar.tsx

@@ -109,7 +109,7 @@ export default function BranchToolbar({
   if (!activeThreadId || !activeProject) return null;
 
   return (
-    <div className="mx-auto flex w-full max-w-3xl items-center justify-between px-5 pb-3 pt-1">
+    <div className="mx-auto flex w-full max-w-7xl items-center justify-between px-5 pb-3 pt-1">
       {envLocked || activeWorktreePath ? (
         <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
           {activeWorktreePath ? (

apps/web/src/components/ChatView.tsx

@@ -3789,7 +3789,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
               <form
                 ref={composerFormRef}
                 onSubmit={onSend}
-                className="mx-auto w-full min-w-0 max-w-3xl"
+                className="mx-auto w-full min-w-0 max-w-7xl"
                 data-chat-composer-form="true"
               >
                 <input

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -597,7 +597,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <div
       ref={timelineRootRef}
       data-timeline-root="true"
-      className="mx-auto w-full min-w-0 max-w-3xl overflow-x-hidden"
+      className="mx-auto w-full min-w-0 max-w-7xl overflow-x-hidden"
     >
       {virtualizedRowCount > 0 && (
         <div className="relative" style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>

apps/web/src/components/chat/ProviderHealthBanner.tsx

@@ -25,7 +25,7 @@ export const ProviderHealthBanner = memo(function ProviderHealthBanner({
   const title = `${providerLabel} provider status`;
 
   return (
-    <div className="pt-3 mx-auto max-w-3xl">
+    <div className="pt-3 mx-auto max-w-7xl">
       <Alert variant={status.status === "error" ? "error" : "warning"}>
         <CircleAlertIcon />
         <AlertTitle>{title}</AlertTitle>

apps/web/src/components/chat/ThreadErrorBanner.tsx

@@ -11,7 +11,7 @@ export const ThreadErrorBanner = memo(function ThreadErrorBanner({
 }) {
   if (!error) return null;
   return (
-    <div className="pt-3 mx-auto max-w-3xl">
+    <div className="pt-3 mx-auto max-w-7xl">
       <Alert variant="error">
         <CircleAlertIcon />
         <AlertDescription className="line-clamp-3" title={error}>