fix: layout issues

src/app/page.tsx

@@ -1,13 +1,22 @@
 import HomeNavigation from "@/components/home-navigation";
 import RatioCard from "@/components/ratio-card";
 import BeanconquerorCard from "@/components/bc-card";
+import {Button} from "@/components/ui/button";
+import {Github} from "lucide-react";
+import Link from "next/link";
 
 export default async function Home() {
-      return (
+    return (
         <main className="flex h-full flex-col items-center p-6 md:p-24 space-y-6">
-            <HomeNavigation />
-            <BeanconquerorCard />
-            <RatioCard />
+            <HomeNavigation/>
+            <BeanconquerorCard/>
+            <RatioCard/>
+            <Link href={"https://www.github.com/marcelblijleven/beanstats"}>
+                <Button variant={"secondary"}>
+                    <Github/>
+                    <span className={"hidden md:inline-block"}>View on GitHub</span>
+                </Button>
+            </Link>
         </main>
-      )
+    )
 }

src/components/home-navigation.tsx

@@ -1,22 +1,10 @@
-import {Button} from "@/components/ui/button";
-import Link from "next/link";
-import {Github} from "lucide-react";
-
 const HomeNavigation = () => {
     return (
         <div className={"flex flex-col items-center w-full max-w-3xl space-y-6"}>
             <h1 className={"text-4xl md:text-6xl font-bold text-center"}>
                 Coffee tools and visualisation with&nbsp;
                 <span className={"gradient-text"}>Beanstats</span>
             </h1>
-
-                <Link href={"https://www.github.com/marcelblijleven/beanstats"}>
-                    <Button variant={"secondary"}>
-                        <Github />
-                        <span className={"hidden md:inline-block"}>View on GitHub</span>
-                    </Button>
-                </Link>
-
         </div>
     );
 }

src/components/ratio-card.tsx

@@ -16,13 +16,13 @@ interface UserInputProps {
 }
 
 const UserInputGroup = ({children}: {children: ReactNode}) => (
-    <div className={"flex gap-2 md:gap-4"}>
+    <div className={"flex flex-col md:flex-row gap-2 md:gap-4"}>
         {children}
     </div>
 )
 
 const UserInput = ({id, label, value, onChange, prefix}: UserInputProps) => (
-    <div className="grid w-1/2 max-w-sm items-center gap-1.5">
+    <div className="flex flex-col items-left w-full gap-1.5">
         <Label htmlFor={id}>{label}</Label>
         {!prefix && (<Input
             id={id}

src/components/ui/input-with-prefix.tsx

@@ -17,7 +17,7 @@ const InputWithPrefix = React.forwardRef<HTMLInputElement, InputProps>(
                 <span className={"absolute left-3 leading-10"}>{props.prefix}</span>
                 <input
                     type={type}
-                    className={"flex h-10 pl-7 rounded-md border border-input bg-transparent px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"}
+                    className={"flex h-10 pl-7 w-full rounded-md border border-input bg-transparent px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"}
                     ref={ref}
                     {...props}
                 />