Adjust common.css

ui/common.css

@@ -154,42 +154,19 @@ body {
 }
 
 /* List */
-.lstcl1 {
+.lst-nostyle {
   list-style: none;
   list-style-position: inside;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  overflow: auto;
 }
 
-.lstcl1 > li {
+.hlst {
-  width: 33%;
+}
+
+.hlst > li {
   float: left;
-  white-space: nowrap;
-}
-
-.lstcl1 > li .lst-wrap {
-  padding: 10px;
-  margin: 10px;
-  background: #333;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  box-shadow: 2px 2px 0 0 #222;
-}
-
-.lstcl1 > li .lst-wrap:hover {
-  background: #3a3a3a;
-  box-shadow: 2px 2px 0 0 #222;
-}
-
-.lstcl1 > li .lst-wrap:active {
-  background: #333;
 }
 
 .lst1 {
-  list-style: none;
-  list-style-position: inside;
   margin: 0;
   padding: 0;
   width: 100%;
@@ -207,6 +184,38 @@ body {
   padding: 10px;
 }
 
+.hlst.lstcl1 {
+  list-style: none;
+  list-style-position: inside;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  overflow: auto;
+}
+
+.hlst.lstcl1 > li {
+  width: 33%;
+  white-space: nowrap;
+}
+
+.hlst.lstcl1 > li .lst-wrap {
+  padding: 10px;
+  margin: 10px;
+  background: #333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-shadow: 2px 2px 0 0 #222;
+}
+
+.hlst.lstcl1 > li .lst-wrap:hover {
+  background: #3a3a3a;
+  box-shadow: 2px 2px 0 0 #222;
+}
+
+.hlst.lstcl1 > li .lst-wrap:active {
+  background: #333;
+}
+
 /* Icon */
 .icon {
   line-height: 1;

ui/widgets/connect_known.vue

@@ -19,7 +19,7 @@
 
 <template>
   <div id="connect-known-list">
-    <ul class="lstcl1">
+    <ul class="hlst lstcl1">
       <li v-for="(known, kk) in knownList" :key="kk">
         <div class="labels">
           <span class="type" :style="'background-color: ' + known.data.color">

ui/widgets/connect_new.vue

@@ -19,7 +19,7 @@
 
 <template>
   <div id="connect-new">
-    <ul class="lst1">
+    <ul class="lst1 lst-nostyle">
       <li
         v-for="(connector, ck) in connectors"
         :key="ck"