Procházet zdrojové kódy

fix: desktop layout and scroll gutters

Adam před 2 měsíci
rodič
revize
c120447fd0
1 změnil soubory, kde provedl 9 přidání a 4 odebrání
  1. 9 4
      packages/desktop/src/pages/session.tsx

+ 9 - 4
packages/desktop/src/pages/session.tsx

@@ -333,7 +333,12 @@ export default function Page() {
                 flex: layout.review.state() === "pane",
                 flex: layout.review.state() === "pane",
               }}
               }}
             >
             >
-              <div class="relative shrink-0 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-2xl mx-auto">
+              <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(),
+                }}
+              >
                 <Switch>
                 <Switch>
                   <Match when={session.id}>
                   <Match when={session.id}>
                     <div class="flex items-start justify-start h-full min-h-0">
                     <div class="flex items-start justify-start h-full min-h-0">
@@ -350,7 +355,7 @@ export default function Page() {
                           <MessageNav
                           <MessageNav
                             classList={{
                             classList={{
                               "hidden @6xl:flex": true,
                               "hidden @6xl:flex": true,
-                              "mt-0.5 mr-3 absolute right-full": wide(),
+                              "mt-0.5 mr-3 absolute left-6": wide(),
                               "mt-3 absolute left-6": !wide(),
                               "mt-3 absolute left-6": !wide(),
                             }}
                             }}
                             messages={session.messages.user()}
                             messages={session.messages.user()}
@@ -367,13 +372,13 @@ export default function Page() {
                         classes={{
                         classes={{
                           root: "pb-20 flex-1 min-w-0",
                           root: "pb-20 flex-1 min-w-0",
                           content: "pb-20",
                           content: "pb-20",
-                          container: wide() ? "px-6" : "pr-6 pl-18 @6xl:pr-6",
+                          container: wide() ? "max-w-2xl mx-auto px-6" : "max-w-2xl mx-auto pr-6 pl-18 @6xl:pr-6",
                         }}
                         }}
                       />
                       />
                     </div>
                     </div>
                   </Match>
                   </Match>
                   <Match when={true}>
                   <Match when={true}>
-                    <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
+                    <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="text-20-medium text-text-weaker">New session</div>
                       <div class="text-20-medium text-text-weaker">New session</div>
                       <div class="flex justify-center items-center gap-3">
                       <div class="flex justify-center items-center gap-3">
                         <Icon name="folder" size="small" />
                         <Icon name="folder" size="small" />