Using Bootstrap's responsive design, I am facing an issue with a bubble that needs to fit fluidly but sticks out when the width is narrow. How can I address this problem so that it fits in any width?
Demo http://jsfiddle.net/SAKWb/
HTML
<div class="chat">
<table>
<tbody>
<tr>
<th>Body</th>
</tr>
<tr id="comment_617">
<td><div class="bubble me"><span class="text-error">01-10 03:29</span>：Person A<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
</div></td>
</tr>
<tr id="comment_615">
<td><div class="bubble me"><span class="text-error">01-10 03:25</span>：Person A<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
</div></td>
</tr>
</tbody>
<div>
CSS
.chat {
width: 100%;
min-width: 300px;
}
.bubble{
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
word-break: break-all;
}
.bubble::before {
background-color: #FFFFFF;
content: "\00a0";
display: block;
height: 16px;
position: absolute;
top: 11px;
transform: rotate( 29deg ) skew( -35deg );
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 29deg ) skew( -35deg );
width: 20px;
}
.me {
float: left;
margin: 5px 45px 5px 5px;
min-width: 250px;
width: 100%;
}
.me::before {
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
left: -9px;
}
.you {
float: left;
margin: 5px 10px 5px 5px;
min-width: 250px;
width: 100%;
}
.you::before {
box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
right: -9px;
}