feat(app): enhance responsive design with additional breakpoints for larger screen layout adjustments (#10459)

Co-authored-by: opencode <[email protected]>
Co-authored-by: Aiden Cline <[email protected]>
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>

Author: 4 people

packages/app/src/pages/session.tsx

@@ -1940,7 +1940,8 @@ export default function Page() {
                               "sticky top-0 z-30 bg-background-stronger": true,
                               "w-full": true,
                               "px-4 md:px-6": true,
-                              "md:max-w-200 md:mx-auto": centered(),
+                              "md:max-w-200 md:mx-auto 3xl:max-w-[1200px] 3xl:mx-auto 4xl:max-w-[1600px] 4xl:mx-auto 5xl:max-w-[1900px] 5xl:mx-auto":
+                              centered(),
                             }}
                           >
                             <div class="h-10 flex items-center gap-1">
@@ -1968,7 +1969,8 @@ export default function Page() {
                           class="flex flex-col gap-32 items-start justify-start pb-[calc(var(--prompt-height,8rem)+64px)] md:pb-[calc(var(--prompt-height,10rem)+64px)] transition-[margin]"
                           classList={{
                             "w-full": true,
-                            "md:max-w-200 md:mx-auto": centered(),
+                            "md:max-w-200 md:mx-auto 3xl:max-w-[1200px] 3xl:mx-auto 4xl:max-w-[1600px] 4xl:mx-auto 5xl:max-w-[1900px] 5xl:mx-auto":
+                            centered(),
                             "mt-0.5": centered(),
                             "mt-0": !centered(),
                           }}
@@ -2021,7 +2023,8 @@ export default function Page() {
                                   data-message-id={message.id}
                                   classList={{
                                     "min-w-0 w-full max-w-full": true,
-                                    "md:max-w-200": centered(),
+                                    "md:max-w-200 3xl:max-w-[1200px] 4xl:max-w-[1600px] 5xl:max-w-[1900px]":
+                                    centered(),
                                   }}
                                 >
                                   <SessionTurn
@@ -2078,7 +2081,7 @@ export default function Page() {
             <div
               classList={{
                 "w-full px-4 pointer-events-auto": true,
-                "md:max-w-200 md:mx-auto": centered(),
+                "md:max-w-200 3xl:max-w-[1200px] 4xl:max-w-[1600px] 5xl:max-w-[1900px]": centered(),
               }}
             >
               <Show when={request()} keyed>

packages/ui/src/styles/tailwind/index.css

@@ -17,6 +17,9 @@
   --breakpoint-lg: 64rem;
   --breakpoint-xl: 80rem;
   --breakpoint-2xl: 96rem;
+  --breakpoint-3xl: 112rem;
+  --breakpoint-4xl: 128rem;
+  --breakpoint-5xl: 144rem;
 
   --container-3xs: 16rem;
   --container-2xs: 18rem;