diff options
| author | OpeOginni <[email protected]> | 2026-02-02 13:06:45 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-02-02 06:06:45 -0600 |
| commit | 37979ea44fd3afb99f6c110aed55e93ffb877b59 (patch) | |
| tree | af3975394fdbcce66afd46cdb48ea08683acb4ce /packages | |
| parent | 50b5168c16c44093d176cebb342c86d005ec14f5 (diff) | |
| download | opencode-37979ea44fd3afb99f6c110aed55e93ffb877b59.tar.gz opencode-37979ea44fd3afb99f6c110aed55e93ffb877b59.zip | |
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>
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/app/src/pages/session.tsx | 11 | ||||
| -rw-r--r-- | packages/ui/src/styles/tailwind/index.css | 3 |
2 files changed, 10 insertions, 4 deletions
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx index d3e74072a..d03c4186c 100644 --- a/packages/app/src/pages/session.tsx +++ b/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> diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css index f7ce21ad9..d8b0b2a1a 100644 --- a/packages/ui/src/styles/tailwind/index.css +++ b/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; |