mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
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)  ## Screenshots (390px / iPhone viewport) ### Navbar | Before | After | |--------|-------| |  |  | 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: hamburger menu had no navigation links. After: Workspaces, Templates, and Agents links appear at the top of the dropdown. ### Agents sidebar | Before | After | |--------|-------| |  |  | 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: `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:
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user