How to adjust default width for Name Column in Modern UI

This post is a contribution from Jing Wang, an engineer with the SharePoint Developer Support team

One SPO customer had a Document library, which showed Name (filename) column in the default view.

The filenames in the library are not very short generally, default display looks like :

A large part of the filenames was cut on the right side by default.

They wanted the column "Name" to have larger default width, so the filenames will show up nicely at the beginning.

We tried to adjust the width for the column using new Column Formatting capability, also SharePoint Framework extension (SPFx) Field Customizer, but none of the tries yielded good results.

Though SPFx Field Customizer does give us much room for customization, the Name field is a unique lookup field and it does not accept the SPFx Field Customizer

Thanks to Escalation Engineer, Westley Hall, we were able to identify a workaround to show the filename in multiple lines with Column Formatting:

{
   "debugMode": true,
   "elmType": "span",
   "txtContent": "@currentField",
   "style": {
      "width":"100%",
      "height": "80px",
      "overflow":"visible",
      "vertical-align": "top",
      "padding": "4px",
      "word-wrap": "break-word",
      "overflow-wrap": "break-word",
      "word-break": "break-all",
      "white-space":"normal"
    }
}

The result looks like this in UI. It shows the complete file name without trimming.