fix(admin): keep rich-text formatting toolbar visible on long posts - #1223
Conversation
The editor toolbar scrolled out of view on long documents. Make it `sticky top-0` and switch the editor wrapper from `overflow-hidden` to `overflow-clip` so the rounded corners still clip without establishing a nested scroll container that breaks sticky positioning. The scroll container is the admin shell <main>, so top-0 pins it under the header. Closes #1192.
🦋 Changeset detectedLatest commit: 3df4b75 The changes in this PR will be included in the next version bump. This PR includes changesets to release 14 packages
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 |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
emdash-demo-cache | 59072e5 | Jun 02 2026, 08:33 AM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
emdash-playground | 59072e5 | Jun 02 2026, 08:33 AM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
docs | 59072e5 | Jun 02 2026, 08:32 AM |
![emdashbot[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/3255304?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is a clean, minimal CSS fix that correctly addresses the stated problem.
Approach: Using position: sticky on the toolbar and switching the wrapper from overflow-hidden to overflow-clip is the right solution. overflow-hidden establishes a scroll container that traps sticky positioning, while overflow-clip clips the rounded corners without creating that trap, letting the toolbar stick to the admin shell <main> scroll container. The z-10 on the toolbar is safely below the z-[100] used by bubble menus, slash menus, and table menus. Making the background fully opaque (bg-kumo-tint) instead of 50% opacity prevents content from bleeding through when the toolbar is stuck — a necessary visual change.
What I checked:
- Diff scope: Two-line CSS-only change plus a changeset. No drive-by edits.
- AGENTS.md conventions: No new user-facing strings (nothing to localize via Lingui). No physical directional Tailwind classes added —
top-0andz-10are direction-neutral. The existingborder-bis unchanged and not a new regression. - Sticky/clipping interaction:
overflow-clipdoes not establish a scroll container, so the toolbar’s sticky positioning correctly uses the<main>overflow-y-autoancestor. The wrapper is tall (contains the full editor content), so the toolbar remains within the wrapper’s clip box for the entire scroll range and won’t be prematurely clipped. - Z-index hierarchy: Floating menus (bubble, slash, table) all use
z-[100], well above the toolbar’sz-10. - Changeset: Present, correctly scoped to
@emdash-cms/adminas a patch, with a descriptive message. - Tests: No existing tests reference the changed CSS classes, so there’s no test breakage risk. A purely visual CSS fix is appropriately left to manual verification.
No issues found. LGTM.
Good fix! Just one change: there's a gap between the the toolbar and the top of the window. See the screenshot and preview: https://fix-1192-sticky-editor-toolbar-emdash-playground.emdash-cms.workers.dev/_emdash/admin/content/posts/01KSYFK0XDSY4HX1J86X3J012G |
The sticky toolbar pinned against the scroll container's padding box, sticking 24px (the admin <main> p-6 top padding) below the viewport top and leaving a band where scrolled content showed through above the bar. Offset the sticky top by the padding so it pins flush.
@emdash-cms/admin
@emdash-cms/auth
@emdash-cms/auth-atproto
@emdash-cms/blocks
@emdash-cms/cloudflare
@emdash-cms/contentful-to-portable-text
emdash
create-emdash
@emdash-cms/gutenberg-to-portable-text
@emdash-cms/plugin-cli
@emdash-cms/plugin-types
@emdash-cms/registry-client
@emdash-cms/registry-lexicons
@emdash-cms/sandbox-workerd
@emdash-cms/x402
@emdash-cms/plugin-ai-moderation
@emdash-cms/plugin-atproto
@emdash-cms/plugin-audit-log
@emdash-cms/plugin-color
@emdash-cms/plugin-embeds
@emdash-cms/plugin-field-kit
@emdash-cms/plugin-forms
@emdash-cms/plugin-webhook-notifier
commit: |
github-actions
Bot
added
the
review/needs-rereview
There was a problem hiding this comment.
Pull request overview
Fixes the admin rich-text editor toolbar scrolling out of view on long posts by making the toolbar sticky and adjusting the editor container’s overflow behavior so sticky positioning can work while preserving rounded-corner clipping.
Changes:
- Switch the editor wrapper from
overflow-hiddentooverflow-clipto avoid interfering withposition: stickywhile still clipping rounded corners. - Make the
EditorToolbarsticky (with-top-6,z-10) and use an opaque background to prevent content bleed-through. - Add a patch changeset for
@emdash-cms/admindocumenting the UI fix.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/admin/src/components/PortableTextEditor.tsx | Updates editor container overflow and makes the formatting toolbar sticky/opaque to remain visible during scroll. |
| .changeset/fix-sticky-editor-toolbar.md | Adds a patch changeset describing the sticky toolbar behavior change. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ascorbic
left a comment
ascorbic
left a comment
There was a problem hiding this comment.
Tested in the playground. Looks great!
github-actions
Bot
added
review/approved
What does this PR do?
Closes #1192.
When editing long posts, the WYSIWYG formatting toolbar scrolled out of the viewport, forcing users to scroll back up to apply formatting.
Fix:
EditorToolbarrootstickywith an opaquebg-kumo-tintso content doesn't bleed through.overflow-hiddentooverflow-clip—overflow-hiddenestablished a nested scroll container that broke sticky positioning;overflow-clipstill clips the rounded corners without doing so.<main>, which carriesp-6padding; the toolbar uses-top-6so it pins flush to the top of the scroll area (cancelling that padding) rather than leaving a gap where scrolled content shows through.Testing:
pnpm lint:quickclean,@emdash-cms/admintypecheck passes. CSS-only change, verified in-browser (LTR, RTL/Arabic, and unscrolled) — toolbar pins flush with no gap, rounded corners intact, bubble/slash menus still layer above it.Manual verification:
Type of change
Checklist
pnpm typecheckpassespnpm lintpassespnpm testpasses (or targeted tests for my change)pnpm formathas been runmessages.pochanges except in translation PRs — a workflow extracts catalogs on merge tomain.AI-generated code disclosure
Screenshots / test output
Before (gap above toolbar) → after (flush) verified in-browser; see review thread.
Try this PR
Open a fresh playground →
A full working EmDash site, deployed from this branch. Each visit gets its own session-scoped sandbox: no login needed and no shared state. Try the admin, edit content, hit the public site.
Tracks
fix/1192-sticky-editor-toolbar. Updated automatically when the playground redeploys.