From 8ff89b0898f8936e446c9be3e92058429d6d34c7 Mon Sep 17 00:00:00 2001
From: Alex Frantz <alex@alexav.gg>
Date: Thu, 17 Apr 2025 22:56:24 -0400
Subject: [PATCH] better mobile responsiveness

---
 src/App.tsx         | 12 ++++++------
 src/assets/main.css |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c9ed2e2..8369bdb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -129,7 +129,7 @@ export default function MouseFlashlight() {
       onTouchEnd={handleTouchEnd}
     >
       <div className="min-h-screen flex flex-col justify-center items-center mx-auto">
-            <div className="border border-white border-solid p-2 rounded-lg w-[500px] mb-4">
+            <div className="border border-white border-solid p-2 rounded-lg w-full sm:w-[500px] mb-4">
                 <div className="flex items-center justify-between">
                     <div className="ml-2" onClick={() => setIsFlashlightEnabled(!isFlashlightEnabled)}>
                         {
@@ -140,10 +140,10 @@ export default function MouseFlashlight() {
                 </div>
             </div>
 
-            <div className="border border-white border-solid p-2 rounded-lg w-[500px]">
-                <div className="grid grid-cols-2">
-                    <div>
-                        <div className="p-4">
+            <div className="border border-white border-solid rounded-lg w-full sm:w-[500px]">
+                <div className="grid grid-cols-1 xs:grid-cols-2 p-2">
+                    <div className="mx-auto">
+                        <div>
                             <h1 className="text-2xl font-bold italic opacity-95 inline">alex, 17</h1>
                             <img src="https://storage.alexav.gg/content/picturev2.jpg" width="150" className="rounded-md" alt="Profile" />
 
@@ -155,7 +155,7 @@ export default function MouseFlashlight() {
                             </div>
                         </div>
                     </div>
-                    <div className="p-4">
+                    <div className="mx-auto">
                         <h1 className="font-bold text-2xl italic">what i do</h1>
                         <p>
                             qa @ <a href="https://medal.tv" target="_blank" rel="noopener noreferrer" className="hover:underline">medal.tv</a>, game, code
diff --git a/src/assets/main.css b/src/assets/main.css
index 928599f..621a5b5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+@theme {
+    --breakpoint-xs: 400px
+}
+
 body {
     font-family: 'Pathway Gothic One', sans-serif;
 }
\ No newline at end of file