Fix Single-File-Editor-Layout breaking when branch name is too long

Closes #37435 (closed)

What does this MR do?

As described in this issue #37435 (closed) long branch names break the layout by stacking dropdowns on top of each other. This was caused by a display: inline-block attribute that breaks the flex behaviour and ignored the flex direction of row. Alongside I adjusted spacing to be identical across the board so boxes don't stick together.

Screenshots

Chrome, looks identical in Firefox and Safari

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

• Tested in all supported browsers