Move all chips to the upper right hand corner in gallery view

src/components/GalleryViewThumbnail.js

@@ -133,34 +133,36 @@ export class GalleryViewThumbnail extends Component {
               maxWidth: `${Math.ceil(config.height * miradorCanvas.aspectRatio)}px`,
             }}
           >
-            { annotationsCount > 0 && (
+            <div className={classes.chips}>
+              { searchAnnotationsCount > 0 && (
                 <Chip
                   avatar={(
                     <Avatar className={classes.avatar} classes={{ circle: classes.avatarIcon }}>
-                    <AnnotationIcon className={classes.annotationIcon} />
+                      <SearchIcon fontSize="small" />
                     </Avatar>
                   )}
-                label={annotationsCount}
-                className={
-                  classNames(
-                    classes.annotationsChip,
-                  )
-                }
+                  label={searchAnnotationsCount}
+                  className={classNames(classes.searchChip)}
                   size="small"
                 />
               )}
-            { searchAnnotationsCount > 0 && (
+              { annotationsCount > 0 && (
                 <Chip
                   avatar={(
                     <Avatar className={classes.avatar} classes={{ circle: classes.avatarIcon }}>
-                    <SearchIcon fontSize="small" />
+                      <AnnotationIcon className={classes.annotationIcon} />
                     </Avatar>
                   )}
-                label={searchAnnotationsCount}
-                className={classNames(classes.searchChip)}
+                  label={annotationsCount}
+                  className={
+                    classNames(
+                      classes.annotationsChip,
+                    )
+                  }
                   size="small"
                 />
               )}
+            </div>
           </IIIFThumbnail>
         </div>
       </IntersectionObserver>

src/containers/GalleryViewThumbnail.js

@@ -23,14 +23,17 @@ const styles = theme => ({
   },
   annotationsChip: {
     ...theme.typography.caption,
-    left: '50%',
-    position: 'absolute',
-    top: 10,
-    transform: 'translate(-50%, 0)',
   },
   avatar: {
     backgroundColor: 'transparent',
   },
+  chips: {
+    opacity: 0.875,
+    position: 'absolute',
+    right: 0,
+    textAlign: 'right',
+    top: 0,
+  },
   galleryViewItem: {
     '&$hasAnnotations': {
       border: `2px solid ${theme.palette.action.selected}`,
@@ -61,10 +64,7 @@ const styles = theme => ({
     '&$selected $avatar': {
       backgroundColor: theme.palette.highlights.primary,
     },
-    left: '50%',
-    position: 'absolute',
-    top: 80,
-    transform: 'translate(-50%, 0)',
+    marginTop: 2,
   },
   selected: {},
 });