🎨 (account) remove transition :'(

src/components/TagList.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="tag-list columns is-multiline is-centered">
+  <div class="tag-list">
+    <div class="columns">
       <div class="column legend-container">
-      <table class="table">
+        <table class="table is-fullwidth">
           <tr
             v-for="(slice, k) in slices"
             :key="k"
@@ -23,7 +24,8 @@
           <chart-pie :slices="slices" />
         </div>
       </div>
-    <div class="column is-12">
+    </div>
+    <div>
       <div class="field has-addons has-addons-centered is-narrow">
         <div class="control" v-if="filterCategory">
           <button type="submit" class="button" @click="filterCategory = ''">
@@ -191,6 +193,9 @@ export default class TagList extends Vue {
 }
 .legend-container {
   display: flex;
+  table {
+    max-width: 400px;
+  }
 }
 .legend {
   font-weight: bold;

src/views/accounts/AccountItem.vue

@@ -87,12 +87,6 @@
           </li>
         </ul>
       </div>
-      <transition-group
-        :name="transitionName"
-        tag="div"
-        mode="out-in"
-        v-if="transactions.length"
-      >
       <div
         key="transaction"
         class="transaction-panel tab-content is-centered"
@@ -108,10 +102,7 @@
         class="tag-panel tab-content is-centered"
         v-if="activeTab === 'tag'"
       >
-          <tag-list
-            :transactions="transactionWithoutRefund"
-            :account="account"
-          />
+        <tag-list :transactions="transactionWithoutRefund" :account="account" />
       </div>
       <div
         key="balance"
@@ -141,9 +132,8 @@
             <refund-transaction :refund="userRefunds[k]" :account="account" />
           </div>
         </div>
-          <div v-else class="equilibrium">Le compte est à l'équilibre !</div>
+        <div v-else class="equilibrium">Le compte est à l'équilibre&nbsp;!</div>
       </div>
-      </transition-group>
     </div>
     <fab-button
       v-if="!account.archive"
@@ -197,7 +187,6 @@ export default class AccountItem extends BaseAccount {
   public transactions: ITransaction[] = []
   public activeTab: string = 'transaction'
   public retrievingExchange: boolean = false
-  public transitionName: string = ''
 
   public async getData(docIds?: string[]): Promise<void> {
     if (docIds && !docIds.find((i: string) => i === this.id)) {
@@ -444,13 +433,6 @@ export default class AccountItem extends BaseAccount {
   public get isMultiUser(): boolean {
     return !!this.account && this.account.users.length > 1
   }
-
-  @Watch('activeTab')
-  public onActiveTabChange(newTab: string, oldTab: string): void {
-    const tabs: string[] = ['transaction', 'tag', 'balance', 'refund']
-    this.transitionName =
-      tabs.indexOf(newTab) > tabs.indexOf(oldTab) ? 'slide-left' : 'slide-right'
-  }
 }
 </script>
 
@@ -529,9 +511,7 @@ export default class AccountItem extends BaseAccount {
 .tab-content {
   position: absolute;
   width: 100%;
-  margin: 10px 0.75rem;
-  transition: opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1),
-    transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+  margin: 10px 0;
   &.columns {
     &:last-child {
       margin-bottom: 60px;