Correct 2 regressions with the close button (notebook)

- made the button stick on the top without taking space from the
  notebook. I re-enabled the original padding of the notebook.

- fixed an issue with window resizing that caused the notebook to
  disappear.

- on touch devices closing the notebook, closed the sidebar too.

src/annotator/notebook.js

@@ -61,8 +61,6 @@ export default class Notebook extends Delegator {
       this._groupId = groupId;
       this.open();
     });
-    // Defensive programming: if the sidebar has opened, get out of the way
-    this.subscribe('sidebarOpened', () => this.close());
   }
 
   _update() {
@@ -110,20 +108,22 @@ export default class Notebook extends Delegator {
     this.container.className = 'notebook-outer';
     shadowRoot.appendChild(this.container);
 
+    const close = event => {
+      // Guest 'component' captures all click or touchstart events in the host page and opens the sidebar.
+      // We stop the propagation of the event to prevent the sidebar to be opened.
+      event.stopPropagation();
+      this.close();
+      this.publish('closeNotebook');
+    };
+
     render(
-      <div className="Notebook__controller-bar">
+      <div className="Notebook__controller-bar" onTouchStart={close}>
         <Button
           icon="cancel"
           className="Notebook__close-button"
           buttonText="Close"
           title="Close the Notebook"
-          onClick={event => {
-            // Guest 'component' captures all click events in the host page and opens the sidebar.
-            // We stop the propagation of the event to prevent the sidebar to be opened.
-            event.stopPropagation();
-            this.close();
-            this.publish('closeNotebook');
-          }}
+          onClick={close}
         />
       </div>,
       this.container

src/annotator/test/notebook-test.js

@@ -136,15 +136,6 @@ describe('Notebook', () => {
 
       assert.equal(notebook.container.style.display, '');
     });
-
-    it('closes on "sidebarOpened"', () => {
-      const notebook = createNotebook();
-
-      notebook.open();
-      notebook.publish('sidebarOpened');
-
-      assert.equal(notebook.container.style.display, 'none');
-    });
   });
 
   describe('destruction', () => {

src/styles/annotator/notebook.scss

@@ -40,8 +40,6 @@
   font-size: var.$font-size--large;
   display: flex;
   justify-content: flex-end;
-  background-color: var.$grey-2;
-  padding: var.$layout-space--xsmall;
 
   // FIXME: these properties emulates as if the Notebook__controller-bar would be part of the iframe.
   border-top-left-radius: var.$border-radius;
@@ -49,8 +47,10 @@
 }
 
 .Notebook__close-button {
+  position: absolute;
   @include buttons.button--labeled(
     $background-color: var.$grey-2,
     $active-background-color: var.$grey-3
   );
+  margin: var.$layout-space--xsmall;
 }

src/styles/sidebar/components/HypothesisApp.scss

@@ -24,9 +24,9 @@
   // FIXME: Temporary affordance for the Notebook view to override some
   // layout spacing that assumes the presence of the top bar
   &--notebook {
-    padding: 0 var.$layout-space;
+    padding: var.$layout-space;
     @include responsive.respond-to(tablets desktops) {
-      padding: 0 var.$layout-space--xlarge;
+      padding: var.$layout-space--xlarge;
     }
   }
 }