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,14 +19,12 @@ export default {
 
 
 <style lang="sass" scoped>
-.search
-  &__container 
-    padding: 0
-    diplay: flex
+  div
+    display: flex
     justify-content: center
     width: 40%
   
-  &__input
+    input
       width: 90%
       height: 100%
       border-radius: 15px
@@ -36,7 +34,6 @@ export default {
       margin-right: -2rem
       background-color: #f9f9f9
       transition: all .2s ease-in-out
-    
       &::placeholder
         color: #a8abb3
         
@@ -44,10 +41,12 @@ export default {
         outline: none
         width: 100%
 
-  &__icon
+    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>