Improve searching, changing mirador comportent

src/components/CanvasAnnotations.js

@@ -88,6 +88,8 @@ export class CanvasAnnotations extends Component {
       annotations = filterAnnotation(annotations, inputSearch);
     }
 
+    const annotationCount = annotations.length;
+
     return (
       <>
         <div className={classes.form}>
@@ -163,6 +165,9 @@ export class CanvasAnnotations extends Component {
             </MenuItem>
             )}
         </MenuList>
+        <div className={classes.footerAnnotationPanel}>
+          <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
+        </div>
       </>
     );
   }

src/components/WindowSideBarAnnotationsPanel.js

@@ -34,10 +34,6 @@ export class WindowSideBarAnnotationsPanel extends Component {
         otherRef={this.containerRef}
         titleControls={<AnnotationSettings windowId={windowId} />}
       >
-        <div className={classes.section}>
-          <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
-        </div>
-
         {canvasIds.map((canvasId, index) => (
           <CanvasAnnotations
             canvasId={canvasId}

src/containers/CanvasAnnotations.js

@@ -73,8 +73,17 @@ const styles = theme => ({
     position: 'absolute',
     right: 0,
   },
+  footerAnnotationPanel: {
+    background: theme.palette.background.paper,
+    bottom: 0,
+    position: 'sticky',
+  },
   form: {
+    background: theme.palette.background.paper,
     padding: theme.spacing(0, 1, 0, 1),
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
   },
   grow: {
     flexGrow: 1,