Layout fixes for server view

src/views/ServerView.vue

@@ -2,24 +2,35 @@
   <div id="filters">
 
   </div>
+  <div class="serverView">
+    <div class="serverList">
+      <div class="serverHeaders">
+        <span></span>
+        <span>Server name</span>
+        <span>Map</span>
+        <span>Kills</span>
+        <span>Max distance</span>
+        <span>Average distance</span>
+        <span>Players</span>
+      </div>
+      <VirtualList :list="serverList" :row-height="100" v-slot="slotProps">
+        <div
+          :class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : '') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive ' : '') + ((slotProps.index + 1) % 2 ? 'odd ' : 'uneven ')">
+          <div><span>{{ slotProps.index + 1 }}</span></div>
+          <div><span>{{ slotProps.data.name + (!nsServersByName[slotProps.data.name] ? ' (offline)' : '') }}</span></div>
+          <img v-if="nsServersByName[slotProps.data.name]"
+            :src="`${publicPath}maps/${nsServersByName[slotProps.data.name].map}_lobby.png`" />
 
-  <VirtualList :list="serverList" :row-height="100" v-slot="slotProps">
-    <div
-      :class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : '') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive ' : '') + ((slotProps.index + 1)%2 ? 'odd ':'uneven ')">
-      <div><span>{{ slotProps.index + 1 }}</span></div>
-      <div><span>{{ slotProps.data.name }}</span></div>
-      <div><span>{{ slotProps.data._value.kills }}</span></div>
-      <div><span>{{ slotProps.data._value.max_distance }}</span></div>
-      <div><span>{{ Math.round(((slotProps.data._value.total_distance / slotProps.data._value.kills) || 0) * 100) /
-        100 }}</span></div>
-      <div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
-        + '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
-      <img v-if="nsServersByName[slotProps.data.name]"
-        :src="`${publicPath}maps/${nsServersByName[slotProps.data.name].map}_lobby.png`" />
+          <div><span>{{ slotProps.data._value.deaths }}</span></div>
+          <div><span>{{ slotProps.data._value.max_distance }}</span></div>
+          <div><span>{{ Math.round(((slotProps.data._value.total_distance / slotProps.data._value.kills) || 0) * 100) /
+            100 }}</span></div>
+          <div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
+            + '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
+
+        </div>
+      </VirtualList>
     </div>
-  </VirtualList>
-  <div>
-
   </div>
 </template>
 
@@ -75,14 +86,22 @@ export default defineComponent({
 }
 
 .offline {
-  color: var(--current-line);
+  color: var(--comment);
+}
+.serverView{
+  margin: 0 1rem 1rem 1rem;
+  overflow:auto;
+}
+.serverList {
+  overflow-y: auto;
+  height: 100%;
 }
 
 .serverRow,
 .serverHeaders {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: 5ch 40ch 7ch 7ch 7ch 7ch 1fr;
+  grid-template-columns: 4ch 20ch 178px 8ch 8ch 8ch 1fr;
   background: var(--bg-color);
   text-align: left;
   cursor: pointer;
@@ -92,6 +111,14 @@ export default defineComponent({
   height: 100px;
 }
 
+.serverHeaders {
+  height: 3em;
+  background: var(--current-line);
+}
+.serverHeaders > span {
+  padding: .5em .8em 0 .25em;
+}
+
 .serverRow.odd {
   background: var(--accent);
 }
@@ -104,12 +131,14 @@ export default defineComponent({
   background: var(--current-line);
 }
 
+.serverRow>div{
+  padding: .5em .8em 0 .25em;
+}
 .serverRow>div:not(:last-child){
   border-right: solid var(--bg-color) 2px;
 }
 
 img {
   object-fit: contain;
-  height: 100%
-}
-</style>
+  height: 100%;
+}</style>