Make torrent peers table scrollable horizontally

src/webui/www/public/properties_content.html

@@ -65,13 +65,21 @@
 
 <div id="prop_peers" class="invisible">
     <div id="peers">
-        <table class="dynamicTable" style="width: 100%">
-            <thead>
-                <tr id="torrentPeersTableHeader" class="dynamicTableHeader">
-                </tr>
-            </thead>
-            <tbody id="torrentPeersTable"></tbody>
-        </table>
+        <div id="torrentPeersTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
+            <table class="dynamicTable" style="position:relative;">
+                <thead>
+                    <tr class="dynamicTableHeader"></tr>
+                </thead>
+            </table>
+        </div>
+        <div id="torrentPeersTableDiv" class="dynamicTableDiv">
+            <table class="dynamicTable">
+                <thead>
+                    <tr class="dynamicTableHeader"></tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
     </div>
 </div>
 
@@ -106,6 +114,6 @@
 </div>
 
 <script type="text/javascript">
-    //torrentPeersTable.setup('torrentPeersTable', 'torrentPeersTableHeader', null);
+    torrentPeersTable.setup('torrentPeersTableDiv', 'torrentPeersTableFixedHeaderDiv', null);
     $(getLocalStorageItem('selected_tab', 'PropGeneralLink')).click();
 </script>

src/webui/www/public/scripts/dynamicTable.js

@@ -811,14 +811,14 @@ var TorrentPeersTable = new Class({
             this.newColumn('country', 'width: 4px', '');
             this.newColumn('ip', 'width: 80px', 'QBT_TR(IP)QBT_TR');
             this.newColumn('port', 'width: 35px', 'QBT_TR(Port)QBT_TR');
-            this.newColumn('client', 'width: 110px', 'QBT_TR(Client)QBT_TR');
-            this.newColumn('progress', 'width: 30px', 'QBT_TR(Progress)QBT_TR');
-            this.newColumn('dl_speed', 'width: 30px', 'QBT_TR(Down Speed)QBT_TR');
-            this.newColumn('up_speed', 'width: 30px', 'QBT_TR(Up Speed)QBT_TR');
-            this.newColumn('downloaded', 'width: 30px', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]');
-            this.newColumn('uploaded', 'width: 30px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
-            this.newColumn('connection', 'width: 30px', 'QBT_TR(Connection)QBT_TR');
-            this.newColumn('flags', 'width: 30px', 'QBT_TR(Flags)QBT_TR');
+            this.newColumn('client', 'width: 140px', 'QBT_TR(Client)QBT_TR');
+            this.newColumn('progress', 'width: 50px', 'QBT_TR(Progress)QBT_TR');
+            this.newColumn('dl_speed', 'width: 50px', 'QBT_TR(Down Speed)QBT_TR');
+            this.newColumn('up_speed', 'width: 50px', 'QBT_TR(Up Speed)QBT_TR');
+            this.newColumn('downloaded', 'width: 50px', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=PeerListWidget]');
+            this.newColumn('uploaded', 'width: 50px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
+            this.newColumn('connection', 'width: 50px', 'QBT_TR(Connection)QBT_TR');
+            this.newColumn('flags', 'width: 50px', 'QBT_TR(Flags)QBT_TR');
             this.newColumn('relevance', 'width: 30px', 'QBT_TR(Relevance)QBT_TR');
 
             this.columns['country'].dataProperties.push('country_code');