monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: opencode <opencode@sst.dev>
Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
This commit is contained in:
OpeOginni
2026-02-02 13:06:45 +01:00
committed by GitHub
parent 50b5168c16
commit 37979ea44f
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/app/src/pages/session.tsx
View File

@@ -1940,7 +1940,8 @@ export default function Page() {
"sticky top-0 z-30 bg-background-stronger": true, "sticky top-0 z-30 bg-background-stronger": true,
"w-full": true, "w-full": true,
"px-4 md:px-6": 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"> <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]" 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={{ classList={{
"w-full": true, "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.5": centered(),
"mt-0": !centered(), "mt-0": !centered(),
}} }}
@@ -2021,7 +2023,8 @@ export default function Page() {
data-message-id={message.id} data-message-id={message.id}
classList={{ classList={{
"min-w-0 w-full max-w-full": true, "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 <SessionTurn
@@ -2078,7 +2081,7 @@ export default function Page() {
<div <div
classList={{ classList={{
"w-full px-4 pointer-events-auto": true, "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> <Show when={request()} keyed>

3
packages/ui/src/styles/tailwind/index.css
View File

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