Fix mobile support

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}

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} />

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;
 
-}
+// }