how do we update sp-bootstrap.scss (CSS) file to remove reference field workaround?

[Randall Arnold]

After we moved to a service portal, we noticed that the data picker for reference fields was getting truncated.  After a bit of search, I found the cause here: https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0832673.  Apparently someone implemented a CSS formatting workaround for the issue described, and now it needs to be removed.

Debugging a catalog page led me to find the offending code in a file called sp-bootstrap.scss:

.field-has-reference .reference {
	display: table-cell;
	width: 100%;
	max-width: 0;
}

The KB says I need to remove the max-width setting.  Problem is, I can display the sp-bootstrap.scss file via url (https://<instance>.service-now.com/styles/scss/sp-bootstrap.scss), but for the life of me I can't find where in ServiceNow we're supposed to edit it...

EDIT: sp-bootstrap.scss doesn't look like the actual problem.  See follow-up posts.

[Justin77 · Accepted solution]

Like a lot of the core SNOW platform, that file isn't available for editing.  Your best bet is to override that property via the CSS on either the portal record, the theme record, or the widget record.

[Randall Arnold]

Thanks.  Do you know what I should set max-width to?  Or would omitting that property do the trick?

[Justin77]

max-width: unset;

or
max-width: none;

should do the trick.

Always use the docs as your guide: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width