Fix remove button behaviour

src/nginxconfig/scss/style.scss

@@ -24,15 +24,28 @@ $highlight: #f2c94c;
   $pretty--color-dark: $primary;
   $pretty--color-default: $primary;
   @import "~pretty-checkbox/src/pretty-checkbox";
-  $vs-state-active-bg: $primary;
-  $vs-border-radius: $border-radius;
   $vs-border-color: $border;
+  $vs-border-radius: $border-radius;
   $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
+  $vs-state-active-bg: $primary;
   @import "~vue-select/src/scss/vue-select";
 
   .tabs {
     ul {
       li {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        &:hover,
+        &:focus {
+          a {
+            &::after {
+              background: $dark-blue;
+            }
+          }
+        }
+
         &.is-before {
           a {
             color: mix($dark-grey, $primary);
@@ -58,22 +71,45 @@ $highlight: #f2c94c;
         }
 
         a {
+          &.domain {
+            flex-grow: 1;
+            padding-right: .25rem;
+
+            &::after {
+              border-bottom-right-radius: 0;
+              border-top-right-radius: 0;
+            }
+          }
+
+          &.remove {
+            padding-left: .25rem;
+            transition: color $transition;
+
+            &::after {
+              border-bottom-left-radius: 0;
+              border-top-left-radius: 0;
+            }
+
+            &:hover,
+            &:focus {
+              color: $danger;
+
+              &::after {
+                background: $danger;
+              }
+            }
+
+            i {
+              margin: 0;
+            }
+          }
+
           i {
             font-size: .75em;
 
             &.fa-plus {
               margin: 0 .35rem 0 0;
             }
-
-            &.fa-times {
-              margin: 0 0 0 .5rem;
-              transition: color $transition;
-
-              &:hover,
-              &:focus {
-                color: $danger;
-              }
-            }
           }
         }
       }

src/nginxconfig/templates/app.vue

@@ -36,9 +36,11 @@ limitations under the License.
                     <div class="tabs">
                         <ul>
                             <li v-for="data in activeDomains" :class="data[1] === active ? 'is-active' : undefined">
-                                <a @click="active = data[1]">
+                                <a class="domain" @click="active = data[1]">
                                     {{ data[0].server.domain.computed }}{{ changes(data[1]) }}
-                                    <i class="fas fa-times" @click="remove(data[1])"></i>
+                                </a>
+                                <a class="remove" @click="remove(data[1])">
+                                    <i class="fas fa-times"></i>
                                 </a>
                             </li>
                             <li>
@@ -58,7 +60,7 @@ limitations under the License.
                     <Global :data="global"></Global>
 
                     <h2>Setup</h2>
-                    <Setup :data="{ domains, global, confFiles }"></Setup>
+                    <Setup :data="{ domains: domains.filter(d => d !== null), global, confFiles }"></Setup>
                 </div>
 
                 <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
@@ -157,7 +159,7 @@ limitations under the License.
             },
             remove(index) {
                 this.$set(this.$data.domains, index, null);
-                if (this.$data.active === index) this.$data.active = 0;
+                if (this.$data.active === index) this.$data.active = this.$data.domains.findIndex(d => d !== null);
             },
         },
     };