feat(docs-infra): add Angie to the embedded editor error state

When the embedded editor fails to boot the preview sandbox, the error
card showed only a text message. Add the press-kit Error pose above the
message so the failure state matches the mascot treatment already used
for the loading steps and the empty search states.

The card is also centered in the preview pane (previously pinned 5% from
the top) so the pose and message read as one block. Behaviour is
unchanged; this is presentation only.

(cherry picked from commit 72cc548d34)
This commit is contained in:
Kam
2026-07-10 11:38:36 +03:00
committed by Matthew Beck
parent c42903628e
commit e6272f2931
3 changed files with 15 additions and 1 deletions
@@ -1,4 +1,10 @@
<div class="adev-preview-error docs-light-mode docs-mini-scroll-track">
<img
class="adev-preview-error-angie"
src="assets/images/angie/error.svg"
alt=""
aria-hidden="true"
/>
@if (error()?.type === ErrorType.UNSUPPORTED_BROWSER_ENVIRONMENT) {
@if (isIos) {
<p>Open angular.dev on desktop to code in your browser.</p>
@@ -1,5 +1,12 @@
:host {
margin: 5% auto;
margin: auto;
}
.adev-preview-error-angie {
display: block;
width: 140px;
height: auto;
margin: 0 auto;
}
.adev-preview-error {
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 21 KiB