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

Actually, there is an undocumented setting in Visual Studio Code that will do exactly what you want. It's called "editor.lineDecorationsWidth", and although you will get some kind of warning Unknown setting parameters or underline squiggly, it WILL work.

This is the config for minimum possible space taken by line numbers (and keeping said line numbers, of course):

"editor.lineDecorationsWidth": 0,
"editor.glyphMargin": false,
"editor.folding": false,

source: https://github.com/Microsoft/vscode/issues/48791

[EDIT MAY 2020] The name of the undocumented setting has apparently been changed to editor.lineDecorationsWidth

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;"
}

If you create a font specifically for it I suspect that either filling the font bounds more and then setting it as the pref font, then adjusting zoom in/out. Depending on the graphics output preprocessing sometimes that scales the display that vsCode is rendering from its software. If it is in fact the case that maybe you're zoomed in too much to a small font, it might look different for you than anyone else. It may help to change try installing vscode in a vm to see if defaults look the same. Maybe it's a setting or extension causing a graphical artifact on your machine.

[Just in case people get here searching for how to change the glyph margin I'll note this coming "feature".]

A setting is being added to expand! the glyphMargin - that portion to the left of the line numbers where the breakpoint dots go for instance.

glyphMarginRightPadding

It is in v1.61 Insiders now and should be released to Stable early October 2021. But the default value 0 is the current width - you can only expand it with positive numbers unfortunately.