From 0345732d755a5eb0247929a0af61559532b182f1 Mon Sep 17 00:00:00 2001
From: OCDkirby <mangacreeperyt@gmail.com>
Date: Fri, 17 Nov 2023 17:20:24 -0600
Subject: [PATCH] fix: tag & mobile css

---
 src/App.vue | 63 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8550c12..0fa0e31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,41 +115,42 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 
 <template>
   <n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
-    <div class="wrapper">
-      <div class="top-portion-wrapper">
-        <Suspense>
-          <TopBarMenu :themex="theme" :toggle="toggleTheme" />
-        </Suspense>
-        <div class="columns">
-          <div id="main-column" class="column">
-            <div class="top-main">
-              <Suspense>
-                <Hook :themex="theme" />
-              </Suspense>
+    <n-layout>
+      <div class="wrapper">
+        <div class="top-portion-wrapper">
+          <Suspense>
+            <TopBarMenu :themex="theme" :toggle="toggleTheme" />
+          </Suspense>
+          <div class="columns">
+            <div id="main-column" class="column">
+              <div class="top-main">
+                <Suspense>
+                  <Hook :themex="theme" />
+                </Suspense>
+              </div>
+
+              <!-- todo put something here if necessary -->
+              <div class="column-content" />
             </div>
-
-            <!-- todo put something here if necessary -->
-            <div class="column-content" />
-          </div>
-          <div id="right-column" class="column">
-            <div class="top-right">
-              <MainCard :themex="theme" />
-            </div>
-            <div class="column-content">
-              <!-- <iframe src="https://discord.com/widget?id=252023769500090368&theme=dark" width="250" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
+            <div id="right-column" class="column">
+              <div class="top-right">
+                <MainCard :themex="theme" />
+              </div>
+              <div class="column-content">
+                <!-- <iframe src="https://discord.com/widget?id=252023769500090368&theme=dark" width="250" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
+              </div>
             </div>
           </div>
         </div>
+        <n-divider />
+        <div class="bottom-portion-wrapper">
+          <n-carousel autoplay direction="horizontal" dot-type="line">
+            <img class="carousel-img" src="/assets/we-are-doomed.png">
+            <img class="carousel-img" src="/assets/sample-1.png">
+            <img class="carousel-img" src="/assets/steamydeck.jpg">
+          </n-carousel>
+        </div>
       </div>
-      <n-divider />
-      <div class="bottom-portion-wrapper">
-        <n-carousel autoplay direction="horizontal" dot-type="line">
-          <img class="carousel-img" src="/assets/we-are-doomed.png">
-          <img class="carousel-img" src="/assets/sample-1.png">
-          <img class="carousel-img" src="/assets/steamydeck.jpg">
-        </n-carousel>
-      </div>
-    </div>
     </n-layout>
   </n-config-provider>
 </template>
@@ -244,6 +245,8 @@ const darkThemeOverrides: GlobalThemeOverrides = {
   flex-grow: 1;
   gap: 16px;
   padding-right: 10px;
+  align-self: center;
+  align-items: center;
 }
 
 .right-pane-button {