Bootstrap conflict with page schema interface

Had some problems with the page schema management interface where the ‘Remove’ function would be clicked, but wouldn’t actually remove a schema setting. Visibly, the interface was getting pushed to be 3 lines as well.

It was the use of the ‘row’ class in the interface interacting with bootstrap’s “row>*” rule, which was forcing the content of the schema interface to 100% width.

Here’s the styles I added to remove the offending Bootstrap styles from being applied to the schema management interface:

.rank-math-schema-item.row {
margin-left: 0 !important; //Removes -15px left margin from .row
}

.rank-math-schema-item.row > .rank-math-tooltip,
.rank-math-schema-item.row > .rank-math-schema-name,
.rank-math-schema-item.row > .rank-math-schema-item-actions {
width: unset !important; //Removes 100% width from .row>*
max-width: unset !important; //Removes max width from .row>*
padding-right: unset !important; //Removes gap based padding from .row>*
padding-left: unset !important; //Removes gap based padding from .row>*
}