cleaned up mobile styling and updated input action component

app/components/forms/auth/login-form.vue

@@ -10,12 +10,22 @@ const handleLogin = () => login(email.value, password.value)
   <form class="password-form" @submit.prevent="handleLogin">
     <div class="form-group">
       <label for="email">Email</label>
-      <input id="email" v-model="email" type="email"/>
+      <input
+          id="email"
+          v-model="email"
+          autocomplete="email"
+          type="email"
+      />
     </div>
 
     <div class="form-group">
       <label for="password">Password</label>
-      <input id="password" v-model="password" type="password"/>
+      <input
+          id="password"
+          v-model="password"
+          autocomplete="current-password"
+          type="password"
+      />
     </div>
 
     <button type="submit">Submit</button>

app/components/forms/create-list-form.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import InputAction from "~/components/common/input-action.vue";
+
 const emit = defineEmits(['refreshLists']);
 const refreshLists = () => emit('refreshLists');
 const listName = ref("");
@@ -20,14 +22,13 @@ const createList = () => {
 
 <template>
   <form @submit.prevent="createList">
-    <label for="list_name">Add MovieList</label>
-    <div class="form-group">
-      <input v-model="listName"
-             name="list_name"
-             placeholder="MovieList Name"
-             type="text">
-      <button>Add</button>
-    </div>
+    <label for="list_name">Add List</label>
+    <InputAction
+        v-model="listName"
+        :buttonText="'Add'"
+        :inputName="'list_name'"
+        :placeholder="'List Name'"
+    />
   </form>
 </template>
 <style scoped>
@@ -35,26 +36,12 @@ const createList = () => {
 form {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
 }
 
-button {
-  background-color: #4caf50;
-  color: white;
-  padding: .5rem 1rem;
-  border: none;
-  border-radius: 0 4px 4px 0;
-}
-
-input {
-  padding: .5rem;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-}
 
 label {
   font-weight: bold;
 }
 
+
 </style>