Code Editors: Minor style improvements

[melchoyce]

The code editors could use some minor design tweaks. See attached mockup, where I've...:

• Added a 1px solid #ddd background around the entire editor
• Increased the width of the the file contents to 100%
• Removed any margin-left on the file list
• Added a background (#f7f7f7, to match the line numbers background) behind the file list
• Also added a border-left of 1px solid #ddd to the file list
• Increased the padding inside the file list to 5px 5px 8px
• Made the current file styling full-width inside the file list
• Removed the border-bottom on the "Theme/Plugin Files" header

Anyone want to take a stab at patching this?

[melchoyce]

42214.diff​ is a first stab at making some design improvements.

It needs a review, and could still use some additional padding inside of #templateside. This is also ridiculously minor, but it'd be great to get the current file styling when the first file is selected to be flush with the top of the list, so there's no gap.

[helen]

In 41882:

Code Editors: Minor style improvements.

props melchoyce.
see #42214.

[helen]

The focus styling is not really awesome and this could use testing/tweaking on touch devices/small screens, so leaving this open for now.

[melchoyce]

Added some minor small-screen style improvements in 42214-mobile.diff​.

[helen]

Replying to melchoyce:

Added some minor small-screen style improvements in 42214-mobile.diff​.

👍

[melchoyce]

Referenced the ticket incorrectly (whoops) but just committed those styles: https://core.trac.wordpress.org/changeset/41999

Going to close this out for now. Any future enhancements can happen in new tickets.