         else if not @props.is_next_sender
             borderRadius = '5px 5px 10px 10px'
 
-        mesg_style =
-            paddingRight: "3px"
-            paddingLeft: "3px"
-            width: "100%"
-
-        <Col key={1} xs={11} style={mesg_style}>
+        message_style =
+            background    : color
+            wordWrap      : "break-word"
+            marginBottom  : "3px"
+            borderRadius  : borderRadius
+
+        <Col key={1} xs={11} style={width: "100%"}>
             {show_user_name(@props.sender_name) if not @props.is_prev_sender and not sender_is_viewer(@props.account_id, @props.message)}
-            <Panel style={background:color, wordWrap:"break-word", marginBottom: "3px", borderRadius: borderRadius}>
-                <ListGroup fill>
-                    <ListGroupItem onDoubleClick={@edit_message if not @props.message.get("payload")} style={background:color, fontSize: font_size, borderRadius: borderRadius, paddingBottom:'20px'}>
-                        {render_markdown(value, @props.project_id, @props.file_path) if not is_editing(@props.message, @props.account_id)}
-                        {@render_input() if is_editing(@props.message, @props.account_id)}
-                        {@editing_status() if @props.message.get('history').size > 1 or  @props.message.get('editing').size > 0}
-                        {get_timeago(@props.message)}
-                        {@show_history() if not @state.show_history and @props.message.get('history').size > 1}
-                        {@hide_history() if @state.show_history and @props.message.get('history').size > 1}
-                    </ListGroupItem>
-                    <div></div>  {#This div tag fixes a weird bug where <li> tags would be rendered below the <ListGroupItem>}
-                </ListGroup>
-            </Panel>
+            <Well style={message_style} bsSize="small" onDoubleClick = {@edit_message}>
+                {get_timeago(@props.message)}
+                {render_markdown(value, @props.project_id, @props.file_path) if not is_editing(@props.message, @props.account_id)}
+                {@render_input() if is_editing(@props.message, @props.account_id)}
+                {@editing_status() if @props.message.get('history').size > 1 or  @props.message.get('editing').size > 0}
+                {@show_history() if not @state.show_history and @props.message.get('history').size > 1}
+                {@hide_history() if @state.show_history and @props.message.get('history').size > 1}
+            </Well>
             {render_history_title(color, font_size) if @state.show_history}
             {render_history(color, font_size, @props.history, @props.history_author, @props.history_date, @props.user_map) if @state.show_history}
             {render_history_footer(color, font_size) if @state.show_history}

        if not is_editing(@props.message, @props.account_id) and other_editors.size == 0 and newest_content(@props.message).trim() != ''
            edit = "Last edit "
            name = " by #{@props.editor_name}"
            <div className="small" style={color:color}>
                {edit}
                <TimeAgo date={new Date(@props.message.get('history').peek()?.get('date'))} />
                {name}
            </div>
        else
            <div className="small" style={color:color}>
                {text}
            </div>

    edit_message: ->
        @props.actions.set_editing(@props.message, true)

        <div>
            <Row>
                <Col md={3} style={padding:'0px 2px 0px 2px'}>
                    <Well style={side_chat_log_style} ref='log_container' onScroll={@on_scroll} >
                        <ChatLog
                            messages     = {@props.messages}
                            account_id   = {@props.account_id}
