From 8c3949ea0a4f22677c5ee4609fc343b1bb4ec4db Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sat, 5 Oct 2024 18:04:25 +0200
Subject: [PATCH] fix: chartLink looking weird in mobile ui

---
 app/pages/index.vue | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 35d7026..48f48bc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -15,10 +15,12 @@ const { data } = useModrinthFetch<statistics>("/statistics");
 
 <template>
   <Teleport to="#navBody">
-    <NuxtLink href="/charts" id="chartsLink">
-      <Icon name="ph:chart-line" size="35"/>
-      Charts
-    </NuxtLink>
+    <div id="links">
+      <NuxtLink href="/charts" id="chartsLink">
+        <Icon name="ph:chart-line" size="35"/>
+        Charts
+      </NuxtLink>
+    </div>
   </Teleport>
   <div id="page">
     <div id="header">
@@ -76,19 +78,25 @@ const { data } = useModrinthFetch<statistics>("/statistics");
 </template>
 
 <style scoped>
-#chartsLink{
-  text-decoration: none;
-  font-size: xx-large;
-  font-weight: bold;
-
+#links{
   display: flex;
-  gap: 10px;
-  align-items: center;
+  justify-content: center;
 
-  &:hover{
-    color: var(--primary-500);
+  #chartsLink{
+    text-decoration: none;
+    font-size: xx-large;
+    font-weight: bold;
+
+    display: flex;
+    gap: 10px;
+    align-items: center;
+
+    &:hover{
+      color: var(--primary-500);
+    }
   }
 }
+
 #page {
   flex: 1;
   background: linear-gradient(180deg, var(--surface-100) 0%, var(--surface-mixed-100) 150%);
-- 
2.51.2