opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): fix agents right panel layout on small landscape viewports (#24161)

Browse Source 
Currently, when you're using Agents on mobile with a vertical viewport
and you open the sidebar, the sidebar takes up the entire screen. That's
great, since there isn't enough space to show the other tabs. But when
you tilt your phone to horizontal mode, all 3 tabs show up, and none of
them are very legible:


https://github.com/user-attachments/assets/50a54791-fe53-4a5d-ba7b-85e82f970851

This PR makes it so that the right sidebar takes up the entire screen on
small viewports (<1024px) in horizontal mode too.



https://github.com/user-attachments/assets/a06069df-9f2f-42bd-8072-a237434434e5
This commit is contained in:
Hugo Dutka
2026-04-08 20:01:59 +02:00
committed by GitHub
parent de61ac529d
commit 477d6d0cde
4 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/AgentChatPageView.tsx
+1 -1
View File
@@ -319,7 +319,7 @@ export const AgentChatPageView: FC<AgentChatPageViewProps> = ({
className={cn(
"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
visualExpanded && "hidden",
shouldShowSidebar && "max-md:hidden",
shouldShowSidebar && "max-lg:hidden",
)}
>
<div className="relative z-10 shrink-0 overflow-visible">
site/src/pages/AgentsPage/components/ChatTopBar.tsx
+1 -1
View File
@@ -172,7 +172,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
rel="noreferrer"
className={cn(
"inline-flex shrink-0 items-center gap-1.5 rounded-md border border-solid border-border-default px-2 py-0.5 text-xs font-medium text-content-secondary no-underline transition-colors hover:bg-surface-secondary hover:text-content-primary",
panel.showSidebarPanel && "md:hidden",
panel.showSidebarPanel && "lg:hidden",
)}
>
<PrStateIcon
site/src/pages/AgentsPage/components/RightPanel/RightPanel.tsx
+4 -7
View File
@@ -236,12 +236,9 @@ export const RightPanel = ({
className={cn(
visualExpanded
? "absolute inset-0 z-30 flex flex-col"
: cn(
"relative min-h-0 min-w-0",
visualOpen
? "flex h-full w-[100vw] min-w-0 flex-col border-0 border-solid border-border-default md:border-l md:w-[var(--panel-width)] md:min-w-[360px] md:max-w-[70vw]"
: "hidden",
),
: visualOpen
? "fixed inset-0 z-30 flex flex-col bg-surface-primary lg:relative lg:inset-auto lg:z-auto lg:h-full lg:min-h-0 lg:border-l lg:border-solid lg:border-border-default lg:w-[var(--panel-width)] lg:min-w-[360px] lg:max-w-[70vw]"
: "relative min-h-0 min-w-0 hidden",
)}
>
{/* Drag handle (sm+, on the left edge of the panel) */}
@@ -250,7 +247,7 @@ export const RightPanel = ({
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
className={cn(
"absolute top-0 left-0 z-20 hidden h-full w-1 cursor-col-resize select-none transition-colors hover:bg-content-link md:block",
"absolute top-0 left-0 z-20 hidden h-full w-1 cursor-col-resize select-none transition-colors hover:bg-content-link lg:block",
visualExpanded && "-left-1",
)}
/>
site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx
+4 -4
View File
@@ -180,7 +180,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
size="icon"
onClick={onClose}
aria-label="Close panel"
className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:hidden"
className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:hidden"
>
<XIcon />
</Button>
@@ -190,7 +190,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
size="icon"
onClick={onToggleExpanded}
aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:inline-flex"
className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
>
{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
</Button>
@@ -314,7 +314,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
size="icon"
onClick={onClose}
aria-label="Close panel"
className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:hidden"
className="h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:hidden"
>
<XIcon />
</Button>
@@ -324,7 +324,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
size="icon"
onClick={onToggleExpanded}
aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary md:inline-flex"
className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
>
{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
</Button>