[anurag2787]

Description

Added the tutorial-error-explained template to show an error message

Closes #283

How I Tested This

Ran npm run check and npm run test

AI Assistance

ChatGPT was used to help with the implementation and tests

Type of Change

• Bug fix
• New template
• New feature
• Documentation
• Tests
• Refactoring
• Performance improvement
• Other (describe below)

Screenshots

Checklist

• This PR targets dev
• I was assigned the linked issue
• npm run check passes
• npm run test passes
• For a bug fix: the new test fails without my change
• Tested locally with npm run dev
• Screenshots included for visual changes
• New templates follow the Template Guidelines

[anurag2787]

Hi @anurag629 could you please review and let me know if any changes required
Thanks!

[anurag629]

Thanks @anurag2787, this is close. Check, all 1429 tests and the build pass on top of dev, and the card looks right with the defaults, on a white background with a pale accent, with a long error message and with blank fields.

One thing: when the meaning or the fix runs to two lines, its label lines up with the last line instead of the first. With a meaning like "You called .map() on a value that is still undefined, usually because the data has not loaded yet", MEANING sits next to "has not loaded yet". The two rows use alignItems: 'baseline' (lines 99 and 142), and in the rendered card that puts the label next to the last line. alignItems: 'flex-start' with a few pixels of top margin on the label would keep it next to the first line. Could you change that?

[anurag2787]

Hi @anurag629 i have updated PR could you please re review
Thanks!

[anurag629]

Thanks @anurag2787, that fixes it. Check, all 1443 tests and the build pass on top of dev, and with a two-line meaning and fix the labels now sit next to the first line.