put zoom controls in correct place fixes #1977

__tests__/src/components/OpenSeadragonViewer.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import OpenSeadragon from 'openseadragon';
 import { OpenSeadragonViewer } from '../../../src/components/OpenSeadragonViewer';
+import ZoomControls from '../../../src/containers/ZoomControls';
 
 jest.mock('openseadragon');
 
@@ -30,6 +31,9 @@ describe('OpenSeadragonViewer', () => {
   it('renders child components', () => {
     expect(wrapper.find('.foo').length).toBe(1);
   });
+  it('renders ZoomControls', () => {
+    expect(wrapper.find(ZoomControls).length).toBe(1);
+  });
   describe('tileSourcesMatch', () => {
     it('when they do not match', () => {
       expect(wrapper.instance().tileSourcesMatch([])).toBe(false);

src/components/OpenSeadragonViewer.js

@@ -209,8 +209,8 @@ export class OpenSeadragonViewer extends Component {
           ref={this.ref}
         >
           { children }
-        </div>
           <ZoomControls windowId={windowId} />
+        </div>
       </>
     );
   }

src/containers/ZoomControls.js

@@ -34,6 +34,8 @@ const styles = theme => ({
   zoom_controls: {
     position: 'absolute',
     right: 0,
+    zIndex: 33,
+    top: 0,
   },
   ListItem: {
     paddingTop: 0,