🐛 Fixed mobile preview overflow

[troyciesco]

no ref

the class size-100 was calculating a fixed width and causing the mobile preview (theme, announcement bar, etc) to overflow the "phone" screen. Changing it to size-full fills the screen properly.

Before (dark mode so it's easier to see the overflow):

After:

[cursor]

Bugbot is not enabled for this team, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5d8f5d93-8ca5-4ce4-974b-582b429420d9

📥 Commits

Reviewing files that changed from the base of the PR and between e278ff7 and 35de6a1.

📒 Files selected for processing (1)

• apps/admin-x-design-system/src/global/chrome/mobile-chrome.tsx

---

Walkthrough

Changes

This change modifies the CSS class applied to the inner container div within the MobileChrome component, replacing size-100 with size-full. No changes were made to component props, structure, or exported/public entity declarations.

Cohort / File	Summary
MobileChrome sizing
apps/admin-x-design-system/src/global/chrome/mobile-chrome.tsx	Changed inner container div class from size-100 to size-full

Sequence Diagram(s)

Not applicable — this is a single-line CSS class change with no observable flow to diagram.

Related PRs: None identified.

Suggested labels: design-system, ui

Suggested reviewers: None identified.

Estimated code review effort: Low (1 line changed, single file, low complexity)

🐰 A tiny class, from hundred to full,
One div now stretches, taut as wool.
No logic bent, no props disturbed,
Just size-full where size-100 blurred.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing mobile preview overflow.
Description check	✅ Passed	The description directly explains the overflow issue and the size-100 to size-full fix.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-mobile-preview-overflow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit 35de6a1

Command	Status	Duration	Result
nx run-many --target=build --projects=tag:publi...	✅ Succeeded	<1s	View ↗
nx run-many -t test:unit -p @tryghost/admin-x-d...	✅ Succeeded	6m 40s	View ↗
nx run @tryghost/admin-x-settings:test:acceptance	✅ Succeeded	9m 43s	View ↗
nx run @tryghost/admin:build	✅ Succeeded	4m 23s	View ↗
nx run-many -t lint -p @tryghost/admin-x-design...	✅ Succeeded	1m	View ↗
nx run ghost-admin:test	✅ Succeeded	2m 58s	View ↗
nx run @tryghost/activitypub:test:acceptance	✅ Succeeded	59s	View ↗
nx run ghost:build:assets	✅ Succeeded	2s	View ↗
nx run ghost:build:tsc	✅ Succeeded	6s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-06 15:46:58 UTC