fix: mobile style issues

marcelblijleven · Jun 7, 2023 · c363949 · c363949 · vercel · Jun 7, 2023
1 parent 1334361
commit c363949
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx
@@ -5,7 +5,6 @@ import {useState} from "react";
 import {processBCFile, Statistics as BrewStatistics} from "@/lib/beanconqueror/statistics";
 import Statistics from "@/app/upload/components/statistics";
 import Link from "next/link";
-import {Button} from "@/components/ui/button";
 
 export default function Home() {
     const [data, setData] = useState<BrewStatistics>();
@@ -14,7 +13,7 @@ export default function Home() {
     }
 
     return (
-        <main className="flex min-h-screen flex-col items-center p-24">
+        <main className="flex min-h-screen flex-col items-center px-2 md:px-24 pb-12">
             <div className={"flex flex-col items-center w-full max-w-5xl space-y-4 text-center"}>
                 <h1 className={"text-4xl md:text-6xl font-bold text-center"}>
                     <span className={"gradient-text"}>Upload</span> a Beanconqueror file to view your data

diff --git a/src/components/home-navigation.tsx b/src/components/home-navigation.tsx
@@ -11,12 +11,12 @@ const HomeNavigation = () => (
         <div className={"flex align-middle gap-2"}>
 
             <Link href={"/upload"} passHref>
-                <Button>Process beanconqueror file</Button>
+                <Button>Process bc file</Button>
             </Link>
             <Link href={"https://www.github.com/marcelblijleven/beanstats"}>
                 <Button variant={"secondary"}>
                     <Github />
-                    View on GitHub
+                    <span className={"hidden md:inline-block"}>View on GitHub</span>
                 </Button>
             </Link>
         </div>

diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -2,9 +2,9 @@ import Link from "next/link";
 import ThemeSwitcher from "@/components/theme-switcher";
 
 const Header = () => (
-    <header className={"sticky top-0 px-24"}>
-        <div className={"flex align-middle justify-between p-4 w-full bg-background"}>
-            <Link className={"text-2xl font-extrabold"} href={"/"}>beanstats</Link>
+    <header className={"sticky top-0 px-2 md:px-24"}>
+        <div className={"flex align-middle items-center justify-between p-4 w-full bg-background"}>
+            <Link className={"text-xl md:text-2xl font-extrabold"} href={"/"}>beanstats</Link>
             <ThemeSwitcher />
         </div>
     </header>