ui tweaks

app/page.tsx

@@ -33,9 +33,9 @@ export default function Home() {
   };
 
   return (
-    <section className="h-screen w-full flex items-center justify-center flex-col bg-zinc-100 gap-5">
+    <section className="min-h-screen h-full w-full flex items-center justify-center flex-col bg-zinc-100 gap-5 overflow-auto p-6">
       <div className="max-w-2xl w-full border border-gray-200 bg-white rounded-3xl p-8 grid gap-8 shadow-xl shadow-black/5">
-        <header className="flex items-center justify-between border-b border-zinc-200 pb-5">
+        <header className="flex items-start max-lg:gap-1 lg:items-center justify-between max-lg:flex-col border-b border-zinc-200 pb-5">
           <Image
             src={Logo}
             alt="logo hugging face"

components/form.tsx

@@ -46,7 +46,7 @@ export const Form: React.FC<Props> = ({ loading, onSubmit }) => {
       <div className="flex justify-end">
         <button
           className={classNames(
-            "bg-black rounded-full px-5 py-2.5 text-base font-medium text-white hover:bg-zinc-800 disabled:bg-zinc-300 disabled:text-zinc-500 disabled:cursor-not-allowed",
+            "bg-black max-lg:w-full rounded-full px-5 py-2.5 text-base font-medium text-white hover:bg-zinc-800 disabled:bg-zinc-300 disabled:text-zinc-500 disabled:cursor-not-allowed",
             {
               "animate-pulse": loading,
             }

components/input.tsx

@@ -41,7 +41,7 @@ export const Input: React.FC<Props> = ({ onChange, value }) => {
       )}
     >
       <div className="bg-zinc-100 border-r border-zinc-200 text-zinc-500 text-sm px-3 h-[40px] flex items-center justify-center">
-        https://huggingface.co/
+        <span className="max-lg:hidden">https://</span>huggingface.co/
       </div>
       <input
         value={username}

components/select.tsx

@@ -9,7 +9,7 @@ export const Select: React.FC<Props> = ({ onChange, value }) => {
     <select
       value={value}
       onChange={(e) => onChange(e.target.value as Language)}
-      className="rounded-md mr-2 border border-gray-200 relative ring-transparent text-zinc-600 focus-within:ring-amber-500/20 ring-[3px] flex items-center justify-center overflow-hidden text-sm px-3 py-2.5 max-w-[150px] w-full outline-none"
+      className="max-lg:w-full rounded-md mr-2 border border-gray-200 relative ring-transparent text-zinc-600 focus-within:ring-amber-500/20 ring-[3px] flex items-center justify-center overflow-hidden text-sm px-3 py-2.5 lg:max-w-[150px] w-full outline-none"
     >
       <option value="en">English</option>
       <option value="fr">French</option>