fix: desktop and share layouts

2 files changed, 50 insertions, 47 deletions

diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 55dd206fb..c990bf87f 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -336,7 +336,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-2xl mx-auto": !wide(),
+                  "max-w-146 mx-auto": !wide(),
                 }}
               >
                 <Switch>
@@ -355,7 +355,7 @@ export default function Page() {
                           <MessageNav
                             classList={{
                               "hidden @6xl:flex absolute": true,
-                              "mt-0.5 left-[calc((100%_-_min(100%,_42rem))_/_2)] -translate-x-full": wide(),
+                              "mt-0.5 left-[calc(((100%_-_min(100%,_36.5rem))_/_2)-1.5rem)] -translate-x-full": wide(),
                               "mt-2.5 left-6": !wide(),
                             }}
                             messages={session.messages.user()}
@@ -372,13 +372,13 @@ export default function Page() {
                         classes={{
                           root: "pb-20 flex-1 min-w-0",
                           content: "pb-20",
-                          container: wide() ? "max-w-2xl mx-auto px-6" : "max-w-2xl mx-auto pr-6 pl-18",
+                          container: "w-full " + (wide() ? "max-w-146 mx-auto px-6" : "pr-6 pl-18"),
                         }}
                       />
                     </div>
                   </Match>
                   <Match when={true}>
-                    <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-2xl mx-auto px-6">
+                    <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-146 mx-auto px-6">
                       <div class="text-20-medium text-text-weaker">New session</div>
                       <div class="flex justify-center items-center gap-3">
                         <Icon name="folder" size="small" />
@@ -399,12 +399,14 @@ export default function Page() {
                     </div>
                   </Match>
                 </Switch>
-                <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
-                  <PromptInput
-                    ref={(el) => {
-                      inputRef = el
-                    }}
-                  />
+                <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">
+                    <PromptInput
+                      ref={(el) => {
+                        inputRef = el
+                      }}
+                    />
+                  </div>
                 </div>
               </div>
               <Show when={layout.review.state() === "pane" && session.diffs().length}>
@@ -507,7 +509,7 @@ export default function Page() {
         </DragOverlay>
       </DragDropProvider>
       <Show when={session.layout.tabs.active}>
-        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+        <div class="absolute inset-x-0 px-6 max-w-146 flex flex-col justify-center items-center z-50 mx-auto bottom-8">
           <PromptInput
             ref={(el) => {
               inputRef = el
diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx
index 271fb290a..7c4af8ac2 100644
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -171,7 +171,7 @@ export default function () {
                 })
 
                 const title = () => (
-                  <div class="flex flex-col gap-4 shrink-0">
+                  <div class="flex flex-col gap-4">
                     <div class="h-8 flex gap-4 items-center justify-start self-stretch">
                       <div class="pl-[2.5px] pr-2 flex items-center gap-1.75 bg-surface-strong shadow-xs-border-base">
                         <Mark class="shrink-0 w-3 my-0.5" />
@@ -215,7 +215,6 @@ export default function () {
                 )
 
                 const wide = createMemo(() => diffs().length === 0)
-                const columnPadding = () => (wide() ? "px-6" : "px-21 @4xl:px-6")
 
                 return (
                   <div class="relative bg-background-stronger w-screen h-screen overflow-hidden flex flex-col">
@@ -243,44 +242,44 @@ export default function () {
                       </div>
                     </header>
                     <div class="select-text flex flex-col flex-1 min-h-0">
-                      <div class="hidden md:flex w-full flex-1 min-h-0">
+                      <div classList={{ "hidden w-full flex-1 min-h-0": true, "md:flex": wide(), "lg:flex": !wide() }}>
                         <div
                           classList={{
-                            "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full mx-auto": true,
-                            "max-w-2xl": true,
+                            "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
+                            "mx-auto max-w-146": !wide(),
                           }}
                         >
-                          <div class={columnPadding()}>{title()}</div>
+                          <div
+                            classList={{
+                              "w-full flex justify-start items-start min-w-0": true,
+                              "max-w-146 mx-auto px-6": wide(),
+                              "pr-6 pl-18": !wide(),
+                            }}
+                          >
+                            {title()}
+                          </div>
                           <div class="flex items-start justify-start h-full min-h-0">
                             <Show when={messages().length > 1}>
                               <>
-                                <div class="md:hidden absolute right-full">
-                                  <MessageNav
-                                    class="mt-2 mr-3"
-                                    messages={messages()}
-                                    current={activeMessage()}
-                                    onMessageSelect={setActiveMessage}
-                                    size="compact"
-                                  />
-                                </div>
-                                <div
+                                <MessageNav
+                                  class="@6xl:hidden mt-2.5 absolute left-6"
+                                  messages={messages()}
+                                  current={activeMessage()}
+                                  onMessageSelect={setActiveMessage}
+                                  size="compact"
+                                />
+                                <MessageNav
                                   classList={{
-                                    "hidden md:block": true,
-                                    "absolute right-[90%]": !wide(),
-                                    "absolute right-full": wide(),
+                                    "hidden @6xl:flex absolute": true,
+                                    "mt-0.5 left-[calc(((100%_-_min(100%,_36.5rem))_/_2)-1.5rem)] -translate-x-full":
+                                      wide(),
+                                    "mt-2.5 left-6": !wide(),
                                   }}
-                                >
-                                  <MessageNav
-                                    classList={{
-                                      "mt-2.5 mr-3": !wide(),
-                                      "mt-0.5 mr-8": wide(),
-                                    }}
-                                    messages={messages()}
-                                    current={activeMessage()}
-                                    onMessageSelect={setActiveMessage}
-                                    size={wide() ? "normal" : "compact"}
-                                  />
-                                </div>
+                                  messages={messages()}
+                                  current={activeMessage()}
+                                  onMessageSelect={setActiveMessage}
+                                  size={wide() ? "normal" : "compact"}
+                                />
                               </>
                             </Show>
                             <SessionTurn
@@ -288,11 +287,11 @@ export default function () {
                               messageID={store.messageId ?? firstUserMessage()!.id!}
                               classes={{
                                 root: "grow",
-                                content: "flex flex-col justify-between",
-                                container: `${columnPadding()} pb-20`,
+                                content: "flex flex-col justify-between items-start",
+                                container: "w-full pb-20 " + (wide() ? "max-w-146 mx-auto px-6" : "pr-6 pl-18"),
                               }}
                             >
-                              <div class={`${columnPadding()} flex items-center justify-center pb-8 shrink-0`}>
+                              <div classList={{ "w-full flex items-center justify-center pb-8 shrink-0": true }}>
                                 <Logo class="w-58.5 opacity-12" />
                               </div>
                             </SessionTurn>
@@ -313,7 +312,7 @@ export default function () {
                       </div>
                       <Switch>
                         <Match when={diffs().length > 0}>
-                          <Tabs class="md:hidden">
+                          <Tabs classList={{ "md:hidden": wide(), "lg:hidden": !wide() }}>
                             <Tabs.List>
                               <Tabs.Trigger value="session" class="w-1/2" classes={{ button: "w-full" }}>
                                 Session
@@ -344,7 +343,9 @@ export default function () {
                           </Tabs>
                         </Match>
                         <Match when={true}>
-                          <div class="md:hidden !overflow-hidden">{turns()}</div>
+                          <div classList={{ "!overflow-hidden": true, "md:hidden": wide(), "lg:hidden": !wide() }}>
+                            {turns()}
+                          </div>
                         </Match>
                       </Switch>
                     </div>