improved my folders display on header

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -1,26 +1,28 @@
 <template lang="html">
   <div id="user-flags">
-    <h4
+    <h2
       class="mdi mdi-folder-outline"
-    >My folders</h4>
+    >My folders</h2>
     <ul>
       <li  v-if="flags" v-for="flag in flags" :key="flag.id">
         <h5>{{ flag.name }}</h5>
-        <span
-          class="mdi mdi-trash-can-outline"
-          :flagid="flag.id"
-          @click.prevent="onDeleteFlag"
-        />
+        <div class="actions">
+          <span
+            class="mdi mdi-trash-can-outline"
+            :flagid="flag.id"
+            @click.prevent="onDeleteFlag"
+          />
+        </div>
       </li>
       <li ref="create-flag">
-        <span class="mdi mdi-folder-plus-outline"/>
         <input
           placeholder="new folder"
           v-model="new_folder_name"
         />
         <span
+
           class="mdi mdi-plus-box"
-          v-if="new_folder_name"
+          v-if="new_folder_name && !is_creating_folder"
           @click.prevent="onCreateFlag"
         />
       </li>
@@ -35,7 +37,8 @@ import { mapState, mapActions } from 'vuex'
 export default {
   name: "userFlags",
   data: () => ({
-    new_folder_name: ""
+    new_folder_name: "",
+    is_creating_folder: false
   }),
   computed: {
     ...mapState({
@@ -69,26 +72,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  li{
-    width:100%;
-    // cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    flex-wrap: nowrap;
-    h5{
-      // flex-grow:10;
-      width:100%;
-    }
-    input{
-      border: none
-    }
-    span.mdi{
-      flex-basis:1em;
-    }
-    span.mdi-plus-box,
-    span.mdi-trash-can-outline{
-      cursor: pointer;
-    }
-  }
+
 </style>

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -60,5 +60,6 @@ h4{
   margin:0;
   display:inline-block;
   font-size:inherited;
+  vertical-align: top;
 }
 </style>