fix: major css layout fixes

Author: technikhil314

layouts/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full">
+  <div class="page-root">
     <Toast />
     <Nuxt />
   </div>

pages/diff/_diff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flow-root h-full">
+  <div class="contents">
     <Navbar show-back-button="true">
       <template v-slot:right>
         <button
@@ -48,8 +48,8 @@
         </button>
       </template>
     </Navbar>
-    <main class="h-full mt-24 xl:container">
-      <div class="flex gap-4 mt-5">
+    <main>
+      <div class="flex items-start w-full gap-4">
         <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,7 +1,7 @@
 <template>
-  <div class="flow-root h-full page-root">
+  <div class="contents">
     <Navbar />
-    <main class="flex flex-wrap h-full mt-20 xl:container">
+    <main>
       <h1 class="w-full mb-2 text-xl text-center">
         Find difference in any two text blocks and get easy sharable link
       </h1>

static/global.scss

@@ -3,17 +3,18 @@ html,
 body,
 #__nuxt,
 #__layout,
+.page-root,
 main {
-  width: 100%;
+  @apply h-full;
 }
-html,
-body {
-  height: 100%;
+
+.page-root {
+  @apply flow-root w-full;
 }
-#__nuxt,
-#__layout,
+
 main {
-  height: 100%;
+  @apply flex flex-wrap xl:container;
+  margin-top: 5.5rem;
 }
 
 /* custom scrollbar */