fix: major css layout fixes

Author: technikhil314

components/Toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative mt-24">
+  <div class="absolute right-[20px] top-24" id="toast">
     <div
       class="
         absolute
@@ -11,6 +11,7 @@
         rounded-md
         shadow-md
         z-2
+        w-72
       "
       v-bind:class="{
         '-translate-y-screen': !toastState.show,

components/navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="fixed top-0 left-0 right-0 bg-white shadow-lg">
+  <header class="fixed top-0 left-0 right-0 bg-white shadow-lg z-100">
     <div class="container flex items-center h-full py-4 m-auto">
       <div v-if="showBackButton" class="mr-4">
         <NuxtLink to="/">

pages/diff/_diff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="contents">
+  <div class="flow-root h-full">
     <Navbar show-back-button="true">
       <template v-slot:right>
         <button
@@ -48,7 +48,7 @@
         </button>
       </template>
     </Navbar>
-    <main class="h-full xl:container">
+    <main class="h-full mt-24 xl:container">
       <div class="flex gap-4 mt-5">
         <div
           class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-sm  max-h-screen--nav line-numbers min-h-80"

pages/index.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="contents">
+  <div class="flow-root h-full page-root">
     <Navbar />
-    <main class="flex flex-wrap h-full -mt-3 xl:container">
-      <p class="w-full mb-2 text-xl text-center">Compare any text for diff</p>
+    <main class="flex flex-wrap h-full mt-20 xl:container">
+      <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">
+        Dont worry, We dont store any of your data
+      </h2>
       <form @submit="checkForm" class="w-full h-full">
         <div class="flex flex-wrap w-full h-full gap-4">
           <textarea
@@ -105,3 +110,8 @@ export default Vue.extend({
   },
 })
 </script>
+<style>
+.page-root {
+  max-height: calc(100% - 14rem);
+}
+</style>

static/global.scss

@@ -8,7 +8,7 @@ main {
 }
 html,
 body {
-  height: calc(100% - 6rem);
+  height: 100%;
 }
 #__nuxt,
 #__layout,