feat: improve mobile responsiveness (#24821)

Linear: DEVEX-270

The nav links (Workspaces, Templates, Tasks, Agents) were always
rendered horizontally, overflowing on small viewports and pushing
right-side controls (notifications, user menu, hamburger) off-screen.
The Agents page has no Navbar since it sits outside DashboardLayout,
leaving mobile users with no way to navigate back.

- Hide nav links below `md` breakpoint; they now live in the hamburger
menu alongside the existing admin/user settings sections
- Add Workspaces, Templates, and Agents entries to the mobile menu
dropdown
- Show the Agents sidebar logo header on all viewports (was `hidden
md:block`), giving mobile users a tap target back to `/workspaces`
- Reduce workspace page content padding from `p-8` to `p-4 md:p-8`, with
matching negative-margin fix on `ResourceMetadata`

## Demo (390px / iPhone viewport, 1.75x speed)


![mobile-demo](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/mobile-demo.gif)

## Screenshots (390px / iPhone viewport)

### Navbar

| Before | After |
|--------|-------|
|
![before-navbar](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/before-navbar.png)
|
![after-navbar](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/after-navbar.png)
|

Before: nav links (Workspaces, Templates, Tasks, Agents) are always
visible, overflowing the mobile header and pushing the hamburger menu
off-screen. After: nav links are hidden below `md`; only the logo and
right-side controls are shown.

### Mobile menu

| Before | After |
|--------|-------|
|
![before-mobile-menu](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/before-mobile-menu-open.png)
|
![after-mobile-menu](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/after-mobile-menu-open.png)
|

Before: hamburger menu had no navigation links. After: Workspaces,
Templates, and Agents links appear at the top of the dropdown.

### Agents sidebar

| Before | After |
|--------|-------|
|
![before-agents-sidebar](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/before-agents-sidebar.png)
|
![after-agents-sidebar](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/after-agents-sidebar.png)
|

Before: the Coder logo/back-link in the sidebar header was hidden on
mobile (`hidden md:block`). After: always visible, giving mobile users a
way to navigate back.

### Workspace page

| Before | After |
|--------|-------|
|
![before-workspace](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/before-workspace.png)
|
![after-workspace](https://raw.githubusercontent.com/coder/coder/mobile-screenshots/.github/pr-screenshots/after-workspace.png)
|

Before: `p-8` (32px) on all sides at every viewport. After: `p-4` (16px)
on mobile, `p-8` at `md` and above.

---

> Generated by Coder Agent
This commit is contained in:
Ben Potter
2026-04-30 11:32:40 -05:00
committed by GitHub
parent e57525002c
commit 8471b19248
3 changed files with 17 additions and 3 deletions
@@ -78,6 +78,16 @@ export const MobileMenu: FC<MobileMenuProps> = ({
className="w-screen border-0 border-b border-solid p-0 py-2"
sideOffset={17}
>
<DropdownMenuItem asChild className={itemStyles.default}>
<Link to="/workspaces">Workspaces</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className={itemStyles.default}>
<Link to="/templates">Templates</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className={itemStyles.default}>
<Link to="/agents">Agents</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<ProxySettingsSub proxyContextValue={proxyContextValue} />
{hasSomePermission && (
@@ -90,7 +90,11 @@ export const NavbarView: FC<NavbarViewProps> = ({
)}
</NavLink>
<NavItems className="ml-4" user={user} canCreateChat={canCreateChat} />
<NavItems
className="ml-4 hidden md:flex"
user={user}
canCreateChat={canCreateChat}
/>
{prerelease && buildInfo?.version && (
<a
+2 -2
View File
@@ -153,14 +153,14 @@ export const Workspace: FC<WorkspaceProps> = ({
)}
</div>
<div className="relative w-full overflow-y-auto bg-[radial-gradient(circle_at_1px_1px,hsl(var(--content-disabled))_0,transparent_1px)] bg-[-2px_-2px] bg-[length:16px_16px] p-8">
<div className="relative w-full overflow-y-auto bg-[radial-gradient(circle_at_1px_1px,hsl(var(--content-disabled))_0,transparent_1px)] bg-[-2px_-2px] bg-[length:16px_16px] p-4 md:p-8">
<div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-surface-primary to-transparent"></div>
<div className="relative z-10">
{selectedResource && (
<ResourceMetadata
resource={selectedResource}
className="-mx-8 -mt-8 mb-6"
className="-mx-4 -mt-4 mb-6 md:-mx-8 md:-mt-8"
/>
)}
<div className="flex flex-col gap-6 max-w-[1200px] m-auto">