Fix survey styling issues

Resolves MS-716 #complete

client/src/pages/survey.vue

@@ -22,6 +22,7 @@
 <script>
 import '@/styles/survey.modern.css';
 import '@/styles/survey.reset.css';
+import '@/styles/_survey.scss';
 import { css } from '@/survey.config';
 import gql from 'graphql-tag';
 import { Model, StylesManager } from 'survey-knockout';
@@ -37,11 +38,7 @@ import { meQuery } from '@/graphql/queries';
 
 import { defineAsyncComponent } from 'vue';
 import { matomoTrackEvent } from '@/helpers/matomo-client';
-const Solution = defineAsyncComponent(() =>
-  import(
-     '@/components/content-blocks/Solution.vue'
-  )
-);
+const Solution = defineAsyncComponent(() => import('@/components/content-blocks/Solution.vue'));
 
 StylesManager.applyTheme('modern');
 

client/src/styles/_survey.scss

@@ -1,3 +1,5 @@
+@import 'helpers';
+
 .survey {
   &__page-title {
     @include main-title;
@@ -225,6 +227,18 @@
   text-align: center;
 }
 
+.sv-container-modern {
+  font-family: $sans-serif-font-family;
+}
+
+.sv-table__cell--header {
+  font-family: $sans-serif-font-family;
+}
+
+.sv-action-bar {
+  display: flex;
+}
+
 .table {
   width: 100%;
   display: flex;