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 #92

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

🦋 Changeset detected

Latest commit: 4c907ec

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: 4c907ec

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 Lingui i18n infrastructure #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

The media grid had min-h-[300px] which prevented the flex layout from shrinking, pushing the footer (Cancel/Insert buttons) below the viewport. Replace with min-h-0 so the grid shrinks and scrolls internally, and add overflow-hidden on the dialog to enforce the max-h constraint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

all3f0r1 · 2026-04-10T13:33:11Z

@BenjaminPrice Whoops indeed my test case didn't include that... My bad.

Can you give it another try, please?

…sh-cms#99) * fix(admin): prevent dialogs from overflowing viewport on mobile 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 * fix(admin): reset min-width on mobile to actually prevent dialog overflow 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> * fix(admin): auto-fetch next API page when reaching last client-side page 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> * fix(admin): make media picker modal scrollable on mobile The media grid had min-h-[300px] which prevented the flex layout from shrinking, pushing the footer (Cancel/Insert buttons) below the viewport. Replace with min-h-0 so the grid shrinks and scrolls internally, and add overflow-hidden on the dialog to enforce the max-h constraint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Matt Kane <mkane@cloudflare.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

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

Closed

16 tasks

BenjaminPrice suggested changes Apr 8, 2026

View reviewed changes

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

4c907ec

ascorbic merged commit 3b6b75b into emdash-cms:main Apr 11, 2026
24 of 25 checks passed

This was referenced Apr 11, 2026

ci: release #396

Closed

ci: release #486

Merged

Yusaku01 mentioned this pull request Apr 15, 2026

fix(cloudflare): prevent playground toolbar overflow on mobile #569

Merged

18 tasks

Navigation Menu

Uh oh!

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

fix(admin): prevent dialogs from overflowing viewport on mobile#99
ascorbic merged 6 commits into
emdash-cms:mainfrom
all3f0r1:fix/mobile-dialog-overflow

all3f0r1 commented Apr 2, 2026

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 5, 2026

BenjaminPrice commented Apr 6, 2026

all3f0r1 commented Apr 6, 2026 •

edited

Loading

github-actions Bot commented Apr 7, 2026

BenjaminPrice left a comment

all3f0r1 commented Apr 10, 2026

Uh oh!

Labels

3 participants

Uh oh!

Conversation

all3f0r1 commented Apr 2, 2026

Summary

Test plan

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

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

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!

all3f0r1 commented Apr 5, 2026

BenjaminPrice commented Apr 6, 2026

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

Uh oh!

github-actions Bot commented Apr 7, 2026

Overlapping PRs

BenjaminPrice left a comment

Choose a reason for hiding this comment

all3f0r1 commented Apr 10, 2026

Uh oh!

Labels

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