TJ
5d746aa594
fix(site/src): replace hardcoded text-[13px] with scale tokens outside agents ( #28071 )
...
Replaces the arbitrary `text-[13px]` value with the design-system tokens
`text-sm` (14px) or `text-xs` (12px) in the 18 non-agents files that
used it. `AgentsPage` usages and `modules/resources/AgentMetadata.tsx`
are intentionally left alone; they'll be handled with the agents UI
separately.
Because the custom Tailwind scale bakes `font-weight: 500` into
`text-xs`/`text-sm`, `font-normal` was added wherever the text
previously rendered at 400 and is prose, code, or log content, so only
the size changes there. Short labels, headers, and numeric values take
the token's 500 weight as-is.
### Token decisions
| File | Token | Rationale |
|---|---|---|
| `components/Logs/LogLine.tsx` | `text-xs font-normal` | Dense mono log
output; 12px keeps line-height close to current |
| `components/PaginationWidget/PaginationAmount.tsx` | `text-xs
font-normal` | Caption-style "showing X of Y" text |
| `pages/IconsPage/IconsPage.tsx` (figcaption) | `text-xs font-normal` |
88px-wide icon captions |
| `pages/WorkspacesPage/WorkspacesButton.tsx` | `text-xs font-normal` |
Secondary line under the template name in the combobox |
| `modules/templates/TemplateExampleCard.tsx`,
`pages/CreateTemplateGalleryPage/...` | `text-xs font-normal` |
Secondary card description prose (and its "Read more" link) |
| `components/FullPageLayout/Sidebar.tsx` / `Topbar.tsx` | `text-sm`
(Topbar adds `font-normal`) | Nav chrome; Topbar is a container so
`font-normal` avoids leaking 500 into all children |
| `components/Paywall/PaywallPremium.tsx` | `text-sm font-normal` |
Feature list prose (compact variant) |
| `modules/templates/TemplateFiles/TemplateFiles.tsx` /
`TemplateFileTree.tsx` | `text-sm` | File headers/tree labels (header
already `font-medium`) |
| `modules/workspaces/WorkspaceOutdatedTooltip.tsx` | `text-sm
font-normal` | Tooltip body prose |
| `pages/WorkspacePage/ResourcesSidebar.tsx` | `text-sm font-normal` |
Help text prose |
| `pages/AISettingsPage/.../CredentialField.tsx` | `text-sm font-normal`
| Mono credential input |
| `pages/DeploymentSettingsPage/Option.tsx` | `text-sm` | Already
`font-semibold` |
| `pages/HealthPage/Content.tsx` | `text-sm font-normal` | Mono detail
block |
| `pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx` |
`text-sm` | "Files" panel header label |
| `pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx` |
`text-sm` (`font-normal` on prose/empty state) | Data labels and values
in insight panels |
### Storybook review checklist
Stories directly covering changed components:
- `Logs/LogLine` and `Logs/Logs`
- `Paywall/PaywallPremium`
- `TemplateExampleCard`
- `TemplateFiles` and `TemplateFileTree`
- `WorkspaceOutdatedTooltip`
- `CreateTemplateGalleryPageView`
- `IconsPage`
- `TemplateInsightsPage`
- `TemplateVersionEditor` (also exercises FullPageLayout
`Topbar`/`Sidebar`)
Indirect coverage for components without their own stories:
- `PaginationAmount` → `PaginationWidget/PaginationContainer` stories,
plus paginated page views (`UsersPageView`, `AuditPageView`,
`ConnectionLogPageView`)
- `WorkspacesButton` → `WorkspacesPageView` stories (open the "New
workspace" combobox)
- `HealthPage/Content` → `HealthPage/*Page` stories (`DERPPage`,
`DatabasePage`, etc.)
- `ResourcesSidebar` → `WorkspacePage/Workspace` stories (failed-build
state)
- `FullPageLayout Topbar/Sidebar` → `TemplateVersionEditor` stories
- `CredentialField` → `ProviderForm` / `AddProviderPageView` stories
No story exists for `DeploymentSettingsPage/Option`; verify on the
deployment settings page (option value pills).
---
🤖 This PR was generated by Coder Agents on behalf of @tracyjohnsonux.
2026-08-17 18:41:06 +00:00
Michael Suchacz
36e36e2048
fix(site): wrap workspace topbar controls on narrow viewports ( #27313 )
...
On mobile-width viewports the workspace page grew to ~1080px wide (390px
viewport), pushing the schedule controls, status indicator, and action
buttons off-screen. Users had to zoom out or scroll horizontally to
reach Stop/Restart/Favorite/Share.
The topbar header and the right-side controls group used non-wrapping
flex rows, and every child is a `whitespace-nowrap` button, so the row's
minimum width (~725px for the controls alone) forced the document wider
than the viewport.
## Changes
- `WorkspaceTopbar`: allow the topbar header and the right controls
group to wrap; right controls stay right-aligned when they wrap onto
their own row.
- `WorkspaceActions`: allow the button row to wrap.
- `TopbarData`: merge a caller-provided `className` (no existing caller
passed one); the workspace breadcrumbs use it to wrap on very narrow
screens.
## Verification
Compared before/after with agent-browser on Storybook stories
(`Workspace: Running`, `WorkspaceTopbar: Outdated / WithQuotaWithOrgs /
Dormant / ConnectedWithMaxDeadline`):
| Viewport | Before `scrollWidth` | After `scrollWidth` |
|---|---|---|
| 320 | 1080 (overflow) | 305 (fits) |
| 390 | 1080 (overflow) | 375 (fits) |
| 768 | 1080 (overflow) | 753 (fits) |
| 1024 | 1080 (overflow) | 1009 (fits) |
| 1440 | 1425 (fits) | 1425, pixel-identical (0% diff) |
At widths >= 1280 the layout is unchanged (0% pixel diff at 1440 across
the stories above). Between ~1080-1230px the controls now wrap onto a
second right-aligned row instead of squeezing label text onto two lines
inside a single row.
Validation: `biome check`, `tsc --noEmit`, and `pnpm test:storybook` for
`Workspace.stories.tsx` + `WorkspaceTopbar.stories.tsx` (36 passed).
> This PR was prepared by Mux, an AI coding agent, on Mike's behalf.
2026-07-17 18:12:25 +02:00
Kayla はな
9fd2cc78fe
refactor(site): migrate more styles from emotion to tailwind ( #24914 )
2026-05-07 11:09:25 -06:00
Jake Howell
0060dee222
fix: remove all mui <IconButton /> instances ( #24045 )
...
This pull-request removes all instances of `<IconButton />` being
imported from `@mui/material/IconButton`. This means that we've removed
one whole dependency from MUI and replaced all instances with the local
variant.
2026-04-06 15:38:21 +00:00
Kayla はな
4fab372bdc
chore: modernize utils/ imports ( #23698 )
2026-03-26 16:20:25 -06:00
Kayla はな
e045f8c9e4
chore: additional typescript import modernization ( #23536 )
2026-03-24 16:04:39 -06:00
Jake Howell
aa9fafa372
fix: resolve <Avatar /> incorrect sizes ( #22538 )
...
This pull-request updates our icons to be inline with the Figma file.
They were slightly too small in the two variants of `--avatar-default`
and `--avatar-sm`. Now these are inline with what we have defined and
using the correct variants in the breadcrumbs.
2026-03-03 22:48:41 +11:00
ケイラ
b1f48f8d47
chore: disallow forwardRef ( #21906 )
2026-02-12 13:31:03 -07:00
Jake Howell
1b5170700a
fix: resolve sizing of <WorkspaceTopbar /> ( #21817 )
...
This pull-request resolves a very slight height issue we had with
`<WorkspaceTopbar />` wherein the Back/`‹` icon wouldn't actually be the
correct height. This was being pushed slightly larger due to the content
of the breadcrumbs exceeding `48px` height we `min-height` on.
| Old | New |
| --- | --- |
| <img width="324" height="251" alt="OLD_BACK_BUTTON"
src="https://github.com/user-attachments/assets/971057e5-3534-46e2-8f5b-acb96d510658 "
/> | <img width="324" height="251" alt="NEW_BACK_BUTTON"
src="https://github.com/user-attachments/assets/780912bc-8f43-4331-94b5-d1137c71a2bd "
/> |
2026-02-09 13:34:40 +11:00
Jake Howell
7fb9d517af
fix: increase workspace <Avatar /> size props ( #21321 )
2025-12-19 08:22:50 +11:00
Bruno Quaresma
accdcb8b77
chore: upgrade biome to v2 ( #19362 )
...
Guide for migration: https://biomejs.dev/guides/upgrade-to-biome-v2/
2025-08-14 18:25:15 -03:00
Brett Kolodny
5b5fbbed33
fix: implement proper overflow behavior for workspace history ( #19340 )
...
Before:
https://github.com/user-attachments/assets/2f1ff75c-4916-4d0a-a657-004d46691ea0
After:
https://github.com/user-attachments/assets/a8e575b5-84f9-4eea-b318-93d2a3d60aa5
Also converts a lot of emotion components to tailwind
2025-08-14 09:26:20 -04:00
ケイラ
4f1db8b866
chore: upgrade to storybook 9 ( #18983 )
2025-08-08 14:36:27 -06:00
Bruno Quaresma
4970fb9bfa
chore: replace MUI icons - 4 ( #17748 )
...
1. Replaced CloudUploadOutlined with CloudUploadIcon in FileUpload.tsx
2. Replaced DeleteOutline with TrashIcon in:
- WorkspaceTopbar.tsx
- TokensPageView.tsx
- GroupPage.tsx
3. Replaced FolderOutlined with FolderIcon in FileUpload.tsx
2025-05-09 15:57:28 -03:00
Bruno Quaresma
6cbc44bc58
refactor: replace MUI button on TopbarButton ( #16212 )
...
Related to https://github.com/coder/coder/issues/14978
2025-01-22 10:14:51 -03:00
Bruno Quaresma
300ad87c2e
refactor: replace and remove deprecated Avatar component ( #15930 )
...
Close https://github.com/coder/coder/issues/14997
2024-12-20 09:57:51 -03:00
Bruno Quaresma
badebc79cb
chore: add new avatar component ( #15882 )
...
Related to https://github.com/coder/coder/issues/14997
- Add a new `Avatar` component based on the [new avatar
design](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0 ).
- Deprecate existent `Avatar` component.
2024-12-17 05:55:31 -03:00
Kayla Washburn-Love
95a7c0c4f0
chore: use tabs for prettier and biome ( #14283 )
2024-08-15 14:53:53 -06:00
Kayla Washburn-Love
d15f16fa2e
chore: replace eslint with biome ( #14263 )
2024-08-15 13:26:29 -06:00
Kayla Washburn-Love
0fe109d517
chore: sort imports in our typescript code ( #12417 )
2024-03-05 16:31:22 -07:00
Bruno Quaresma
afcea74462
fix(site): retry and debug passing build parameters options ( #12384 )
2024-03-04 10:25:53 -03:00
Kayla Washburn-Love
dbaafc863c
chore: update no-restricted-imports lint rule ( #12180 )
...
- prevent importing from the "monolith" lodash module. individual modules are better for tree shaking.
- prevent importing `useTheme` and types from @mui/material/styles. prefer importing from @emotion/react.
2024-02-16 09:54:40 -07:00
Kayla Washburn
9f5a59d5c5
feat(site): improve icon compatibility across themes ( #11457 )
2024-01-08 14:12:40 -07:00
Bruno Quaresma
61450863ff
feat(site): move resources into the sidebar ( #11456 )
2024-01-08 13:14:25 -03:00
Bruno Quaresma
c428395d71
feat(site): move history into sidebar ( #11413 )
2024-01-05 13:32:05 -03:00
Bruno Quaresma
cf17fabcc6
feat(site): refactor workspace header to be more slim ( #11327 )
2024-01-02 12:42:51 -03:00
TJ