         @props.account_id == @props.message.get('sender_id')
 
     get_timeago: ->
-        #if @sender_is_viewer()
-        #    pull = "pull-right small"
-        #else
-        #    pull = "pull-left small"
-        <div className="pull-right small" style={color:'#888', marginTop:'5px', width:'50%'}>
+        if @sender_is_viewer()
+            align = "right"
+        else
+            align = "center"
+        <div className="pull-right small" style={color:'#888', marginTop:'2px', marginBottom:'1px', marginRight:'16px', width:'100%', textAlign:align}>
             <TimeAgo date={new Date(@props.message.get('date'))} />
         </div>
 
     show_user_name: ->
-        <div className={"small"} style={color:'#888', marginBottom:'2px'}>
+        <div className={"small"} style={color:'#888', marginBottom:'1px', marginLeft:'16px'}>
             {@props.sender_name}
         </div>
 
     avatar_column: ->
         account = @props.user_map?.get(@props.message.get('sender_id'))?.toJS()
         if @props.is_prev_sender
-            margin_top = '12px'
+            margin_top = '5px'
         else
-            margin_top = '23px'
+            margin_top = '27px'
 
         if @sender_is_viewer()
-            float_avatar = 'right'
+            textAlign = 'left'
+            marginRight = '11px'
+        else
+            textAlign = 'right'
+            marginLeft = '11px'
 
         # 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}>
+        <Col key={0} xsHidden={true} sm={1} style={display:"inline-block", verticalAlign:"middle", marginTop:margin_top, marginLeft:marginLeft, marginRight:marginRight, width:'4%', textAlign:textAlign, padding:'0px'} >
+            <div>
                 {<Avatar account={account} /> if account? and @props.show_avatar }
             </div>
         </Col>

            e.preventDefault()
            mesg = @refs.input.getValue()
            # block sending empty messages
            if mesg.length? and mesg.length >= 1
                @props.redux.getActions(@props.name).send_chat(mesg)
                @clear_input()


                     project_id  = {@props.project_id}
                     file_path   = {@props.file_path}
                     font_size   = {@props.font_size}
                     is_prev_sender   = {is_prev_message_sender(i, sorted_dates, @props.messages)}
                     is_next_sender   = {is_next_message_sender(i, sorted_dates, @props.messages)}
                     show_avatar      = {not is_next_message_sender(i, sorted_dates, @props.messages)}
                     sender_name      = {sender_name}
                    />
        return v
