feat: reactive font size for ace editor + i18n support for font size settings strings

components/graphql/QueryEditor.vue

@@ -48,6 +48,14 @@ export default {
     }
   },
 
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
@@ -94,6 +102,8 @@ export default {
       })
     })
 
+    editor.setFontSize(this.appFontSize)
+
     const completer = {
       getCompletions: (
         editor,

components/graphql/RequestOptions.vue

@@ -58,7 +58,6 @@
             :options="{
               maxLines: Infinity,
               minLines: 16,
-              fontSize: '12px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
               useWorker: false,
@@ -102,7 +101,6 @@
             :options="{
               maxLines: Infinity,
               minLines: 16,
-              fontSize: '12px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
               useWorker: false,

components/graphql/Response.vue

@@ -42,7 +42,6 @@
       :options="{
         maxLines: Infinity,
         minLines: 16,
-        fontSize: '12px',
         autoScrollEditorIntoView: true,
         readOnly: true,
         showPrintMargin: false,

components/graphql/Sidebar.vue

@@ -191,7 +191,6 @@
             :options="{
               maxLines: Infinity,
               minLines: 16,
-              fontSize: '12px',
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,