Fix scrim styles for code blocks in Duo chat
What does this MR do and why?
Ensure the background gradient for the top and bottom scrims on scrollable code blocks match the user's code highlighting theme.
Also fixes a positioning problem with scrims caused by markdown styles.
References
Screenshots or screen recordings
| Code theme | GitLab dark mode | Before | After |
|---|---|---|---|
| code light mode | light | ||
| code dark mode | light | ||
| code light theme | dark | ||
| code dark theme | dark | ||
| solarized light | light | ||
| solarized light | dark | ||
| solarized dark | light | ||
| solarized dark | dark | ||
| monokai | light | ||
| monokai | dark | ||
| none | light | ||
| none | dark |
How to set up and validate locally
- Check out this branch
- in the GDK, ask Duo to generate a code snippet for you that is longer than at least 20 lines (just to make sure it will be scrollable)
- observe the scrollable code block in Duo's response in all of the gitlab color theme + gitlab code theme combinations. You will see that the scrim coloring at the bottom and top always matches the code block's background. and the positioning of the top and bottom scrims is properly absolute.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #548836 (closed)
Edited by Chad Lavimoniere