wip: make the default container wider

3 files changed, 7 insertions, 6 deletions

diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 390872d36..379e715d6 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -630,7 +630,7 @@ export default function Page() {
                 <div
                   classList={{
                     "relative shrink-0 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full": true,
-                    "max-w-146 mx-auto": !wide(),
+                    "max-w-[800px] mx-auto": !wide(),
                   }}
                 >
                   <Switch>
@@ -654,7 +654,7 @@ export default function Page() {
                               container:
                                 "w-full " +
                                 (wide()
-                                  ? "max-w-146 mx-auto px-6"
+                                  ? "max-w-[800px] mx-auto px-6"
                                   : visibleUserMessages().length > 1
                                     ? "pr-6 pl-18"
                                     : "px-6"),
@@ -690,7 +690,7 @@ export default function Page() {
                     </Match>
                   </Switch>
                   <div class="absolute inset-x-0 bottom-8 flex flex-col justify-center items-center z-50">
-                    <div class="w-full max-w-146 px-6">
+                    <div class="w-full max-w-[800px] px-6">
                       <PromptInput
                         ref={(el) => {
                           inputRef = el
@@ -803,7 +803,7 @@ export default function Page() {
           </DragOverlay>
         </DragDropProvider>
         <Show when={tabs().active()}>
-          <div class="absolute inset-x-0 px-6 max-w-146 flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+          <div class="absolute inset-x-0 px-6 max-w-[800px] flex flex-col justify-center items-center z-50 mx-auto bottom-8">
             <PromptInput
               ref={(el) => {
                 inputRef = el
diff --git a/packages/ui/src/components/session-message-rail.css b/packages/ui/src/components/session-message-rail.css
index 03f0bb3ef..0e7ab96a1 100644
--- a/packages/ui/src/components/session-message-rail.css
+++ b/packages/ui/src/components/session-message-rail.css
@@ -17,7 +17,7 @@
   display: none;
 }
 
-@container (min-width: 72rem) {
+@container (min-width: 84.75rem) {
   [data-slot="session-message-rail-compact"] {
     display: none;
   }
@@ -32,7 +32,7 @@
 
 [data-component="session-message-rail"][data-wide] [data-slot="session-message-rail-full"] {
   margin-top: 0.125rem;
-  left: calc(((100% - min(100%, 36.5rem)) / 2) - 1.5rem);
+  left: calc(((100% - min(100%, 800px)) / 2) - 1.5rem);
   transform: translateX(-100%);
 }
 
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 4b8a44723..ba9f97ad2 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -27,6 +27,7 @@
     align-items: flex-start;
     align-self: stretch;
     min-width: 0;
+    max-width: 800px;
     gap: clamp(8px, calc(42px - var(--scroll-y) * 0.48), 42px);
     overflow-anchor: none;
   }