finished making the action bar responsive in the 1000px breakpoint

src/renderer/components/BaseInput.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="search__container">
-      <input type="search" class="search__input" v-bind="query" :placeholder="placeholder">
+  <div>
+      <input type="search" v-bind="query" :placeholder="placeholder">
       <slot></slot>
   </div>
 </template>
@@ -19,35 +19,34 @@ export default {
 
 
 <style lang="sass" scoped>
-.search
-  &__container 
-    padding: 0
-    diplay: flex
+  div
+    display: flex
     justify-content: center
     width: 40%
   
-  &__input
-    width: 90%
-    height: 100%
-    border-radius: 15px
-    padding: .4rem 1.5rem
-    color: lighten(black, 30) 
-    border: 1px solid lighten(grey, 40)
-    margin-right: -2rem
-    background-color: #f9f9f9
-    transition: all .2s ease-in-out
+    input
+      width: 90%
+      height: 100%
+      border-radius: 15px
+      padding: .4rem 1.5rem
+      color: lighten(black, 30) 
+      border: 1px solid lighten(grey, 40)
+      margin-right: -2rem
+      background-color: #f9f9f9
+      transition: all .2s ease-in-out
+      &::placeholder
+        color: #a8abb3
         
-    &::placeholder
-      color: #a8abb3
+      &:focus
+        outline: none
+        width: 100%
 
-    &:focus
-      outline: none
-      width: 100%
-
-  &__icon
-    width: 1.2rem
-    height: 1.2rem
-    cursor: pointer
-    fill: #3b3c3d
+    svg
+      width: 1.2rem
+      height: 1.2rem
+      cursor: pointer
+      fill: #3b3c3d
 </style>
 
+
+

src/renderer/components/Notification.vue

@@ -43,5 +43,6 @@ export default {
     height: 1.5rem
     padding: 0
     fill: #bbbcbc
+
 </style>
 

src/renderer/layouts/ActionBar.vue

@@ -35,5 +35,9 @@ div
   display: flex
   padding: 1rem 2.5rem
   align-items: center
+
+@media(max-width: 1000px)    
+  div
+    flex-wrap: wrap
 </style>