story, story-content: Made tag editor in add story and edit story tags form more compact.

marko/components/story-tag-options/index.marko

@@ -1,21 +1,27 @@
 <div class="tag-options">
-  <label>Tag Name</label>
-  <input key="name" placeholder="Name" on-change("change", "name") value=state.values.name />
-  <label>Tag Kind</label>
-  <select key="kind" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
-    <option value="Character" selected=(state.values.kind === "Character")>Character</option>
-    <option value="Event" selected=(state.values.kind === "Event")>Event</option>
-    <option value="Location" selected=(state.values.kind === "Location")>Location</option>
-    <option value="Organization" selected=(state.values.kind === "Organization")>Organization</option>
-    <option value="Series" selected=(state.values.kind === "Series")>Series</option>
-  </select>
+  <div class="field">
+    <label>Tag Name</label>
+    <input key="name" placeholder="Name" on-change("change", "name") value=state.values.name />
+  </div>
+  <div class="field">
+    <label>Tag Kind</label>
+    <select key="kind" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
+      <option value="Character" selected=(state.values.kind === "Character")>Character</option>
+      <option value="Event" selected=(state.values.kind === "Event")>Event</option>
+      <option value="Location" selected=(state.values.kind === "Location")>Location</option>
+      <option value="Organization" selected=(state.values.kind === "Organization")>Organization</option>
+      <option value="Series" selected=(state.values.kind === "Series")>Series</option>
+    </select>
+  </div>
+  <div class="button-field">
+    <button class="add-tag" disabled=(input.loading) on-click("add", state.values)>Add</button>
+  </div>
+  
   <div class="suggestion-list" if(state.suggestions.length > 0)>
     <div class="header color-menu">Suggestions:</div>
     <a for(tag in state.suggestions) on-click("applySuggestion", tag) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a>
   </div>
 
-  <button disabled=(input.loading) on-click("add", state.values)>Add</button>
-
   <div for(tag in (input.tags || [])) class="tag" key=(tag.kind+":"+tag.name)>
     <div class=("content color-tag-"+tag.kind.toLowerCase())>${tag.name}</div>
     <button on-click("emit", "remove", tag)>Remove</button>

marko/components/story-tag-options/style.less

@@ -1,4 +1,6 @@
 div.tag-options {
+  margin-top: 0em;
+
   div.tag {
     padding: 0.25em;
     border-bottom: 1px solid rgba(0, 220, 255, 0.125);
@@ -15,8 +17,36 @@ div.tag-options {
     }
   }
 
+  div.field {
+    box-sizing: border-box;
+    display: inline-block;
+    width: 35%;
+    margin: 0;
+    margin-top: 0ch;
+
+    input {
+      height: 1.55em;
+    }
+  }
+  div.button-field {
+    position: relative;
+    top: -0.75ch;
+
+    box-sizing: border-box;
+    display: inline-block;
+    width: 30%;
+    margin: 0;
+    text-align: right;
+
+    button {
+      display: inline-block;
+      width: 14ch;
+      margin-right: 1ch;
+    }
+  }
+
   div.suggestion-list {
-    margin: 2em 0;
+    margin: -2em 0 1em 0;
 
     a.tag {
       display: inline-block;
@@ -35,8 +65,9 @@ div.tag-options {
   
     div.header {
       display: block;
-      margin: 0.5em 0.5ch;
-      padding: 0.0625em 0.5ch;
+      padding: 0em 0.5ch;
+      padding-top: 0.75em;
+      font-size: 0.75em;
   
       opacity: 0.5;