diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 5589db649..afb764719 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -614,6 +614,7 @@ ol li {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-grow: 1;
 }
 
 .show-on-small-screen {
diff --git a/components/history.vue b/components/history.vue
index 02a439ea9..b85ab6895 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -122,7 +122,7 @@
             />
           </li>
         </div>
-        <transition name="page" appear>
+        <transition name="fade">
           <div v-if="showMore" class="show-on-large-screen">
             <li>
               <input
@@ -267,6 +267,15 @@
   }
 }
 
+.fade-enter-active,	
+.fade-leave-active {	
+  transition: all 0.2s;	
+}	
+.fade-enter,	
+.fade-leave-to {	
+  opacity: 0;	
+}	
+
 .stared {
   color: #f8e81c !important;
 }
diff --git a/pages/index.vue b/pages/index.vue
index 7f1a3a19f..01c3a5784 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -560,7 +560,7 @@
               </ul>
             </pw-section>
           </div>
-          <div class="flex-wrap" style="display: flex; flex-grow: 1;">
+          <div class="flex-wrap">
             <span></span>
             <button class="icon" @click="activeSidebar = !activeSidebar" v-tooltip="{ content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar' }">
               <i class="material-icons">{{activeSidebar ? 'chevron_right' : 'chevron_left'}}</i>