search

WordPress / better-code-editing

[✅ Merged into 4.9-alpha] Better Code Editing WordPress plugin
https://wordpress.org/plugins/better-code-editing/
38 stars 16 forks source link

Additional CSS line count should be narrower #83

Open melchoyce opened 7 years ago

melchoyce commented 7 years ago

Despite only having one digit per line, the line count is quite wide:

westonruter commented 7 years ago

@melchoyce the gutter width is to give room for the error/warning icons.

melchoyce commented 7 years ago

Does it need that much space? And are the theme/plugin editors different because the php files aren't being linted yet?

image

westonruter commented 7 years ago

@melchoyce yes, that's right. There isn't a linter for PHP yet (#48) so the gutter is not present.

melchoyce commented 7 years ago

Okay 👍

Any way we could still tighten up the space a bit?

westonruter commented 7 years ago

Probably, but it would require some CodeMirror research. Help wanted.

kenashworth commented 7 years ago

CodeMirror takes the number columns width right from the CSS, so adding .CodeMirror-linenumber { min-width: 1px; } would shrink it as much as is possible (without clipping the numbers). The column will grow with number of digits in the largest line number automatically.

(Additionally you can shave off a few more pixels with padding on that class. .CodeMirror-linenumber { min-width: 1px; padding: 0 1px; })

The biggest space is the 16px for the linting and hinting, which I haven't yet figured out how to shrink. Maybe there's a way to overlay the error icon onto the numbers? Worth looking into, or nah?