some frontend changes

resources/js/pages/HomeView.vue

@@ -103,9 +103,15 @@
           </GuessWord>
         </template>
       </div>
-        <form ref="main-form" @submit="onSubmit" onsubmit="return false">
+        <UForm class="space-y-2" ref="main-form" @submit="onSubmit" onsubmit="return false">
-          <UInput v-model="guess" @keyup="onkeyup()" autofocus/>
+          <UFormField>
-        </form>
+            <UInput v-model="guess" @keyup="onkeyup()" autofocus/>
+          </UFormField>
+
+          <UButton type="submit">
+            Guess
+          </UButton>
+        </UForm>
       </template>
       <template v-if="!correct && guesses.length >= maxGuesses">
         You ran out of guesses. Todays TLA was {{ tla }}

resources/js/pages/SuggestionView.vue

@@ -2,14 +2,14 @@
     <h1>TLA suggestion form</h1>
     <UCard>
     <UForm>
-        <UFormField label="Acronym" required>
+        <UFormField class="form-field" label="Acronym" required>
-            <UInput placeholder="Enter your TLA"></UInput>
+            <UInput class="w-80" placeholder="Enter your TLA"></UInput>
         </UFormField>
         <UFormField label="Motto" required>
-            <UInput placeholder="Enter the motto for your TLA"></UInput>
+            <UInput class="w-80" placeholder="Enter the motto for your TLA"></UInput>
         </UFormField>
         <UFormField label="Contex" required>
-            <UTextarea style="w-full" placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
+            <UTextarea class="w-80" rows="5" placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
         </UFormField>
         <UButton>
             salkdjf
@@ -17,4 +17,8 @@
     </UForm>
     </UCard>
     
-</template>
+</template>
+
+<style>
+    
+</style>