docs(kanvas): refresh the validation screenshots to current chrome

[hiyach28]

Fixes #1268

Both figures on kanvas/tasks/designs/validating-designs were captured in the older light theme and no longer match what Kanvas shows. Replaced with fresh captures of the current Validate design modal, cropped to the modal edges.

Figure	Before	After
successful-validation.png	light theme, 672x251	current modal, 1054x452, reporting 1 component and 6 annotations with 0 errors
validation-error.png	light theme, 903x638	current modal, 1054x659, a failing component expanded to show its three field-level messages

Filenames are unchanged, so no references move.

Text change

The "Missing Required Field" example named the exact field the old screenshot happened to show (.spec.template.spec.containers.0.env.0). The new capture shows a different component, so the sentence now describes that one, and mentions that a component's row has to be expanded before its messages appear, which the modal does not do by default.

Notes

• Captures are from an anonymous session, consistent with the rest of the recent Kanvas screenshots.
• Related: docs(kanvas): add Sprint A screenshots to screenshot-blind pages #1245 adds two more validation figures to this same page. Once this lands, those overlap with the refreshed ones, which is worth a look before merging that PR.

[coderabbitai]

Warning

Review limit reached

Next included review available in 14 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 7dc0be48-d15f-4e19-8eaa-b74941fd662e

📥 Commits

Reviewing files that changed from the base of the PR and between 71014c9 and 0ec5f43.

⛔ Files ignored due to path filters (2)

• content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/successful-validation.png is excluded by !**/*.png
• content/en/kanvas/tasks/designs/validating-designs/images/validating-designs/validation-error.png is excluded by !**/*.png

📒 Files selected for processing (1)

• content/en/kanvas/tasks/designs/validating-designs/index.md

---

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.}

[github-actions]

Preview deployment for PR #1256 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[jijillery]

Muse Code review: screenshot refresh is genuine and still needed. Verified on master vs this branch:

• content/en/kanvas/tasks/designs/validating-designs/index.md:56 on master still has the old sentence naming .spec.template.spec.containers.0.env.0, and the master PNGs are still the old captures (672x251, 903x638 via file). The branch replacements are 1054x452 / 1054x659, matching the "After" column in the PR body exactly. Filenames are unchanged, so no reference updates are needed, and the existing alt text (Successful Validation / Validation Error) still fits.
• Checks are green where it matters (build, DCO, triage pass) and GitHub reports the PR mergeable / CLEAN.

Findings (all non-blocking):

1. Branch predates the docs(kanvas): add Sprint A screenshots to screenshot-blind pages #1245 merge. docs(kanvas): add Sprint A screenshots to screenshot-blind pages #1245 (merged Sep 19) added two figures to this same page that this branch does not contain (now on master at index.md:34-37 and index.md:43-46: the Actions-menu figure and the "Validation result toasts" figure). The merge itself is textually clean, but the author's "worth a look" note now applies to this PR rather than docs(kanvas): add Sprint A screenshots to screenshot-blind pages #1245: after merge, the success-modal section will show the refreshed modal directly above the docs(kanvas): add Sprint A screenshots to screenshot-blind pages #1245 toasts figure whose caption says "Prefer the modal above ... when it matches your build." Please update the branch and check the combined rendered page for flow/duplication before merging. (Note the PR preview was auto-pruned, so a fresh push would also regenerate the preview for that visual check.)

2. Nit: mixed inline-code style in the new sentence — ".spec" uses double quotes while `instanceCount` uses backticks. Suggest backticks for both:

**Missing Required Field:** This happens when a required field is not provided. For example, in the image below, the component is missing three required properties under `.spec`, and the first error names `instanceCount`. Click the component's row in the modal to expand its errors.

3. Could not visually verify the new capture contents (only dimensions/byte sizes via API), so please confirm the new validation-error.png indeed shows three required-property errors with instanceCount first, matching the rewritten sentence. The PR body description ("a failing component expanded to show its three field-level messages") is consistent with it.

Also verified no conflict with the troubleshooting steps just below (index.md:61-66): "Click the component's row in the modal to expand its errors" complements step 1 ("Click on the error on the modal" to open the config tab) rather than contradicting it — expand-then-click reads correctly against the modal behavior described.