Tables don't render properly in Firefox

[wryun]

Tables don't quite seem to fit inside their element in Firefox (Linux at least...), causing weird artifacts where it switches between presenting a scrollbar and some kind of right hand side shadow on every interaction. This is particularly annoying when editing a table, but is also an issue in RO mode.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://groklearning.getoutline.com/share/947bee24-0181-4d51-9338-0928459a5e73 in Firefox (tested 78 and 85)
2. Click anywhere in the table
3. Click anywhere in the table again

Expected behavior
Nothing happens.

Screenshots

Taking a screenshot of the scrollbar state is a bit more tricky (requires hovering). Hopefully this is sufficient.

Outline (please complete the following information):

• Install: getoutline.com
• Version: [commit sha if self hosted]

Desktop:

• OS: Linux
• Browser Firefox
• Version 78 and 85

[wryun]

Hmm, I guess I should have filed this in the editor repo. Sorry.

[tommoor]

It’s fine, either works 😌

…

On Sat, Jan 9, 2021 at 13:54 James Haggerty ***@***.***> wrote: Hmm, I guess I should have filed this in the editor repo. Sorry. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/outline/outline/issues/1792#issuecomment-757372896>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC474TK5OCDLEECRVU5IVTSZDGABANCNFSM4V33YPNQ> .

[rubenmoya]

Uhm, it looks like somewhere in the editor we're setting:

.hXduNr * {
    box-sizing: content-box;
}

Chaning the table one to border-box stops that behavior 🤷‍♂️