updated according to rmisio's comments

Author: ameliagoodman

css/obBase.css

@@ -6402,11 +6402,16 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 }
 
 
-.js-connectedPeers {
-  line-height: 20px;
+.peersList {
   margin-top: 10px;
   display: block;
   color: #9999A0;
   max-height: 200px;
-  overflow: scroll;
+  overflow: auto;
+
+}
+
+.peersList>ul{
+  list-style-type: none;
+  padding-left: 0;
 }

js/templates/settings.html

@@ -1284,7 +1284,7 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
                     </div>
                   </div>
                   <div class="flexRow">
-                    <div style="white-space: pre;"><span class="js-connectedPeers"></span></div>
+                    <div class="peersList js-connectedPeers"></div>
                   </div>
                 </div>
               </div>

js/views/settingsVw.js

@@ -239,19 +239,18 @@ module.exports = pageVw.extend({
         placeholder_text_multiple: window.polyglot.t('chosenJS.placeHolderTextMultiple')
       });
 
-      var connectedPeers = "";
+      var connectedPeers = "<ul>";
       $.ajax({
-        url: self.serverUrl+ "routing_table",
+        url: self.serverUrl + "routing_table",
         success: function(data){
-          self.$el.find('span.js-numConnectedPeers').text(data.length);
+          self.$('.js-numConnectedPeers').html("<p>" + data.length + "</p>");
           data.forEach(function (peer) {
-            connectedPeers += (peer['ip'] + ":" + peer['port'] + "\n");
-          })
-          self.$el.find('span.js-connectedPeers').text(connectedPeers);
-          self.$el.find('.js-connectedPeers').hide();
+            connectedPeers += `<li><a href="#userPage/${peer.guid}">${peer.ip}:${peer.port}</a></li>`;
+          });
+          self.$('.js-connectedPeers').html(connectedPeers + "</ul>").hide();
         },
         error: function(){
-          self.$el.find('.js-numConnectedPeers').text(window.polyglot.t('errorMessages.peersFail'));
+          self.$('.js-numConnectedPeers').text(window.polyglot.t('errorMessages.peersFail'));
         }
       });