Improve text alignment in hotspots

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

includes/GlModelTransformOutput.php

@@ -110,8 +110,8 @@ class GlModelTransformOutput extends MediaTransformOutput {
                     $hsDefault['onmouseup'] = 'releaseAnnotation(event)';
                 }
                 $attrHotspot = array_merge($hsDefault, $an);
-                $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.(count($hotspots) +1));
-                array_push($hotspots, $elHotspot);
+                $elHotspot = Html::rawElement('button',$attrHotspot, $elAnnot . '<span>' . (count($hotspots) +1) . '</span>');
+                array_push($hotspots, $elHotspot); 
             }
         }
 

modules/glmv.css

@@ -15,9 +15,11 @@
     padding-top: 2px;
     height: 24px;
     position: relative;
-    text-align: center;
     transition: opacity 0.3s;
     width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     & [hidden] {
         display: none;