Is there a way to make vscode line number field smaller width?

Question

The vertical column that contains the code line number is VSC is too wide. Is there a way to narrow it down?

Answer 1

If you use the CustomizeUI plugin, you can edit the CSS to modify the width as follows... However, I notice one issue is that the click area of the folding arrows becomes a little misaligned (still usable, just a few pixels off). I'm not entirely sure how to fix it (didn't look hard enough possibly).

Here's some CSS for minifying the line number margin widths:

"customizeUI.stylesheet": {
    // Change width/appearance of line-number, breakpoints, code-folding arrows:
    ".monaco-editor .margin": "background: #111; width: 55px !important;",
    ".monaco-editor .glyph-margin": "width: 0px !important;",
    ".monaco-editor .margin-view-overlays": "width: 55px !important;",
    ".monaco-editor .margin-view-overlays .cgmr": "width: 0px !important; display: none;", // hide breakpoints (I don't use them) (not necessary if editor.glyphMargin = false)
    ".monaco-editor .cldr.codicon.codicon-folding-expanded, .monaco-editor .cldr.codicon.codicon-folding-collapsed": "left: 22px !important; width: 30px !important;",
    ".monaco-scrollable-element.editor-scrollable": "left: 50px !important;",
    ".monaco-editor .margin-view-overlays .line-numbers": "left: 3px !important;"
}