Long mutation titles cause timestamp to wrap and become hidden within list

[paulyoung5]

Version

5.1.1

Browser and OS info

Firefox 69 / macOS Catalina

Steps to reproduce

Demo

https://cdpn.io/paulyoung5/debug/GRRmEYm
(see code here: https://codepen.io/paulyoung5/pen/GRRmEYm)

General repro steps

• Open devtools at about 900px wide, navigate to Vue DevTools extension and then the Vuex tab
• Commit a mutation with a really long title
  • Note that this could be a namespaced mutation, e.g. onlineShop/shoppingCart/REMOVE_ITEM_FROM_CART
  • ..or simply be a long mutation title e.g. MY_REALLY_LONG_MUTATION_NAME_GOES HERE
• Observe that a new row has been created within the list of committed mutations

What is expected?

Long mutation titles or titles otherwise too long to display within the UI should be truncated with some ellipsis, to prevent wrapping and obscuring content.

Reference: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis

What is actually happening?

Mutation name forces timestamp to wrap onto a next line, obscuring the timestamp as a result