diff options
| author | Adam <[email protected]> | 2025-11-24 17:59:34 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2025-11-24 17:59:37 -0600 |
| commit | 75654afeaaa3d469e20d957e01b033c122bab99d (patch) | |
| tree | 756b46c985509d63e547fc20f766504f360c9240 | |
| parent | f10d18956a17c6dec8e50f54bf145013897dcda2 (diff) | |
| download | opencode-75654afeaaa3d469e20d957e01b033c122bab99d.tar.gz opencode-75654afeaaa3d469e20d957e01b033c122bab99d.zip | |
fix(share): responsiveness
| -rw-r--r-- | packages/desktop/src/pages/session.tsx | 2 | ||||
| -rw-r--r-- | packages/enterprise/src/routes/share/[sessionID].tsx | 35 | ||||
| -rw-r--r-- | packages/ui/src/components/message-nav.tsx | 4 |
3 files changed, 17 insertions, 24 deletions
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx index 028917e0b..a6188b8e9 100644 --- a/packages/desktop/src/pages/session.tsx +++ b/packages/desktop/src/pages/session.tsx @@ -349,7 +349,7 @@ export default function Page() { /> <MessageNav classList={{ - "hidden @6xl:block": true, + "hidden @6xl:flex": true, "mt-0.5 mr-3 absolute right-full": wide(), "mt-3 mr-8": !wide(), }} diff --git a/packages/enterprise/src/routes/share/[sessionID].tsx b/packages/enterprise/src/routes/share/[sessionID].tsx index e34cbcc7e..6c29437bc 100644 --- a/packages/enterprise/src/routes/share/[sessionID].tsx +++ b/packages/enterprise/src/routes/share/[sessionID].tsx @@ -184,6 +184,8 @@ export default function () { </div> ) + const wide = createMemo(() => diffs().length === 0) + return ( <div class="relative bg-background-stronger w-screen h-screen overflow-hidden flex flex-col"> <header class="h-12 px-6 py-2 flex items-center justify-between self-stretch bg-background-base border-b border-border-weak-base"> @@ -214,48 +216,39 @@ export default function () { <div classList={{ "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full mx-auto": true, - "px-21 @4xl:px-6 max-w-2xl": diffs().length > 0, - "px-6 max-w-2xl": diffs().length === 0, + "px-21 @4xl:px-6 max-w-2xl": !wide(), + "px-6 max-w-2xl": wide(), }} > {title()} <div class="flex items-start justify-start h-full min-h-0"> <Show when={messages().length > 1}> <> - <div - classList={{ - "xl:hidden": true, - "absolute right-[90%]": diffs().length > 0, - "absolute right-full": diffs().length === 0, - }} - > + <div class="xl:hidden absolute right-full"> <MessageNav - classList={{ - "mt-0.5 mr-8": diffs().length === 0, - "mt-2.5 mr-3": diffs().length > 0, - }} + class="mt-2 mr-3" messages={messages()} current={activeMessage()} onMessageSelect={setActiveMessage} - size={!diffs().length ? "normal" : "compact"} + size="compact" /> </div> <div classList={{ "hidden xl:block": true, - "absolute right-[90%]": diffs().length > 0, - "absolute right-full": diffs().length === 0, + "absolute right-[90%]": !wide(), + "absolute right-full": wide(), }} > <MessageNav classList={{ - "mt-0.5 mr-8": diffs().length === 0, - "mt-2.5 mr-3": diffs().length > 0, + "mt-2.5 mr-3": !wide(), + "mt-0.5 mr-8": wide(), }} messages={messages()} current={activeMessage()} onMessageSelect={setActiveMessage} - size={!diffs().length ? "normal" : "compact"} + size={wide() ? "normal" : "compact"} /> </div> </> @@ -271,14 +264,14 @@ export default function () { </SessionTurn> </div> </div> - <Show when={diffs().length}> + <Show when={diffs().length > 0}> <div class="relative grow px-6 pt-14 flex-1 min-h-0 border-l border-border-weak-base"> <SessionReview diffs={diffs()} class="pb-20" /> </div> </Show> </div> <Switch> - <Match when={diffs().length}> + <Match when={diffs().length > 0}> <Tabs class="md:hidden"> <Tabs.List> <Tabs.Trigger value="session" class="w-1/2" classes={{ button: "w-full" }}> diff --git a/packages/ui/src/components/message-nav.tsx b/packages/ui/src/components/message-nav.tsx index 9d56ce1a6..134769dfc 100644 --- a/packages/ui/src/components/message-nav.tsx +++ b/packages/ui/src/components/message-nav.tsx @@ -64,12 +64,12 @@ export function MessageNav( return ( <Switch> <Match when={local.size === "compact"}> - <Tooltip openDelay={0} closeDelay={0} placement="top-start" gutter={-65} shift={-16} overlap> + <Tooltip openDelay={0} closeDelay={0} placement="left-start" gutter={-65} shift={-16} overlap> <Tooltip.Trigger as="div">{content()}</Tooltip.Trigger> <Tooltip.Portal> <Tooltip.Content data-slot="message-nav-tooltip"> <div data-slot="message-nav-tooltip-content"> - <MessageNav {...props} size="normal" /> + <MessageNav {...props} size="normal" class="" /> </div> </Tooltip.Content> </Tooltip.Portal> |