<p dir="auto">Using <code class="notranslate">.table-reponsive</code> only works on the smallest screen size.</p>
<p dir="auto">Solution 1: Use <code class="notranslate">@grid-float-breakpoint</code> so it becomes responsive when the navbar does (currently what we do in projects)<br>
Solution 2: Use another variable that defaults to <code class="notranslate">@screen-sm-max</code> that can be overwritten in another less file</p>
<p dir="auto">I have a panel with a table inside and the table has a few columns making it rather wide. If you view the panel table on a mobile device the table is wider than the panel making it look bad.</p>
<p dir="auto">This only occurs on tables that are quite wide. I've tried using table-responsive and the issue still occurs. This occurs when the word is too long to \n to the next line. Simple fix would be to just make the panel width move with the table width.</p>
<p dir="auto">Tested on Chrome and Firefox for Mac with the latest versions.</p>
<p dir="auto"><a href="http://jsbin.com/bixetifi/1" rel="nofollow">http://jsbin.com/bixetifi/1</a></p>
<p dir="auto">Image:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3672996/2541520/e04375ca-b5dd-11e3-8491-cdd0a3d835c7.png"><img src="https://cloud.githubusercontent.com/assets/3672996/2541520/e04375ca-b5dd-11e3-8491-cdd0a3d835c7.png" alt="panel-table issue" style="max-width: 100%;"></a></p>