fix(ui): Unscrollable error message when saving YAML (#4152)

[rbreeze]

Closes #4152

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Optional. My organization is added to USERS.md.
• I've signed the CLA and my build is green (troubleshooting builds).

[codecov-commenter]

Codecov Report

Merging #4195 (da0218a) into master (1533698) will decrease coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #4195      +/-   ##
==========================================
- Coverage   45.73%   45.71%   -0.02%     
==========================================
  Files         220      220              
  Lines       26006    26006              
==========================================
- Hits        11893    11888       -5     
- Misses      12456    12460       +4     
- Partials     1657     1658       +1     

Impacted Files	Coverage Δ
applicationset/services/scm_provider/github.go	75.29% <0.00%> (-5.89%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1533698...da0218a. Read the comment docs.

[RichiCoder1]

Considering it's possible that this error could contain actionable or verbose info, would it be possible to move this information out of a notification and put it inline? Maybe in a collapsable, with the notification just being a more present indicator that something failed and link to the div containing error information

[rbreeze]

@RichiCoder1 This issue made me think of this as well. I think some of the error messaging could benefit from a better design.

[RichiCoder1]

@rbreeze Currently spinning up a local dev env (and attempting to recruit my UX Designer BF) so I can assist with that. I think for this specifically there's a easy fix, I'll see if I can throw together an example or design.

[jsoref]

rubber stamp 💮

[crenshaw-dev]

@rbreeze can you fix DCO on this?

[alexmt]

Can you please attach a screenshot?

[pasha-codefresh]

After fix :

Before:

And not scroll

Actually i like this improvement, but also would be nice apply it to all error notifications, maybe wrap in some component

[pasha-codefresh]

wdyt @alexmt @crenshaw-dev , for me it looks good

[crenshaw-dev]

lgtm!