Reposition notebook's user-filter on narrow viewports

Moved the user-filter below the heading and added a little bit of top
and bottom space.

src/styles/sidebar/components/NotebookView.scss

@@ -4,18 +4,21 @@
 
 .NotebookView {
   display: grid;
-  row-gap: var.$layout-space--xsmall;
+  row-gap: var.$layout-space--small;
   grid-template-areas:
     'heading'
+    'filters'
     'results'
     'items';
 
   &__heading {
+    line-height: 1;
     grid-area: heading;
   }
 
   &__filters {
     grid-area: filters;
+    justify-self: start;
   }
 
   &__results {
@@ -32,6 +35,7 @@
   }
 
   @include responsive.tablet-and-up {
+    row-gap: var.$layout-space--xsmall;
     grid-template-areas:
       'heading heading'
       'filters results'