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

fix: always open git panel from the right, full width on mobile (#22718)

Browse Source 
On small viewports (below `xl`) the git/changes panel was expanding as a
bottom sheet. This changes it to always appear from the right side:

- **Mobile (<`sm`/640px):** Panel opens full-width (`w-[100vw]`) as a
right-side overlay
- **`sm`+ (640px+):** Panel uses the persisted width (`--panel-width`)
with min 360px / max 70vw, drag handle enabled
- Parent flex container is always `flex-row` instead of `flex-col
xl:flex-row`

### Changes
- `AgentDetail.tsx`: Removed `flex-col xl:flex-row` responsive switch,
always uses `flex-row`
- `RightPanel.tsx`: Replaced bottom-sheet layout (`h-[42dvh]`) with
right-side panel at all breakpoints. Full viewport width below `sm`,
resizable width at `sm`+. Drag handle activates at `sm` instead of `xl`.
This commit is contained in:
Kyle Carberry
2026-03-06 15:11:08 -05:00
committed by GitHub
parent a104d608a3
commit 5712faaa2c
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/AgentDetail.tsx
+1 -1
View File
@@ -1120,7 +1120,7 @@ const AgentDetail: FC = () => {
<div
className={cn(
"relative flex min-h-0 min-w-0 flex-1",
shouldShowSidebar && !visualExpanded && "flex-col xl:flex-row",
shouldShowSidebar && !visualExpanded && "flex-row",
)}
>
<div
site/src/pages/AgentsPage/RightPanel.tsx
+3 -3
View File
@@ -235,18 +235,18 @@ export const RightPanel = ({
: cn(
"relative min-h-0 min-w-0",
visualOpen
? "flex h-[42dvh] min-h-[260px] max-h-[56dvh] flex-col xl:h-auto xl:max-h-none xl:w-[var(--panel-width)] xl:min-w-[360px] xl:max-w-[70vw] xl:border-0 xl:border-l xl:border-solid xl:border-border-default"
? "flex h-full w-[100vw] min-w-0 flex-col border-0 border-l border-solid border-border-default sm:w-[var(--panel-width)] sm:min-w-[360px] sm:max-w-[70vw]"
: "hidden",
),
)}
>
{/* Drag handle (xl+ only, on the left edge of the panel) */}
{/* Drag handle (sm+, on the left edge of the panel) */}
<div
onPointerDown={handlePointerDown}
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 xl:block",
"absolute top-0 left-0 z-20 hidden h-full w-1 cursor-col-resize select-none transition-colors hover:bg-content-link sm:block",
visualExpanded && "-left-1",
)}
/>