From af8b6b4e425f2856e215df3bcb154c34f0bd8826 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Thu, 20 Jun 2024 17:09:05 +0200
Subject: [PATCH] fix: minor mobile fixes

---
 assets/css/global.css | 2 +-
 components/Charts.vue | 9 +++++----
 layouts/default.vue   | 2 +-
 pages/index.vue       | 6 +++++-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index e990cc1..48423ee 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -38,7 +38,7 @@ body {
     background-color: var(--surface-100);
     box-sizing: border-box;
 
-    min-height: 100vh;
+    min-height: 100dvh;
 
     margin: 0;
 }
diff --git a/components/Charts.vue b/components/Charts.vue
index 8940e7f..13302d6 100644
--- a/components/Charts.vue
+++ b/components/Charts.vue
@@ -71,10 +71,10 @@ const chartOptions = ref({
 
 <template>
   <div id="container">
-    <Bar
-        :data="chartData"
-        :options="chartOptions"
-    />
+        <Bar
+            :data="chartData"
+            :options="chartOptions"
+        />
   </div>
   <div id="tooltip">
     <Icon name="ph:question" size="25" style="color: var(--white)"/>
@@ -87,6 +87,7 @@ const chartOptions = ref({
   flex: 1;
 
   canvas {
+    position: absolute;
     margin: 10px;
   }
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 4beb7d1..207206b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -82,7 +82,7 @@ const modpackCountUrls = [
     justify-content: space-between;
     align-items: center;
 
-    gap: 10px;
+    gap: 50px;
 
     overflow: auto;
 
diff --git a/pages/index.vue b/pages/index.vue
index 0072209..dc63cd1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -73,12 +73,14 @@ const {data} = useModrinthFetch<statistics>("/statistics");
 <style scoped>
 #page {
   flex: 1;
-  background: linear-gradient(180deg, var(--surface-100) 0%, black 100%);
+  background: linear-gradient(180deg, var(--surface-100) 0%, var(--surface-mixed-100) 150%);
 
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
 
+  gap: 50px;
+
   #header {
     text-align: center;
     font-size: 4rem;
@@ -118,6 +120,8 @@ const {data} = useModrinthFetch<statistics>("/statistics");
 
     flex-wrap: wrap;
 
+    gap: 25px;
+
     .container {
       display: flex;
 
-- 
2.51.2