Skip to content

fix(admin): give list toolbars one control height - #4438

Closed
khoinguyenpham04 wants to merge 2 commits into
noah/admin-page-headerfrom
noah/admin-toolbar-height
Closed

khoinguyenpham04 wants to merge 2 commits into
noah/admin-page-headerfrom
noah/admin-toolbar-height

Conversation

@khoinguyenpham04

@khoinguyenpham04 khoinguyenpham04 commented Oct 27, 2026 •

Copy link
Copy Markdown
Collaborator

What does this PR do?

List toolbars on the admin came in two heights:

  • 28px: Posts, Pages and Users used Kumo's small search box and selects.
  • 36px: Media, Comments, Redirects, Sections, Tags and Bylines used the default size, which also matches the page header buttons and tabs next to the toolbar.

Changes:

  • TableToolbarSearch uses Kumo's default size and no longer takes a size prop, so the search box always has one height.
  • The content list filters (status, author, byline, date field, date range and Clear filters) and the Users role filter use the default size.
  • To fit the taller controls, the date-range and byline filter icons grow from 12px to 16px, and the status and date-field menu options grow from 12px to the default text size.
  • Selects take the full width on phones and size to their content on larger screens. The Users role filter now does too, matching Sections and Comments, and Sections and Bylines drop their one-off widths.
  • The status and date field filters are now as wide as their longest option, so choosing a value doesn't resize them. At the default size, some status labels are wider than the filter's minimum width and some aren't, so choosing a status resized the filter, and at some window widths that re-wrapped the row and moved the table.

Stacked on #4437. Design review scores for the two PRs together are in that PR.

Type of change

  • Bug fix
  • Feature (requires an accepted feature plan or RFC)
  • Refactor (no behavior change)
  • Translation
  • Documentation
  • Performance improvement
  • Tests
  • Chore (dependencies, CI, tooling)

Your connection to this change

  • I use EmDash and ran into the problem this PR addresses
  • I maintain a tool, dependency, or service that EmDash uses, and this change concerns that integration
  • A Maintainer approved this specific change before I opened the PR

Checklist

  • I have read CONTRIBUTING.md
  • pnpm typecheck passes
  • pnpm lint passes
  • pnpm test passes (or targeted tests for my change)
  • pnpm format has been run
  • I have added/updated tests for my changes (if applicable)
  • User-visible strings in the admin UI are wrapped for translation (if applicable). Do not include messages.po changes except in translation PRs — a workflow extracts catalogs on merge to main.
  • I have added and reviewed the user-facing changeset (if this PR changes a published package)
  • New features link to their merged design PR: https://github.com/emdash-cms/emdash/pull/...
  • I have included screenshots below if this PR changes the UI

Not applicable:

  • Strings: no strings change.
  • Design PR: this is a bug fix.

AI assistance disclosure

  • This PR includes AI-generated code or text — model/tool: Claude Opus 5.5

Screenshots / test output

The Media, Comments, Redirects, Sections, Tags and Bylines toolbars already used the default size, so they don't change.

Before After
Posts list before the change: the search box and filters are shorter than the tabs and the Add New button Posts list after the change: the search box and filters match the tabs and the Add New button
Pages list before the change, with small toolbar controls Pages list after the change, with toolbar controls the same height as the header button
Users list before the change, with a small search box and role filter Users list after the change, with a search box and role filter the same height as the Invite User button
Phone (390px)
Before After
Posts list on a phone before the change, with small filters Posts list on a phone after the change, with filters at the default height, two per row
Users list on a phone before the change Users list on a phone after the change
Arabic
Before After
Arabic posts list before the change, with small toolbar controls Arabic posts list after the change, with toolbar controls at the default height
Arabic users list before the change Arabic users list after the change

A new layout test checks that the status and date field filters keep one width whichever value is chosen. Without the fix, the status filter measures 128, 131.5 and 136.5px across its five values.

Targeted admin tests: before the width fix, 11 files and 231 tests passed (ContentList, ContentList layout, BylineFilter, MediaLibrary, media picker, Redirects, CommentInbox, Sections, TaxonomyManager, Bylines, RouterLinkButton). After it, the ContentList, ContentList layout, content list columns and router tests pass (4 files, 137 tests).

@changeset-bot

changeset-bot Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c6f48a6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@emdash-cms/admin Patch
emdash Patch
@emdash-cms/cloudflare Patch
@emdash-cms/plugin-test Patch
@emdash-cms/sandbox-workerd Patch
@emdash-cms/auth Patch
@emdash-cms/blocks Patch
create-emdash Patch
@emdash-cms/gutenberg-to-portable-text Patch
@emdash-cms/x402 Patch
@emdash-cms/auth-atproto Patch
@emdash-cms/plugin-embeds Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/admin@4438

@emdash-cms/auth

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/auth@4438

@emdash-cms/auth-atproto

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/auth-atproto@4438

@emdash-cms/blocks

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/blocks@4438

@emdash-cms/cloudflare

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/cloudflare@4438

@emdash-cms/contentful-to-portable-text

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/contentful-to-portable-text@4438

emdash

npm i https://pkg.pr.new/emdash-cms/emdash@4438

create-emdash

npm i https://pkg.pr.new/emdash-cms/emdash/create-emdash@4438

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/gutenberg-to-portable-text@4438

@emdash-cms/plugin-cli

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-cli@4438

@emdash-cms/plugin-test

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-test@4438

@emdash-cms/plugin-types

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-types@4438

@emdash-cms/registry-client

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/registry-client@4438

@emdash-cms/registry-lexicons

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/registry-lexicons@4438

@emdash-cms/registry-loader

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/registry-loader@4438

@emdash-cms/registry-moderation

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/registry-moderation@4438

@emdash-cms/registry-verification

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/registry-verification@4438

upgrade-emdash

npm i https://pkg.pr.new/emdash-cms/emdash/upgrade-emdash@4438

@emdash-cms/sandbox-workerd

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/sandbox-workerd@4438

@emdash-cms/x402

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/x402@4438

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-ai-moderation@4438

@emdash-cms/plugin-ai-search

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-ai-search@4438

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-atproto@4438

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-audit-log@4438

@emdash-cms/plugin-color

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-color@4438

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-embeds@4438

@emdash-cms/plugin-field-kit

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-field-kit@4438

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-forms@4438

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/emdash-cms/emdash/@emdash-cms/plugin-webhook-notifier@4438

commit: c6f48a6

@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Visual regression: 14 screens changed

These admin screens render differently on this PR. Confirm every change below is intended before accepting.

Screen Image Compare
content-list-byline-filter-ltr expected · actual
content-list-byline-filter-rtl expected · actual
content-list-date-field-filter-ltr expected · actual
content-list-date-field-filter-rtl expected · actual
content-list-date-range-filter-ltr expected · actual
content-list-date-range-filter-rtl expected · actual
content-list-ltr expected · actual
content-list-rtl expected · actual
content-list-status-filter-ltr expected · actual
content-list-status-filter-rtl expected · actual
dashboard-ltr expected · actual
dashboard-rtl expected · actual
menus-ltr expected · actual
menus-rtl expected · actual

Maintainers: if every change above is intended, comment /accept-baselines
to commit the regenerated Linux baselines to this PR.

Measured head: c6f48a64b017b0524269b3d32f0b977116af6250. /accept-baselines accepts the snapshots for this commit.

github-actions Bot pushed a commit that referenced this pull request Oct 27, 2026
Search boxes, filter selects and filter buttons on list pages came in
two heights: Posts, Pages and Users used Kumo's small size while Media,
Comments, Redirects, Sections, Tags and Bylines used the default.

All toolbar controls now use the default height that matches the page
header buttons, and TableToolbarSearch no longer takes a size. The
content list's filter icons and menu options grow to fit, and the
Users, Sections and Bylines filters size the same way as the others.
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://noah-admin-toolbar-height.try.emdashcms.com, https://noah-admin-toolbar-height-emdash-playground.emdash-cms.workers.dev (commit c6f48a6)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status Deployment URL Commit Updated (UTC) See this deployment's details
  • Build: Success ✅
  • Deployment: Success ✅

View logs ↗
https://2ff4992b.try.emdashcms.com, https://2ff4992b-emdash-playground.emdash-cms.workers.dev c6f48a6 2026-10-27T15:54:56.015Z Visit the dashboard ↗
  • Build: Success ✅
  • Deployment: Success ✅

View logs ↗
https://9e45c511.try.emdashcms.com, https://9e45c511-emdash-playground.emdash-cms.workers.dev 6384533 2026-10-27T15:14:44.211Z Visit the dashboard ↗

@khoinguyenpham04
khoinguyenpham04 force-pushed the noah/admin-toolbar-height branch from 6384533 to c6f48a6 Compare October 27, 2026 15:46
@github-actions github-actions Bot added size/M and removed size/S labels Oct 27, 2026
github-actions Bot pushed a commit that referenced this pull request Oct 27, 2026
@khoinguyenpham04
khoinguyenpham04 removed this pull request from stack #4439 October 27, 2026 16:20
@khoinguyenpham04
khoinguyenpham04 deleted the noah/admin-toolbar-height branch October 27, 2026 16:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant