Improve cluster label display

nearest.css

@@ -286,7 +286,7 @@ label {
 
     font-size: 12px;
     grid:
-        "bigm litm .   alp omg" 1em
+        "lbl  lbl  lbl lbl lbl" 1em
         "mu   mux  mux mux mux"
         "muv  muv  muv muv muv"
         "pi   piv  .   th  thv"
@@ -300,7 +300,13 @@ label {
 
 .pkmn_tile-cluster-top_label {
     font-weight: 1000;
+    font-size: 14px;
     justify-self: center;
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
 }
 
 .pkmn_tile-cluster-stat_label {

nearest.js

@@ -305,7 +305,6 @@ const getSprite = pokemon => {
   return `https://img.pokemondb.net/sprites/sword-shield/icon/${pokemon}.png`;
 };
 
-// TODO make the M m alpha omega labels more visible
 const renderCluster = ({
   index, big, small, best, worst, pi, theta, delta, phi, hex, vector,
 }) => `
@@ -313,10 +312,12 @@ const renderCluster = ({
     class="pkmn_tile-cluster"
     style="grid-area: k${index + 1}; color: ${getContrastingTextColor(hex2rgb(hex))}; background-color: ${hex};"
   >
-    <div class="pkmn_tile-cluster-top_label" style="grid-area: bigm;">${index === big ? "M" : ""}</div>
-    <div class="pkmn_tile-cluster-top_label" style="grid-area: litm;">${index === small ? "m" : ""}</div>
-    <div class="pkmn_tile-cluster-top_label" style="grid-area: alp;">${index === best ? "α" : ""}</div>
-    <div class="pkmn_tile-cluster-top_label " style="grid-area: omg;">${index === worst ? "ω" : ""}</div>
+    <div class="pkmn_tile-cluster-top_label" style="grid-area: lbl;">
+      ${index === big ? "<span>M</span>" : ""}
+      ${index === small ? "<span>m</span>" : ""}
+      ${index === best ? "<span>α</span>" : ""}
+      ${index === worst ? "<span>ω</span>" : ""}
+    </div>
     <div class="pkmn_tile-cluster-stat_label" style="grid-area: mu;">μ =</div>
     <div class="pkmn_tile-cluster-stat_label" style="grid-area: pi;">π =</div>
     <div class="pkmn_tile-cluster-stat_label" style="grid-area: th;">θ =</div>