web/app/src/views/TagsView.vue

@@ -9,15 +9,18 @@
       </div>
     </div>
 
-    <div class="action-buttons">
+    <div class="action-buttons btn-bar">
       <form @submit="createTag">
-        <input
-          type="text"
-          name="newtagname"
-          v-model="newTagName"
-          placeholder="New Tag Name"
-        />
-        <button type="submit">Create Tag</button>
+        <div class="create-tag-container">
+          <input
+            type="text"
+            name="newtagname"
+            v-model="newTagName"
+            placeholder="New Tag Name"
+            class="create-tag-input"
+          />
+          <button id="submit-button" type="submit">Create Tag</button>
+        </div>
       </form>
     </div>
 
@@ -26,7 +29,18 @@
   <footer class="app-footer"></footer>
 </template>
 
-<style scoped></style>
+<style scoped>
+.create-tag-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.create-tag-input {
+  flex: 1;
+  margin-right: 10px;
+}
+</style>
 
 <script>
 import { TabulatorFull as Tabulator } from "tabulator-tables";
@@ -56,11 +70,9 @@ export default {
   mounted() {
     this.fetchTags();
 
-    const vueComponent = this;
-
     const tag_options = {
       columns: [
-        { title: "Name", field: "name", sorter: "string" },
+        { title: "Name", field: "name", sorter: "string", editor: "input" },
         { title: "Description", field: "description", sorter: "string" },
       ],
       layout: "fitData",