fix: added footer and corresponding css changes to avoid layout issues

Author: technikhil314

components/footer.vue

@@ -0,0 +1,8 @@
+<template>
+  <footer
+    class="py-4 mt-4 text-center text-gray-800  bg-inherit dark:text-gray-50 min-h-max"
+  >
+    Made with &hearts; by &copy;
+    <a href="https://technikhil314.netlify.app">Nikhil Mehta</a>
+  </footer>
+</template>

components/navbar.vue

@@ -1,8 +1,8 @@
 <template>
-  <header
-    class="fixed top-0 left-0 right-0 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 z-100 dark:text-gray-50"
+  <nav
+    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
-    <div class="container flex items-center h-full py-4 m-auto">
+    <div class="container flex items-center py-4 m-auto">
       <div v-if="showBackButton" class="hidden mr-4 md:block">
         <NuxtLink to="/">
           <svg
@@ -147,7 +147,7 @@
         </ul>
       </nav>
     </div>
-  </header>
+  </nav>
 </template>
 
 <script>

pages/diff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="contents">
+  <div class="page-contents">
     <Navbar :show-back-button="true">
       <template #right>
         <button
@@ -52,7 +52,6 @@
       <div
         class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >
-        <h1>{{ name }}</h1>
         <div
           class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
         >
@@ -83,13 +82,16 @@
         </div>
       </div>
     </main>
+    <Footer />
   </div>
 </template>
 
 <script>
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
+import footer from '~/components/footer.vue'
 export default {
+  components: { footer },
   layout: 'main',
   data() {
     return {

pages/index.vue

@@ -1,22 +1,28 @@
 <template>
-  <div class="contents">
+  <div class="page-contents">
     <Navbar />
     <main class="text-gray-800 dark:text-gray-50">
-      <h1 class="w-full mb-2 text-xl text-center">
-        Find difference in any two text blocks and get easy sharable link
-      </h1>
-      <h2 class="w-full mb-2 text-center text-md">
-        Don’t worry, We don’t store any of your data
-      </h2>
-      <form class="w-full h-full" @submit="checkForm">
-        <div class="flex flex-wrap w-full h-full gap-4">
+      <section>
+        <header>
+          <h1 class="w-full mb-2 text-xl text-center">
+            Find difference in any two text blocks and get easy sharable link
+          </h1>
+          <h2 class="w-full mb-2 text-center text-md">
+            Don’t worry, We don’t store any of your data
+          </h2>
+        </header>
+      </section>
+      <form class="w-full" @submit="checkForm">
+        <div class="flex flex-wrap w-full gap-4">
           <textarea
+            rows="28"
             id="lhs"
-            class="flex-1 h-full max-h-full bg-transparent rounded-md resize-none  form-textarea"
+            class="flex-1 bg-transparent rounded-md resize-none form-textarea"
           ></textarea>
           <textarea
             id="rhs"
-            class="flex-1 h-full max-h-full bg-transparent rounded-md resize-none  form-textarea"
+            rows="28"
+            class="flex-1 bg-transparent rounded-md resize-none form-textarea"
           ></textarea>
           <div class="self-end flex-grow-0 w-full text-center">
             <button
@@ -28,6 +34,7 @@
         </div>
       </form>
     </main>
+    <Footer />
   </div>
 </template>
 
@@ -88,8 +95,14 @@ export default Vue.extend({
   },
 })
 </script>
-<style>
-.page-root {
-  max-height: calc(100% - 14rem);
+
+<style scoped>
+main {
+  @apply grid gap-4;
+
+  grid-template-rows: 100px 1fr;
+  @media screen and (min-width: 768px) {
+    grid-template-rows: 60px 1fr;
+  }
 }
 </style>

styles/global.scss

@@ -2,32 +2,40 @@
 :root {
   color-scheme: dark light;
 }
+
+html,
+body,
+#__nuxt,
+#__layout,
+.page-root {
+  @apply min-h-[100vh];
+}
+
 html,
 body,
 #__nuxt,
 #__layout,
 .page-root,
 main {
-  @apply h-full;
   @apply bg-gray-50 dark:bg-gray-900;
 }
 
 body {
   font-family: 'Open Sans', sans-serif;
 }
 
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
 .page-root {
   @apply flow-root w-full;
 }
 
+.page-contents {
+  @apply grid;
+  grid-template-rows: 80px 1fr 80px;
+}
+
 main {
   @apply flex flex-wrap xl:container;
-  margin-top: 5.5rem;
+  margin-top: 2rem;
 }
 
 /* custom scrollbar */

tailwind.config.js

@@ -15,7 +15,8 @@ module.exports = {
     },
     zIndex: {
       '1': 1,
-      '2': 2
+      '2': 2,
+      '10': 10
     },
     minHeight: {
       '80': '20rem'