DFW editor area is 12px narrower than theme content width

[helenyhou]

In the full screen editor, the default width ends up being 12px narrower than the theme content width. There is an inline style (JS-produced?) that is the content width plus 10px, but then there is padding of 10px on each side plus a 1px border on #wp-fullscreen-container. Thus the editor area is actually 12px too narrow.

I reproduced this using Twenty Eleven, Twenty Ten, and a custom theme. It's not always noticeable, but there is the occasional discrepancy in line breaks.

Nice catch and thanks for verifying it with other themes. Good bug report.

I was wrong about it being a JS-produced inline style, but I think this should do it.

While working on DFW I actually looked through a few themes and compared the width of the content (text) on the front end to the reported theme width. All had a bit of padding/margin so the actual width is few pixels smaller. This is reflected in DFW.

@helenyhou could you measure the actual content width on the site and compare that to the DFW width.

Sure - in Twenty Eleven, the content area is 584px wide at the largest, which is reflected in the regular visual editor. However, when in DFW, the content area is 572px instead. I checked this in Firebug - will attach a screenshot of a particularly noticeable example (ignore the content!). As previously stated, I noticed the same thing in Twenty Ten (628 instead of 640) and a custom theme (698 instead of 710).

I first noticed this when what should have just been a full-width image caused a horizontal scrollbar. Seems like it'd be better for DFW to be a little wider than needed as opposed to narrower, since the editor style could further constrain it horizontally, but that is my very very humble opinion.

In [18666]:

Make DFW content width match exactly the reported width from the theme, props helenyhou, fixes #18138