Skip to content

Commit 1425b23

Browse files
charlesviencharlesvien
committed
Preserve scroll on fullscreen toggle and fall through on missing portal
1 parent 48d0cb3 commit 1425b23

2 files changed

Lines changed: 87 additions & 85 deletions

File tree

‎apps/code/src/renderer/components/permissions/PlanContent.tsx‎

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -53,56 +53,57 @@ export function PlanContent({ id, plan }: PlanContentProps) {
5353

5454
if (isFullscreen) {
5555
const portalTarget = document.getElementById("fullscreen-portal");
56-
if (!portalTarget) return null;
57-
return (
58-
<>
59-
<Flex justify="end" className="py-0.5">
60-
<IconButton
61-
size="1"
62-
variant="ghost"
63-
color="gray"
64-
onClick={() => setIsFullscreen(false)}
65-
title="Exit fullscreen"
66-
>
67-
<ArrowsIn size={12} />
68-
</IconButton>
69-
</Flex>
70-
71-
{createPortal(
72-
<Box className="pointer-events-auto absolute inset-0 flex flex-col bg-gray-1">
73-
<Flex
74-
align="center"
75-
justify="between"
76-
className="border-gray-6 border-b px-4 py-2"
56+
if (portalTarget) {
57+
return (
58+
<>
59+
<Flex justify="end" className="py-0.5">
60+
<IconButton
61+
size="1"
62+
variant="ghost"
63+
color="gray"
64+
onClick={() => setIsFullscreen(false)}
65+
title="Exit fullscreen"
7766
>
78-
<Flex align="center" gap="2">
79-
<ListChecks size={14} className="text-gray-11" />
80-
<Text size="2" className="text-gray-11">
81-
Plan
82-
</Text>
83-
</Flex>
84-
<IconButton
85-
size="1"
86-
variant="ghost"
87-
color="gray"
88-
onClick={() => setIsFullscreen(false)}
89-
title="Exit fullscreen (Escape)"
67+
<ArrowsIn size={12} />
68+
</IconButton>
69+
</Flex>
70+
71+
{createPortal(
72+
<Box className="pointer-events-auto absolute inset-0 flex flex-col bg-gray-1">
73+
<Flex
74+
align="center"
75+
justify="between"
76+
className="border-gray-6 border-b px-4 py-2"
9077
>
91-
<X size={14} />
92-
</IconButton>
93-
</Flex>
78+
<Flex align="center" gap="2">
79+
<ListChecks size={14} className="text-gray-11" />
80+
<Text size="2" className="text-gray-11">
81+
Plan
82+
</Text>
83+
</Flex>
84+
<IconButton
85+
size="1"
86+
variant="ghost"
87+
color="gray"
88+
onClick={() => setIsFullscreen(false)}
89+
title="Exit fullscreen (Escape)"
90+
>
91+
<X size={14} />
92+
</IconButton>
93+
</Flex>
9494

95-
<Box
96-
ref={scrollRef}
97-
className="plan-markdown flex-1 overflow-y-auto p-6"
98-
>
99-
{markdown}
100-
</Box>
101-
</Box>,
102-
portalTarget,
103-
)}
104-
</>
105-
);
95+
<Box
96+
ref={scrollRef}
97+
className="plan-markdown flex-1 overflow-y-auto p-6"
98+
>
99+
{markdown}
100+
</Box>
101+
</Box>,
102+
portalTarget,
103+
)}
104+
</>
105+
);
106+
}
106107
}
107108

108109
return (

‎apps/code/src/renderer/features/mcp-apps/components/McpAppHost.tsx‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -200,48 +200,49 @@ export function McpAppHost({
200200

201201
if (displayMode === "fullscreen") {
202202
const portalTarget = document.getElementById("fullscreen-portal");
203-
if (!portalTarget) return null;
204-
return (
205-
<>
206-
{fullscreenToggle}
203+
if (portalTarget) {
204+
return (
205+
<>
206+
{fullscreenToggle}
207207

208-
{createPortal(
209-
<Box
210-
className="pointer-events-auto absolute inset-0 flex flex-col bg-gray-1"
211-
style={{
212-
transition: "opacity 150ms ease",
213-
}}
214-
>
215-
<Flex
216-
align="center"
217-
justify="between"
218-
className="border-gray-6 border-b px-4 py-2"
208+
{createPortal(
209+
<Box
210+
className="pointer-events-auto absolute inset-0 flex flex-col bg-gray-1"
211+
style={{
212+
transition: "opacity 150ms ease",
213+
}}
219214
>
220-
<Flex align="center" gap="2">
221-
<Plugs size={14} className="text-gray-11" />
222-
<Text size="2" className="text-gray-11">
223-
{serverName} - {toolName}
224-
</Text>
225-
</Flex>
226-
<IconButton
227-
size="1"
228-
variant="ghost"
229-
color="gray"
230-
onClick={() => {
231-
setDisplayMode("inline");
232-
}}
233-
title="Exit fullscreen (Escape)"
215+
<Flex
216+
align="center"
217+
justify="between"
218+
className="border-gray-6 border-b px-4 py-2"
234219
>
235-
<X size={14} />
236-
</IconButton>
237-
</Flex>
220+
<Flex align="center" gap="2">
221+
<Plugs size={14} className="text-gray-11" />
222+
<Text size="2" className="text-gray-11">
223+
{serverName} - {toolName}
224+
</Text>
225+
</Flex>
226+
<IconButton
227+
size="1"
228+
variant="ghost"
229+
color="gray"
230+
onClick={() => {
231+
setDisplayMode("inline");
232+
}}
233+
title="Exit fullscreen (Escape)"
234+
>
235+
<X size={14} />
236+
</IconButton>
237+
</Flex>
238238

239-
<Box className="flex-1 overflow-hidden p-4">{iframeElement}</Box>
240-
</Box>,
241-
portalTarget,
242-
)}
243-
</>
244-
);
239+
<Box className="flex-1 overflow-hidden p-4">{iframeElement}</Box>
240+
</Box>,
241+
portalTarget,
242+
)}
243+
</>
244+
);
245+
}
245246
}
246247

247248
return (

0 commit comments

Comments
 (0)