Improving dynamic structuring within selection UI.

The server list is now centered. The minimum height was set to 40%, with a maximum of 65%. The UI will now scale to ideally fit the given number of servers. Four servers can be shown before scrolling enables.

app/overlay.ejs

@@ -2,7 +2,7 @@
 #serverSelectContent {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     height: 75%;
 }
@@ -19,19 +19,21 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    overflow-y: scroll;
+    justify-content: center;
+    max-height: 65%;
+    min-height: 40%;
+}
+#serverSelectListScrollable {
     padding: 0px 5px;
-    height: 65%;
+    overflow-y: scroll;
 }
-#serverSelectList::-webkit-scrollbar {
+#serverSelectListScrollable::-webkit-scrollbar {
     width: 2px;
 }
-
-#serverSelectList::-webkit-scrollbar-track {
+#serverSelectListScrollable::-webkit-scrollbar-track {
     display: none;
 }
-
-#serverSelectList::-webkit-scrollbar-thumb {
+#serverSelectListScrollable::-webkit-scrollbar-thumb {
     border-radius: 10px;
     box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
 }
@@ -42,20 +44,28 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin: 5px 0px;
     opacity: 0.6;
     transition: 0.25s ease;
     cursor: pointer;
     position: relative;
+    background: rgba(131, 131, 131, 0.25);
 }
 .serverListing[selected] {
     cursor: default;
-    background: rgba(255, 255, 255, 0.25);
     opacity: 1.0;
 }
 .serverListing:hover {
     opacity: 1.0;
 }
+#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
+    margin: 5px 0px;
+}
+#serverSelectListScrollable > .serverListing:first-child {
+    margin-bottom: 5px;
+}
+#serverSelectListScrollable > .serverListing:last-child {
+    margin-top: 5px;
+}
 
 .serverListingImg {
     margin: 0px 10px 0px 5px;
@@ -105,6 +115,7 @@
     padding: 0px 8.1px;
     cursor: pointer;
     transition: 0.25s ease;
+    min-height: 20.67px;
 }
 #serverSelectConfirm:hover,
 #serverSelectConfirm:focus {
@@ -207,57 +218,59 @@
     <div id="serverSelectContent">
         <span id="serverSelectHeader">Available Servers</span>
         <div id="serverSelectList">
-            <div class="serverListing" selected>
-                <img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/>
-                <div class="serverListingDetails">
-                    <span class="serverListingName">WesterosCraft Production Server</span>
-                    <span class="serverListingDescription">Main WesterosCraft server. Connect to enter the Realm.</span>
-                    <div class="serverListingInfo">
-                        <div class="serverListingVersion">1.11.2</div>
-                        <div class="serverListingRevision">3.4.17</div>
-                        <div id="serverListingStarWrapper">
-                            <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
-                                <defs>
-                                    <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
-                                </defs>
-                                <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
-                                <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
-                            </svg>
-                            <span class="serverListingStarTooltip">Main Server</span>
+            <div id="serverSelectListScrollable">
+                <div class="serverListing" selected>
+                    <img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/>
+                    <div class="serverListingDetails">
+                        <span class="serverListingName">WesterosCraft Production Server</span>
+                        <span class="serverListingDescription">Main WesterosCraft server. Connect to enter the Realm.</span>
+                        <div class="serverListingInfo">
+                            <div class="serverListingVersion">1.11.2</div>
+                            <div class="serverListingRevision">3.4.17</div>
+                            <div id="serverListingStarWrapper">
+                                <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
+                                    <defs>
+                                        <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                                    </defs>
+                                    <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
+                                    <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                                </svg>
+                                <span class="serverListingStarTooltip">Main Server</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="serverListing">
-                <img class="serverListingImg" src="./assets/images/testserver.png"/>
-                <div class="serverListingDetails">
-                    <span class="serverListingName">WesterosCraft Test Server</span>
-                    <span class="serverListingDescription">Main testing server. Experimental changes live here.</span>
-                    <div class="serverListingInfo">
-                        <div class="serverListingVersion">1.11.2</div>
-                        <div class="serverListingRevision">3.6.0</div>
+                <div class="serverListing">
+                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
+                    <div class="serverListingDetails">
+                        <span class="serverListingName">WesterosCraft Test Server</span>
+                        <span class="serverListingDescription">Main testing server. Experimental changes live here.</span>
+                        <div class="serverListingInfo">
+                            <div class="serverListingVersion">1.11.2</div>
+                            <div class="serverListingRevision">3.6.0</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="serverListing">
-                <img class="serverListingImg" src="./assets/images/testserver.png"/>
-                <div class="serverListingDetails">
-                    <span class="serverListingName">WesterosCraft 1.12.2 Test Server</span>
-                    <span class="serverListingDescription">Tests for our version change to 1.12.2 are live here.</span>
-                    <div class="serverListingInfo">
-                        <div class="serverListingVersion">1.12.2</div>
-                        <div class="serverListingRevision">4.0.1</div>
+                <div class="serverListing">
+                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
+                    <div class="serverListingDetails">
+                        <span class="serverListingName">WesterosCraft 1.12.2 Test Server</span>
+                        <span class="serverListingDescription">Tests for our version change to 1.12.2 are live here.</span>
+                        <div class="serverListingInfo">
+                            <div class="serverListingVersion">1.12.2</div>
+                            <div class="serverListingRevision">4.0.1</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="serverListing">
-                <img class="serverListingImg" src="./assets/images/testserver.png"/>
-                <div class="serverListingDetails">
-                    <span class="serverListingName">EssosCraft Test Server</span>
-                    <span class="serverListingDescription">Tests for our next project!</span>
-                    <div class="serverListingInfo">
-                        <div class="serverListingVersion">1.15.0</div>
-                        <div class="serverListingRevision">9.7.2</div>
+                <div class="serverListing">
+                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
+                    <div class="serverListingDetails">
+                        <span class="serverListingName">EssosCraft Test Server</span>
+                        <span class="serverListingDescription">Tests for our next project!</span>
+                        <div class="serverListingInfo">
+                            <div class="serverListingVersion">1.15.0</div>
+                            <div class="serverListingRevision">9.7.2</div>
+                        </div>
                     </div>
                 </div>
             </div>