Special Error: Adjusting vertical alignment

[jleandroperez]

Asana Task/Github Issue:
https://app.asana.com/1/137249556945/project/1176956903599313/task/1217050650105173?focus=true

Description

In this PR we're updating the Special Error pages on macOS / Windows, so that they're centered at the 40% mark in the Screen.

This change is a design request, Figma designs can be found here.

Screenshots

Now	Before

Testing Steps

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

---

Note

Low Risk
CSS-only layout tweak on the special-error page for desktop platforms above a size threshold; no auth, data, or API changes.

Overview
Special Error vertical layout on macOS and Windows is updated to match design: on viewports at least 600×600, .main gets padding-bottom: 20vh so the error card’s midpoint sits around 40% of the screen instead of true center.

The rule is scoped to [data-platform-name="macos"] and [data-platform-name="windows"] so iOS and existing short-height breakpoints (e.g. max-height: 400px, iOS max-height: 700px) are unchanged.

^{Reviewed by Cursor Bugbot for commit b1e93b1. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Stale comment

Injected PR Evaluation: Web Compatibility & Security

Scope: 1 file changed — special-pages/pages/special-error/app/components/App.module.css only. No injected/ changes. This is a special-pages CSS layout tweak for desktop error-page vertical alignment; it does not run in third-party page contexts.

---

Web Compatibility Assessment

File	Lines	Severity	Finding
special-pages/.../App.module.css	19–26	info	CSS-only layout change in a browser-controlled special page. No browser API overrides, prototype patches, or third-party script interaction — injected web-compat categories do not apply.
special-pages/.../App.module.css	21–25	info	Change is scoped to macos and windows with @media (min-height: 600px) and (min-width: 600px). iOS retains existing rules (max-height: 700px); Android is excluded, consistent with other special-error styles that treat mobile platforms separately.
special-pages/.../App.module.css	23–24	info	padding-bottom: 20vh shifts flex-centered content upward. The existing @media (max-height: 400px) rule (align-items: flex-start) still applies for very short viewports. Viewports between 400–599px height on macOS/Windows keep default centering without the new offset — likely acceptable given the 600px guard, but worth a quick visual check on medium-height desktop windows.

No warnings or errors.

---

Security Assessment

File	Lines	Severity	Finding
(entire diff)	—	info	No changes to captured-globals.js, messaging transports, message bridge, postMessage, config gating, or DOM APIs. Static CSS with hardcoded values only — no page-derived data, no injection vectors.

No warnings, errors, or critical findings.

---

Risk Level

Low Risk — Single-file CSS-only change in special-pages/ with no injected code, API shims, or messaging/security-sensitive paths.

---

Recommendations

1. (info) Rebase or update macOS/Windows screenshot baselines in special-error-screenshots.spec.js if CI screenshot tests fail after merge.
2. (info) Manual QA on macOS and Windows at ≥600×600 and at short heights (<400px) to confirm the card stays fully visible when advanced info is expanded.
3. No injected-compat or security blockers identified.

  

_{Sent by Cursor Automation: Web compat and sec}

[github-actions]

[Beta] Generated file diff

Time updated: Wed, 05 Aug 2026 14:24:35 GMT

Apple

    - apple/pages/special-error/dist/index.css

• apple/pages/special-error/index.html

File has changed

Integration

    - integration/pages/special-error/dist/index.css

File has changed

Windows

    - windows/pages/special-error/dist/index.css

• windows/pages/special-error/index.html

File has changed

[cursor]

Injected PR Evaluation: Web Compatibility & Security

Scope (synchronize): 13 files changed — 1 CSS file + 12 macOS/Windows screenshot baselines. No injected/ changes. This remains a special-pages layout tweak for desktop error-page vertical alignment; it does not run in third-party page contexts.

Delta since prior assessment: Screenshot baselines in special-error-screenshots.spec.js-snapshots/ are now updated for macOS and Windows (malware/phishing/scam warnings and SSL expired-cert scenarios, including reduced-motion). This addresses the prior recommendation to rebase screenshot tests.

---

Web Compatibility Assessment

File	Lines	Severity	Finding
special-pages/.../App.module.css	19–26	info	CSS-only layout change in a browser-controlled special page. No browser API overrides, prototype patches, or third-party script interaction — injected web-compat categories do not apply.
special-pages/.../App.module.css	21–25	info	Change is scoped to macos and windows with @media (min-height: 600px) and (min-width: 600px). iOS retains existing rules (max-height: 700px); Android is excluded, consistent with other special-error styles that treat mobile platforms separately.
special-pages/.../App.module.css	23–24	info	padding-bottom: 20vh shifts flex-centered content upward. The existing @media (max-height: 400px) rule (align-items: flex-start) still applies for very short viewports. Viewports between 400–599px height on macOS/Windows keep default centering without the new offset — likely acceptable given the 600px guard, but worth a quick visual check on medium-height desktop windows.
special-error-screenshots.spec.js-snapshots/*.png	—	info	Baseline updates reflect the intentional layout shift. No runtime compat impact.

No warnings or errors.

---

Security Assessment

File	Lines	Severity	Finding
(entire diff)	—	info	No changes to captured-globals.js, messaging transports, message bridge, postMessage, config gating, or DOM APIs. Static CSS with hardcoded values only — no page-derived data, no injection vectors.

No warnings, errors, or critical findings.

---

Risk Level

Low Risk — CSS-only change in special-pages/ with updated screenshot baselines; no injected code, API shims, or messaging/security-sensitive paths.

---

Recommendations

1. (info, resolved) Screenshot baselines updated — CI screenshot tests should pass on macOS/Windows.
2. (info, open) Manual QA on macOS and Windows at ≥600×600 and at short heights (<400px) to confirm the card stays fully visible when advanced info is expanded.
3. No injected-compat or security blockers identified.

  

_{Sent by Cursor Automation: Web compat and sec}

Dismissing stale approval — new commits pushed, awaiting Cursor re-review.

[moon0326]

LGTM 🚀

[jleandroperez]

Thanks a lot, sir!!