 
     avatar_column: ->
         account = @props.user_map?.get(@props.message.get('sender_id'))?.toJS()
-        if account? and @props.show_avatar # TODO: do something better when we don't know the user (or when sender account_id is bogus)
-            <Col key={0} xs={1} style={display:"inline-block", verticalAlign:"middle", marginTop:'15px'}>
-                <Avatar account={account} />
-            </Col>
+        if @props.is_prev_sender
+            margin_top = '12px'
         else
-            <Col key={0} xs={1} style={{display:"inline-block", verticalAlign:"middle"}}>
-            </Col>
+            margin_top = '23px'
+
+        if @sender_is_viewer()
+            float_avatar = 'right'
+
+        # TODO: do something better when we don't know the user (or when sender account_id is bogus)
+        <Col key={0} xs={1} style={display:"inline-block", verticalAlign:"middle", marginTop:margin_top}>
+            <div style={float:float_avatar}>
+                {<Avatar account={account} /> if account? and @props.show_avatar }
+            </div>
+        </Col>
 
     content_column: ->
         value = @props.message.get('payload')?.get('content') ? ''
+
         if @sender_is_viewer()
             color = '#f5f5f5'
         else

        marginTop    : "5px"

    scroll_to_bottom: ->
        if not @refs.log_container?
            @_scrolled = false
            return
        node = ReactDOM.findDOMNode(@refs.log_container)
        node.scrollTop = node.scrollHeight
        @props.redux.getActions(@props.name).save_position(node.scrollTop)
        @_ignore_next_scroll = true
        @_scrolled = false

    scroll_to_position: ->
        if not @refs.log_container?
            return
        @_scrolled = true
        node = ReactDOM.findDOMNode(@refs.log_container)
        node.scrollTop = @props.position

    on_scroll: (e) ->
        if @_ignore_next_scroll
            @_ignore_next_scroll = false
            return
        @_scrolled = true
        node = ReactDOM.findDOMNode(@refs.log_container)
        @props.redux.getActions(@props.name).save_position(node.scrollTop)

            marginBottom = "20px" # the default value actually..
        else
            marginBottom = "5px"

        if not @props.is_prev_sender and @sender_is_viewer()
            marginTop = "17px"

        <Col key={1} xs={8}>
            {@show_user_name() if not @props.is_prev_sender and not @sender_is_viewer()}
            <Panel style={wordWrap:"break-word", marginBottom: marginBottom, marginTop: marginTop}>
                <ListGroup fill>
                    <ListGroupItem style={background:color, fontSize: font_size}>
                        <Markdown value={value}
                                  project_id={@props.project_id}
                                  file_path={@props.file_path} />
                    </ListGroupItem>
                    {@get_timeago() if @props.show_avatar}
                </ListGroup>
            </Panel>
        </Col>

    blank_column:  ->
        <Col key={2} xs={3}></Col>

    render: ->
        cols = [@avatar_column(), @content_column(), @blank_column()]
