Question / Help chat is squished, not sure if it is Linux Browser Source or CSS

[buckettraveler]

I'm trying to add a chat window to my stream and the Linux Browser source 'squishes' it. What users type word-wraps but when the message is longer it cuts the user name out. I'm just using the standard chatbot on stream labs and then copying that into the browser source and it looks like this:

My name is buckettraveler but you can see it cuts my name out. I left the selection box so you can see I can't stretch it out to make it bigger. I only have so much space on my stream, have to stream sub-720p because of my internet connection, so could I change the CSS so the nick name is word-wrapped also or maybe gets it's own line? I have no idea how to code CSS so I thought I'd ask here. Here is the code streamlabs spits out:

@import url(https://fonts.googleapis.com/css?family=Roboto:700);

* {
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: 'Roboto';
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}

#log>div {
animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}

.colon {
display: none;
}

#log {
display: table;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
table-layout: fixed;
}

#log>div {
display: table-row;
}

#log>div.deleted {
visibility: hidden;
}

#log .emote {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0.4em 0.2em;
position: relative;
}

#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
}

#log .message,#log .meta {
vertical-align: top;
display: table-cell;
padding-bottom: 0.1em;
}

#log .meta {
width: 35%;
text-align: right;
padding-right: 0.5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

#log .message {
word-wrap: break-word;
width: 65%;
}

.badge {
display: inline-block;
margin-right: 0.2em;
position: relative;
height: 1em;
vertical-align: middle;
top: -0.1em;
}

.name {
margin-left: 0.2em;
}

Is there anything on that I could change to make it so the names are't cut off?