[Single file editor] Refine border radius on editor

Problem to solve

This issue represents a finding from our work to audit features belonging to groupsource code. See the analysis in Figma for more information. See the overview video for guidance on how to review this analysis.

Finding purple #1

Screenshot

Proposal

At minimum:

• Refine border radius on editor so that all corners are rounded and respected by nested content.
• Add space between tabs and tab content.
• Additional notes and guidance to resolve this finding:
  • Should the tabs have a space between them and the editor? Currently the border radius right up against the tabs is odd and could benefit from being offset.
  • The inner element appears to not respect the border radius (both sides).

Proposed update:

• Follow a pattern similar to the comment editor where there are no tabs and the ability to preview is inline with the editor controls.
• When previewing, the control would change to 'Continue editing'.

Before	After