From f4b8bfe8d49e9c09a69e18935b6929ab001ec8eb Mon Sep 17 00:00:00 2001
From: Phoenix/HotaruBlaze <DeriousHD@gmail.com>
Date: Sun, 13 Jul 2025 11:39:24 +0100
Subject: [PATCH] Fix mobile support

---
 src/components/ButtonGrid.jsx |  2 +-
 src/components/Meta.jsx       |  1 +
 src/styles/main.scss          | 23 ++++++++++++++++++-----
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/ButtonGrid.jsx b/src/components/ButtonGrid.jsx
index 3535454..0458691 100644
--- a/src/components/ButtonGrid.jsx
+++ b/src/components/ButtonGrid.jsx
@@ -19,7 +19,7 @@ export default function ButtonGrid() {
   }, []);
 
   return (
-    <div className="btn-row max-w-md mx-auto mt-8 flex justify-center gap-4">
+    <div className="btn-row max-w-md mx-auto mt-8 flex flex-wrap justify-center gap-4">
       {buttons.map((btn, i) => (
         <button
           key={i}
diff --git a/src/components/Meta.jsx b/src/components/Meta.jsx
index bb72678..76e5c92 100644
--- a/src/components/Meta.jsx
+++ b/src/components/Meta.jsx
@@ -2,6 +2,7 @@ export default function Meta({ title, description, image, url = "https://flutter
   return (
     <>
       <title>{title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
       <meta property="og:url" content={url} />
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
diff --git a/src/styles/main.scss b/src/styles/main.scss
index eb2d2d6..7037567 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -6,8 +6,21 @@ body {
 
 html, body, #root {
     height: 100%;
+    margin: 0;      /* Remove default margin */
+    padding: 0;     /* Remove default padding */
+    overflow-x: hidden; /* Prevent horizontal scroll */
 }
 
+body {
+    background-color: #121212;
+    color: #ffffff;
+    display: flex;
+    justify-content: center; /* center horizontally if needed */
+    align-items: center;     /* center vertically if needed */
+    min-height: 100vh;       /* ensure minimum full viewport height */
+}
+
+
 @keyframes glowMove {
     0% { background-position: 0% 0%; }
     100% { background-position: 100% 100%; }
@@ -24,9 +37,9 @@ html, body, #root {
     position: relative;
 }
 
-.profile-pic::after {
-    content: '';
-    position: absolute;
-    height: 100px;
+// .profile-pic::after {
+//     content: '';
+//     position: absolute;
+//     height: 100px;
 
-}
\ No newline at end of file
+// }
\ No newline at end of file