<li> avec background-color pour un t'chat

Bonjour,

Voila je rencontre un petit problème avec mon code.
Je dois surement utiliser une mauvaise façon avec mon HTML et mon CSS.
Je fais un t'chat où 2 utilisateurs communiquent.
Les messages de l'uns sont à droite, ce de l'autre, à gauche. Chacun d'une couleur différente.
J'ai mis un background-color sur mon texte, et y ait mit du padding, mais ça se découpe sur l'extrémité gauche ou droite :/

Ce que je fais

<div class="panel-body u-chat-messages" scroll-glue/>
                        <ul class="media-list" scroll-glue/>
                            <span ng-repeat="dialogue in vm.dialogues" class="animated fadeIn">
                                <li ng-if="vm.user.id == dialogue.author_id" class="media u-message">
                                    <span class="media-body">
                                        <p class="text-right">
                                            <span class="u-right-message">
                                                {{ dialogue.message }}
                                            </span>
                                        </p>
                                    </span>
                                </li>
                                <li ng-if="vm.user.id != dialogue.author_id" class="media u-message">
                                    <span class="media-body">
                                        <p>
                                            <span class="u-left-message">
                                                {{ dialogue.message }}
                                            </span>
                                        </p>
                                    </span>
                                </li>

                            </span>
                        </ul>
                    </div>

.u-chat-messages {
  height: 500px;
  overflow-y: scroll;
}

.u-chat-messages li {
  border-radius: 0px;
}

.u-chat-messages .u-message {
   margin: 5px 10px 0px 10px;
   border-radius: 5px;
 }

.u-chat-messages .u-message p{
  color: white;
}

.u-chat-messages .u-message .u-left-message {
  background-color: $u-blue;
  padding: 4px 32px 13px 8px;
}

.u-chat-messages .u-message .u-right-message {
  background-color: $u-orange;
  padding: 5px 10px 13px 8px;
}

http://hpics.li/b42ee36

Ce que j'obtiens

http://hpics.li/6fa07bf