small ui nits

Author: brendan-kellam

src/app/page.tsx

@@ -12,21 +12,21 @@ import { Separator } from "@/components/ui/separator";
 
 export default async function Home() {
     return (
-        <div className="h-screen flex flex-col items-center">
+        <div className="flex flex-col items-center overflow-hidden">
             {/* TopBar */}
             <NavigationMenu />
 
-            <div className="flex flex-col justify-center items-center mt-8 md:mt-32 max-w-[90%]">
+            <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 max-w-[90%]">
                 <div className="max-h-44 w-auto">
                     <Image
                         src={logoDark}
-                        className="w-full h-full hidden dark:block"
+                        className="h-18 md:h-40 w-auto hidden dark:block"
                         alt={"Sourcebot logo"}
                         priority={true}
                     />
                     <Image
                         src={logoLight}
-                        className="w-full h-full block dark:hidden"
+                        className="h-18 md:h-40 w-auto block dark:hidden"
                         alt={"Sourcebot logo"}
                         priority={true}
                     />

src/app/search/page.tsx

@@ -103,7 +103,7 @@ export default function SearchPage() {
                 <div className="flex flex-row justify-between items-center py-1.5 px-3 gap-4">
                     <div className="grow flex flex-row gap-4 items-center">
                         <div
-                            className="cursor-pointer"
+                            className="shrink-0 cursor-pointer"
                             onClick={() => {
                                 router.push("/");
                             }}

src/app/searchBar.tsx

@@ -86,6 +86,8 @@ export const SearchBar = ({
                                     {...field}
                                     ref={inputRef}
                                     autoFocus={autoFocus ?? false}
+                                    // This is needed to prevent mobile browsers from zooming in when the input is focused
+                                    style={{ fontSize: '1rem' }}
                                 />
                             </FormControl>
                             <FormMessage />