From a622298559914b7e4ce8696d55cfbe23e1142013 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Thu, 28 Apr 2022 18:15:28 -0400
Subject: [PATCH] nuxt/vuetify css rendering glitch fixes

---
 Website/layouts/default.vue | 41 +++++++++++++++++++++---
 Website/pages/docs.vue      | 64 ++++++++++++++++++-------------------
 Website/pages/faq.vue       |  2 +-
 Website/pages/help.vue      |  2 +-
 4 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index e8b4621..fd49a23 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -141,6 +141,9 @@ body {
   margin: 0.25em;
 }
 
+.title-text {
+  font-size: 3rem;
+}
 .topBar {
   padding: 0 3rem;
   width: fit-content !important;
@@ -151,10 +154,12 @@ body {
   /* border: 1px solid #222; */
   overflow: hidden;
 }
-.title-text {
-  font-size: 3rem;
-}
 
+/* used in docs.vue */
+.flex-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+}
 @media (max-width: 768px) {
   /* mobile */
   .title-text {
@@ -166,6 +171,35 @@ body {
     ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
   }
+  .flex-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+/* used in docs.vue, help.vue and faq.vue */
+.width-constraint {
+  max-width: auto;
+  margin: 0 auto;
+}
+@media (min-width: 960px) {
+  /* tablet */
+  .width-constraint {
+    width: 75vw;
+  }
+}
+@media (min-width: 1264px) {
+  /* desktop */
+  .width-constraint {
+    width: 60vw;
+  }
+}
+
+@media (min-width: 1904) {
+  /* 4k/ultrawide */
+  .width-constraint {
+    width: 42vw;
+  }
 }
 
 /* animations and all that */
@@ -179,7 +213,6 @@ body {
 .swoop-right-leave-active {
   transition-duration: 0.1s;
   transition-property: opacity, transform;
-  overflow: hidden;
 }
 
 .swoop-left-enter,
diff --git a/Website/pages/docs.vue b/Website/pages/docs.vue
index a1ef277..335929a 100644
--- a/Website/pages/docs.vue
+++ b/Website/pages/docs.vue
@@ -1,48 +1,46 @@
 <template>
-  <div class="row wrap justify-center full-width mx-auto" style="width: 80vw">
-    <!--   Left Section // "Sections" Card   -->
-    <v-card
-      class="col-xs-12 mx-2 elevation-0"
+  <!-- min-height overrides vertical centering from the parent default.vue layout -->
+  <div
+    class="width-constraint flex-wrapper"
+    style="min-height: calc(100vh - 10rem); position: relative"
+  >
+    <!-- docs navigation  -->
+    <v-list
+      class="py-0 mr-3"
       style="
         background: transparent;
-        height: max-content;
         position: sticky;
-        top: 5.5rem;
-        max-width: 500px;
+        top: 6rem;
+        align-self: flex-start;
       "
     >
-      <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
-        Sections
-      </v-card-title> -->
-      <v-list style="background: transparent">
-        <!--   Dynamically Generate Links From Below   -->
-        <v-list-item
-          v-for="(item, i) in links"
-          :key="i"
-          :to="item.to"
-          router
-          class="mt-4"
-          color="primary"
-          style="overflow: hidden; border-radius: 0.75rem"
-        >
-          <v-list-item-title style="text-align: right">
-            <v-list-item-title v-text="item.text" />
-          </v-list-item-title>
-          <v-list-item-icon>
-            <v-icon v-text="item.icon" />
-          </v-list-item-icon>
-        </v-list-item>
-      </v-list>
-    </v-card>
+      <v-list-item
+        v-for="(item, i) in links"
+        :key="i"
+        :to="item.to"
+        router
+        class="mb-4"
+        color="primary"
+        style="overflow: hidden !important; border-radius: 0.75rem"
+      >
+        <v-list-item-title style="text-align: right">
+          <v-list-item-title v-text="item.text" />
+        </v-list-item-title>
+        <v-list-item-icon>
+          <v-icon v-text="item.icon" />
+        </v-list-item-icon>
+      </v-list-item>
+    </v-list>
 
-    <!--   Child Pages // Card   -->
+    <!-- docs content -->
     <v-card
-      class="col-xs-12 col-md-6 text-left mx-2 my-6 pa-8"
+      class="text-left pa-8"
       style="
+        flex-grow: 2;
         height: max-content;
+        max-width: 90vw !important;
         background-color: #222;
         border-radius: 0.75rem;
-        width: 90%;
       "
     >
       <NuxtChild />
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index f0115fc..90f280d 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto">
+  <div class="width-constraint">
     <h1 class="title-text">Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
       Still have questions? Feel free to join our Discord!
diff --git a/Website/pages/help.vue b/Website/pages/help.vue
index 219ce3f..3c457e1 100644
--- a/Website/pages/help.vue
+++ b/Website/pages/help.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto">
+  <div class="width-constraint">
     <h1 class="title-text pt-12">Troubleshooting</h1>
     <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>