fix: using mono font for diff and enabling word wrap

Author: technikhil314

layouts/main.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="w-full h-full">
-    <Navbar />
     <Nuxt />
   </div>
 </template>

pages/diff/_diff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full">
+  <div class="contents">
     <Navbar show-back-button="true">
       <template v-slot:right>
         <button
@@ -25,26 +25,24 @@
         </button>
       </template>
     </Navbar>
-    <div class="h-full">
-      <main class="h-full mt-24 xl:container">
-        <div class="flex gap-4 mt-5">
-          <div
-            class="flex-1 p-4 overflow-y-auto border-2 rounded-sm  max-h-screen--nav"
-          >
-            <p v-for="(lineDiff, index) in lhsDiff" :key="index">
-              <span v-html="lineDiff"></span>
-            </p>
-          </div>
-          <div
-            class="flex-1 p-4 overflow-y-auto border-2 rounded-sm  max-h-screen--nav"
-          >
-            <p v-for="(lineDiff, index) in rhsDiff" :key="index">
-              <span v-html="lineDiff"></span>
-            </p>
-          </div>
+    <main class="h-full mt-24 xl:container">
+      <div class="flex gap-4 mt-5">
+        <div
+          class="flex-1 p-4 overflow-y-auto border-2 rounded-sm  max-h-screen--nav"
+        >
+          <p v-for="(lineDiff, index) in lhsDiff" :key="index">
+            <span v-html="lineDiff"></span>
+          </p>
+        </div>
+        <div
+          class="flex-1 p-4 overflow-y-auto border-2 rounded-sm  max-h-screen--nav"
+        >
+          <p v-for="(lineDiff, index) in rhsDiff" :key="index">
+            <span v-html="lineDiff"></span>
+          </p>
         </div>
-      </main>
-    </div>
+      </div>
+    </main>
   </div>
 </template>
 
@@ -60,7 +58,7 @@ export default {
           .map((item) => {
             if (item[0] === -1 || item[0] === 0) {
               const className = item[0] === -1 ? 'bg-red-300' : ''
-              return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
+              return `<span class="whitespace-pre-wrap font-mono break-all inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</span>`
             }
             return ''
           })
@@ -74,7 +72,7 @@ export default {
           .map((item) => {
             if (item[0] === 1 || item[0] === 0) {
               const className = item[0] === 1 ? 'bg-green-300' : ''
-              return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
+              return `<span class="whitespace-pre-wrap font-mono break-all inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</span>`
             }
             return ''
           })
@@ -91,7 +89,6 @@ export default {
   },
   methods: {
     copyUrlToClipboard() {
-      console.log('demo')
       navigator.clipboard.writeText(window.location.href)
     },
   },

pages/index.vue

@@ -1,32 +1,30 @@
 <template>
-  <div class="w-full h-full">
+  <div class="contents">
     <Navbar />
-    <div class="h-full">
-      <main class="flex flex-wrap h-full mt-20 xl:container">
-        <p class="w-full mb-2 text-xl text-center">
-          Insert your data below to find the difference in them
-        </p>
-        <form @submit="checkForm" class="w-full h-full">
-          <div class="flex flex-wrap w-full h-full gap-4">
-            <textarea
-              id="lhs"
-              class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
-            ></textarea>
-            <textarea
-              id="rhs"
-              class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
-            ></textarea>
-            <div class="self-end w-full text-center">
-              <button
-                class="w-64 px-4 py-3 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  focus:ring-4 active:scale-y-75"
-              >
-                Compare
-              </button>
-            </div>
+    <main class="flex flex-wrap h-full mt-20 xl:container">
+      <p class="w-full mb-2 text-xl text-center">
+        Insert your data below to find the difference in them
+      </p>
+      <form @submit="checkForm" class="w-full h-full">
+        <div class="flex flex-wrap w-full h-full gap-4">
+          <textarea
+            id="lhs"
+            class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
+          ></textarea>
+          <textarea
+            id="rhs"
+            class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
+          ></textarea>
+          <div class="self-end w-full text-center">
+            <button
+              class="w-64 px-4 py-3 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  focus:ring-4 active:scale-y-75"
+            >
+              Compare
+            </button>
           </div>
-        </form>
-      </main>
-    </div>
+        </div>
+      </form>
+    </main>
   </div>
 </template>
 
@@ -36,6 +34,7 @@ import Vue from 'vue'
 import { urlEncode } from '../helpers/utils'
 const dmp = new DiffMatchPatch()
 export default Vue.extend({
+  layout: 'main',
   methods: {
     checkForm(e: any) {
       e.preventDefault()