fix: mobile styling

Author: idosius

src/components/WordForm.tsx

@@ -38,28 +38,26 @@ export default function WordForm({ onAddWordAction }: WordFormProps) {
   }
 
   return (
-    <form className="flex gap-2 max-w-screen-sm" action={handleSubmit}>
-      <div className="flex flex-col gap-1">
+    <form className="flex flex-col gap-1 max-w-screen-sm" action={handleSubmit}>
+      <div className="flex gap-2">
         <Input
-          className="px-4 w-[400px]"
           name="word"
           placeholder="Wort eingeben, z.B. Brief"
           required
           onChange={handleChange}
         />
-
-        <div
-          role="alert"
-          aria-live="assertive"
-          aria-atomic="true"
-          className="text-sm h-5"
-        >
-          {error ? `❌ ${error}` : ''}
-        </div>
+        <Button className="px-4 py-2" type="submit">
+          + Hinzufügen
+        </Button>
+      </div>
+      <div
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        className="text-sm h-5"
+      >
+        {error && <span>❌ {error}</span>}
       </div>
-      <Button className="px-4 py-2" type="submit">
-        + Hinzufügen
-      </Button>
     </form>
   )
 }