fix instance overflow scroll

scss/index.scss

@@ -1,91 +1,95 @@
-body {
+body {
-    margin: 0;
+    margin: 0;
-    padding: 0;
+    padding: 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    height: 100dvh;
+    height: 100dvh;
-    width: 100dvw;
+    width: 100dvw;
-    display: flex;
+    display: flex;
-    flex-direction: column;
+    flex-direction: column;
-}
+}
-.about, .instances {
+.about, .instances {
-    padding: 16px;
+    padding: 16px;
-    width: 480px;
+    width: 480px;
-    min-width: 480px;
+    min-width: 480px;
-    margin: 24px;
+    margin: 24px;
-    height: fit-content;
+    height: fit-content;
-    align-self: center;
+    align-self: center;
-
+
-    section {
+    section {
-        margin: 8px 0;
+        margin: 8px 0;
-        padding: 2px;
+        padding: 2px;
-    }
+    }
-}
+}
-h1, h2, h3 {
+.node-list {
-    margin: 4px 0px;
+    overflow-y: scroll;
-}
+    max-height: 360px;
-.admin-line {
+}
-    font-family: 'Times New Roman', Times, serif;
+h1, h2, h3 {
-    margin: 10px;
+    margin: 4px 0px;
-}
+}
-
+.admin-line {
-.subtitle {
+    font-family: 'Times New Roman', Times, serif;
-    color: darkgray;
+    margin: 10px;
-    width: fit-content;
+}
-}
+
-i {
+.subtitle {
-    display: inline-block;
+    color: darkgray;
-}
+    width: fit-content;
-.header {
+}
-    display: flex;
+i {
-    justify-items: center;
+    display: inline-block;
-    align-content: center;
+}
-    border-bottom: 1px solid #000;
+.header {
-    width: 100%;
+    display: flex;
-    img {
+    justify-items: center;
-        flex-shrink: 1;
+    align-content: center;
-        padding: 8px;
+    border-bottom: 1px solid #000;
-    }
+    width: 100%;
-    span {
+    img {
-        flex-grow: 1;
+        flex-shrink: 1;
-        text-align: center;
+        padding: 8px;
-    }
+    }
-    margin: 0 0 8px;
+    span {
-    padding: 4px;
+        flex-grow: 1;
-}
+        text-align: center;
-
+    }
-.content {
+    margin: 0 0 8px;
-    display: flex;
+    padding: 4px;
-    flex-wrap: wrap;
+}
-    justify-content: space-evenly;
+
-    flex-grow: 1;
+.content {
-}
+    display: flex;
-
+    flex-wrap: wrap;
-footer {
+    justify-content: space-evenly;
-    display: flex;
+    flex-grow: 1;
-    flex-direction: column;
+}
-    padding: 24px;
+
-    flex-shrink: 1;
+footer {
-    width: max-content;
+    display: flex;
-    sub {
+    flex-direction: column;
-        font-size: 6pt;
+    padding: 24px;
-    }
+    flex-shrink: 1;
-}
+    width: max-content;
-
+    sub {
-.instance {
+        font-size: 6pt;
-    font-family: "Times New Roman", Times, serif;
+    }
-    text-align: center;
+}
-    list-style: none;
+
-    margin: 4px;
+.instance {
-    padding: 4px;
+    font-family: "Times New Roman", Times, serif;
-}
+    text-align: center;
-
+    list-style: none;
-.horizontal-list {
+    margin: 4px;
-    display: flex;
+    padding: 4px;
-    flex-grow: 1;
+}
-    flex-direction: row;
+
-    justify-content: space-between;
+.horizontal-list {
-    span {
+    display: flex;
-        width: 1px;
+    flex-grow: 1;
-        background-color: #000;
+    flex-direction: row;
-    }
+    justify-content: space-between;
+    span {
+        width: 1px;
+        background-color: #000;
+    }
 }

templates/index.rs.html

@@ -53,9 +53,9 @@ templates::{info_html, instance_html, statics::index_css},
                 <span>
                     <h2>Connected Instances</h2>
                     <span class="subtitle">Currently, we're sitting at <i>@nodes.len()</i> members!</span>
-                <span>
+                </span>
             </div>
-            <section>
+            <section class="node-list">
                 <ul>
                     @for node in nodes {
                         @if let Some(inst) = node.instance.as_ref() {