list/servicegrid: Increase joystick size to make it more apparent

Also increases x-axis label length by 30% since we're now showing
hostnames which are usually longer than service descriptions. Also
this makes room for actually being able to increase the joystick size.

refs #2640

modules/monitoring/application/views/scripts/list/servicegrid-flipped.phtml

@@ -36,7 +36,7 @@ foreach ($pivotData as $serviceDescription => $_) {
             ) ?></th>
             <?php foreach ($pivotHeader['cols'] as $hostName => $hostAlias): ?>
             <th class="rotate-45"><div><span><?= $this->qlink(
-                $this->ellipsis($hostAlias, 18),
+                $this->ellipsis($hostAlias, 24),
                 Url::fromPath('monitoring/list/services')->addFilter(
                     Filter::matchAll($serviceFilter, Filter::where('host_name', $hostName))
                 ),

modules/monitoring/application/views/scripts/list/servicegrid.phtml

@@ -36,7 +36,7 @@ foreach ($pivotData as $hostName => $_) {
             ) ?></th>
         <?php foreach ($pivotHeader['cols'] as $serviceDescription => $serviceDisplayName): ?>
             <th class="rotate-45"><div><span><?= $this->qlink(
-                $this->ellipsis($serviceDisplayName, 18),
+                $this->ellipsis($serviceDisplayName, 24),
                 Url::fromPath('monitoring/list/services')->addFilter(
                     Filter::matchAll($hostFilter, Filter::where('service_description', $serviceDescription))
                 ),

modules/monitoring/public/css/service-grid.less

@@ -12,10 +12,10 @@
   }
 
   .rotate-45 {
-    height: 6em;
+    height: 8em;
 
     div {
-      .transform(translate(0.4em, 2.1em) rotate(315deg));
+      .transform(translate(0.4em, 2.8em) rotate(315deg));
       width: 1.5em;
     }
   }
@@ -30,6 +30,7 @@
 
 .joystick-pagination {
   margin: 0 auto;
+  font-size: 130%;
 
   a {
     color: @text-color;