⚡ Optimized UI components

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 {

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;
 }

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>