Improve tooltip accessibility

Author: MetRonnie

src/components/cylc/gscan/GScan.vue

@@ -154,12 +154,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <job :status="state" />
                       <v-tooltip
                         activator="parent"
-                        color="black"
                         location="top"
                       >
                         <!-- tooltip text -->
                         <span>
-                          <span class="text-grey">{{ countTasksInState(scope.node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
+                          <span class="text-grey-lighten-1">{{ countTasksInState(scope.node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
                           <br/>
                           <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
                             {{ task }}<br v-if="index !== tasks.length -1" />

src/components/graphqlFormGenerator/FormGenerator.vue

@@ -27,7 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-for="input in inputs"
         v-bind:key="input.label"
       >
-          <v-list-item-title>
+          <v-list-item-title class="d-flex align-center mb-2">
             <!-- input label - the display title for this input -->
             {{ input.label }}
             <!-- help button - tooltip for more information -->
@@ -36,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               location="bottom"
             >
               <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">
+                <v-icon v-bind="props" class="mx-2">
                   {{ icons.help }}
                 </v-icon>
               </template>

src/styles/cylc/_tooltip.scss

@@ -15,8 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-.v-tooltip__content {
-  max-width: 600px;
+.v-tooltip .v-overlay__content {
+  max-width: 600px !important;
+  // Increase default opacity of bg:
+  background: rgba(var(--v-theme-surface-variant), 0.9);
 
   p:last-child {
     // If we have markdown paragraphs in the tooltip