fixed grid and

src/App.vue

@@ -30,7 +30,7 @@ import { ref } from "vue";
       </q-tabs>
     </q-header>
 
-    <q-page-container>
+    <q-page-container style="display: flex;padding-top: 20px;">
       <router-view />
     </q-page-container>
   </q-layout>

src/assets/grid.svg

@@ -1,11 +1,11 @@
 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
-      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    <pattern id="smallGrid" width="25" height="25" patternUnits="userSpaceOnUse">
+      <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
     </pattern>
-    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
-      <rect width="80" height="80" fill="url(#smallGrid)"/>
-      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    <pattern id="grid" width="250" height="250" patternUnits="userSpaceOnUse">
+      <rect width="250" height="250" fill="url(#smallGrid)"/>
+      <path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="1"/>
     </pattern>
   </defs>
       

src/components/TextBox.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   <Draggable :grid="[25, 25]">
     <div style="display: flex">
       <q-card flat bordered>
-        <q-card-section>
+        <q-card-section style="padding:0">
           <div class="row items-center no-wrap">
             <q-card-section v-html="props.statement" />
             <div class="col-auto">

src/pages/Editor.vue

@@ -13,7 +13,7 @@ function toggleLeftDrawer() {
   Rich Text Stuff
 */
 
-const richTextStatments = ref([
+const richTextStatements = ref([
   { text: "test" },
   { text: "test2" },
   { text: "test3" },
@@ -23,15 +23,15 @@ const richEditModal = ref(false);
 const richEditExpression = ref("");
 const richEditID = ref(0);
 
-const richEditStatement = (id: int) => {
+const richEditStatement = (id: number) => {
   console.log("editing statement", id, richEditModal);
   richEditModal.value = true;
   richEditID.value = id;
-  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+  richEditExpression.value = richTextStatements.value[richEditID.value].text;
 };
 
 function richUpdateValue() {
-  richTextStatments.value[richEditID.value].text = richEditExpression.value;
+  richTextStatements.value[richEditID.value].text = richEditExpression.value;
 }
 </script>
 
@@ -76,7 +76,7 @@ function richUpdateValue() {
           </q-card-actions>
         </q-card>
       </q-dialog>
-      <span v-for="(item, index) in richTextStatments">
+      <span v-for="(item, index) in richTextStatements">
         <TextBox
           :statement="item.text"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"