fix: minor css fixes

Author: technikhil314

pages/diff/_lhs/_rhs.vue

@@ -2,12 +2,16 @@
   <div class="h-full">
     <main class="container h-full mx-auto mt-24">
       <div class="flex gap-4 mt-5">
-        <div class="flex-1 max-h-full p-4 border-2 rounded-sm">
+        <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 max-h-full p-4 border-2 rounded-sm">
+        <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>

pages/index.vue

@@ -5,11 +5,11 @@
         <div class="flex flex-wrap w-full h-full gap-4">
           <textarea
             id="lhs"
-            class="flex-1 h-full rounded-md resize-none form-textarea"
+            class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
           ></textarea>
           <textarea
             id="rhs"
-            class="flex-1 h-full rounded-md resize-none form-textarea"
+            class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
           ></textarea>
           <div class="self-end w-full text-center">
             <button

tailwind.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   mode: 'jit',
+  theme: {
+    maxHeight: {
+      'screen--nav': 'calc(100vh - 7rem)',
+    }
+  },
   plugins: [
     require('@tailwindcss/forms'),
   ]