Improving UI. Making instance urls clickable #244

src/assets/javascripts/helpers/common.js

@@ -182,7 +182,7 @@ async function processDefaultCustomInstances(
           let latencyLimit = (instancesLatency[x] == 5000 ? '5000ms+' : instancesLatency[x] + 'ms')
           let latency = x in instancesLatency ? '<span style="color:' + latencyColor + ';">' + latencyLimit + '</span>' : '';
 
-          return `<div><x>${x}${cloudflare} ${latency}</x><input type="checkbox" class="${x}"/></div>`;
+          return `<div><x><a href="${x}" target="_blank">${x}</a>${cloudflare} ${latency}</x><input type="checkbox" class="${x}"/></div>`;
         }
       ),
     ].join('\n<hr>\n');

src/pages/stylesheets/styles.css

@@ -106,9 +106,8 @@ section.option-block h2 {
 
 body.option {
   display: flex;
-  align-items: flex-start;
   padding: 40px;
-  width: 1200px;
+  width: 900px;
 }
 
 section.links div {
@@ -358,6 +357,16 @@ div.checklist div {
   padding: 10px 0;
   word-wrap: break-word;
   display: flex;
+
+}
+
+div.checklist a {
+  text-decoration: none;
+  color: var(--text);
+}
+
+div.checklist a:hover {
+  text-decoration: underline;
 }
 
 div.checklist-popup div {