fix(admin): prevent dialogs from overflowing viewport on mobile by all3f0r1 · Pull Request #99 · emdash-cms/emdash

all3f0r1 · 2026-04-02T13:58:41Z

Summary

Fixes #92

On mobile, admin dialogs overflow the viewport horizontally — content is clipped on the left side because max-w-* and w-* classes exceed the screen width.

Add a global max-width: calc(100vw - 2rem) on [role="dialog"] in styles.css so all dialogs (current and future) stay within the viewport
Fix ContentPickerModal which used a fixed w-2xl instead of max-w-2xl

Test plan

Open admin on a mobile viewport (≤ 400px)
Trigger the Welcome modal → should fit within the screen
Open a content picker dialog → should not overflow
Open the media picker dialog → should not overflow
On desktop, dialogs should render unchanged (their max-w-* classes are narrower than 100vw - 2rem)

On small screens, admin dialogs overflow horizontally — content gets clipped on the left because various max-w-*/w-* classes exceed the viewport width. Add a global max-width cap on [role="dialog"] so all dialogs stay within the viewport. Also fix ContentPickerModal which used a fixed w-2xl instead of max-w-2xl. Fixes emdash-cms#92

changeset-bot · 2026-04-02T13:58:51Z

🦋 Changeset detected

Latest commit: e810e94

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

This PR includes changesets to release 10 packages

Name	Type
@emdash-cms/admin	Patch
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/plugin-ai-moderation	Patch
@emdash-cms/plugin-atproto	Patch
@emdash-cms/plugin-audit-log	Patch
@emdash-cms/plugin-color	Patch
@emdash-cms/plugin-embeds	Patch
@emdash-cms/plugin-forms	Patch
@emdash-cms/plugin-webhook-notifier	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 · 2026-04-05T07:49:03Z

Open in StackBlitz

@emdash-cms/admin

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

@emdash-cms/auth

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

@emdash-cms/blocks

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

@emdash-cms/cloudflare

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

emdash

npm i https://pkg.pr.new/emdash@99

create-emdash

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

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

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

@emdash-cms/x402

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

@emdash-cms/plugin-ai-moderation

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

@emdash-cms/plugin-atproto

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

@emdash-cms/plugin-audit-log

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

@emdash-cms/plugin-color

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

@emdash-cms/plugin-embeds

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

@emdash-cms/plugin-forms

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

@emdash-cms/plugin-webhook-notifier

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

commit: e810e94

github-actions · 2026-04-05T07:58:56Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

all3f0r1 · 2026-04-05T16:23:02Z

I have read the CLA Document and I hereby sign the CLA

BenjaminPrice · 2026-04-06T04:23:16Z

I'm still seeing the clipping for the welcome modal, when using Chrome on desktop with a mobile viewport.

…flow Sorry — the previous fix only set max-width on [role="dialog"], but Kumo's size variants (e.g. size="lg") apply min-width: 32rem which takes precedence over max-width in CSS. On viewports < 640px, dialogs were still overflowing because min-width won the conflict. This commit: - Wraps the dialog override in a @media (max-width: 639px) query - Adds min-width: 0 !important to actually let max-width constrain - Removes size="lg" from WelcomeModal (it was requesting min-w-[32rem] on a dialog capped at sm:max-w-md — contradictory) Tested at 390px viewport: both WelcomeModal and size="lg" dialogs now fit within calc(100vw - 2rem) on mobile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

all3f0r1 · 2026-04-06T13:30:13Z

In styles.css, I wrapped the dialog override in a @media (max-width: 639px) query and added min-width: 0 !important. The previous max-width rule alone was ineffective because kumo's size="lg" sets min-w-[32rem] (512px), and CSS min-width beats max-width when they conflict. Now on mobile, min-width is reset so max-width can actually constrain the dialog. The media query also avoids affecting desktop where the min-width variants are appropriate.

Alongside, in WelcomeModal.tsx, I removed size="lg" — it was setting min-w-[32rem] (512px) on a dialog constrained to sm:max-w-md (448px), which makes no sense. The default "base" size (sm:min-w-96 = 384px) is more appropriate for this modal.

@BenjaminPrice, can you give it another try, please?

Adds a useEffect that triggers onLoadMore when the user navigates to the last client-side page, so content beyond the first API page is fetched automatically. Skips fetch when a search query is active to avoid spurious loads from filtered results collapsing pagination. Also shows a "+" suffix on the item count when more pages are available and stabilizes the onLoadMore callback with useCallback. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

github-actions · 2026-04-07T13:46:38Z

Overlapping PRs

This PR modifies files that are also changed by other open PRs:

fix(admin): auto-fetch API pages when paginating content list #273 (4 shared files)
feat(admin): add i18n with Lingui #234 (4 shared files)

This may cause merge conflicts or duplicated work. A maintainer will coordinate.

BenjaminPrice

Content Modal width is correct now but the height doesn't scroll and the button to save is cut off

github-actions bot added the needs-approval label Apr 5, 2026

Merge branch 'main' into fix/mobile-dialog-overflow

cfed2fd

github-actions bot added area/admin size/S labels Apr 5, 2026

github-actions bot removed the needs-approval label Apr 5, 2026

github-actions bot added a commit that referenced this pull request Apr 5, 2026

@all3f0r1 has signed the CLA in #99

e083efd

github-actions bot added the cla: signed label Apr 6, 2026

github-actions bot added size/M overlap and removed size/S labels Apr 7, 2026

github-actions bot mentioned this pull request Apr 7, 2026

fix(admin): auto-fetch API pages when paginating content list #273

Open

16 tasks

BenjaminPrice suggested changes Apr 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(admin): prevent dialogs from overflowing viewport on mobile#99

fix(admin): prevent dialogs from overflowing viewport on mobile#99
all3f0r1 wants to merge 4 commits intoemdash-cms:mainfrom
all3f0r1:fix/mobile-dialog-overflow

all3f0r1 commented Apr 2, 2026

Uh oh!

changeset-bot bot commented Apr 2, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Apr 5, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 5, 2026 •

edited

Loading

Uh oh!

all3f0r1 commented Apr 5, 2026

Uh oh!

BenjaminPrice commented Apr 6, 2026

Uh oh!

all3f0r1 commented Apr 6, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

BenjaminPrice left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

all3f0r1 commented Apr 2, 2026

Summary

Test plan

Uh oh!

changeset-bot bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new bot commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

all3f0r1 commented Apr 5, 2026

Uh oh!

BenjaminPrice commented Apr 6, 2026

Uh oh!

all3f0r1 commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2026

Overlapping PRs

Uh oh!

BenjaminPrice left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Apr 2, 2026 •

edited

Loading

pkg-pr-new bot commented Apr 5, 2026 •

edited

Loading

github-actions bot commented Apr 5, 2026 •

edited

Loading

all3f0r1 commented Apr 6, 2026 •

edited

Loading