Apostrophe cms - rich text preview not working in admin view

Question

In a custom content type (employees) I have a body field.

In lib\modules\employees\index.js

addFields: [
   {
        name: 'body',
        label: 'Beskrivelse',
        type: 'area',
        options: {
            widgets: {
                'apostrophe-rich-text': {
                    toolbar: ['Bold', 'Italic', 'Link', 'Unlink']
                }
            }
        }
    }
]

And in lib\modules\employees-widgets\views\widget.html

{{ apos.singleton(piece, 'body', 'apostrophe-rich-text', {
    toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
    })
}} 

Editing directly on the page shows the rich text field with toolbar and preview. But in the admin view the toolbar shows, but the preview is not working at all. Look at the images linked bellow:

It looks like this when editing on the page

It looks like this in the admin view

Answer 1

Apostrophe's admin modal CSS is reset, so rich text areas in the modal do not reflect project level styles. This is in an attempt to keep project level styles from interfering with important Apostrophe UI.

You could always add those admin scopes to your project level CSS, just be aware of its reach.

Answer 2

If anyone should have the same question, Stuarts answer is correct (of course). Here is what I added in lib\modules\apostrophe-assets\public\css\site.less to make it work for me. You might want to add more options or adjust to taste :)

.apos-ui {
    .apos-rich-text {
        h1 {
            font-size: 2em;
        }
        h2 {
            font-size: 1.6em;
        }
        h3 {
            font-size: 1.3em;
        }
        h1,
        h2,
        h3 {
            margin: 1em 0;
            font-weight: bold;
        }
        p {
            margin-bottom: 1em;
        }
        a {
            color: darkblue;
        }

        strong,
        b {
            font-weight: bold;
        }
        i,
        em {
            font-style: italic;
        }
    }
}