diff --git a/__tests__/src/components/ViewerInfo.test.js b/__tests__/src/components/ViewerInfo.test.js
index 357d0392db8f679aa9c9124a690328b07c6cedaf..287b68ae24309a4250a48fb357d2fdb32bb1d691 100644
--- a/__tests__/src/components/ViewerInfo.test.js
+++ b/__tests__/src/components/ViewerInfo.test.js
@@ -21,8 +21,11 @@ describe('ViewerNavigation', () => {
 
   it('renders the component', () => {
     wrapper = createWrapper();
-    expect(wrapper.find(Typography).length).toBe(1);
+
+    expect(wrapper.find(Typography).length).toBe(2);
     expect(wrapper.find(Typography).at(0)
-      .matchesElement(<Typography>3 of 8 • testLabel</Typography>)).toBe(true);
+      .matchesElement(<Typography>3 of 8</Typography>)).toBe(true);
+    expect(wrapper.find(Typography).at(1)
+      .matchesElement(<Typography> • testLabel</Typography>)).toBe(true);
   });
 });
diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js
index 94c1b361f57312dd049e91d40268b16dd892e5d8..ac677a5752224b6a640908b90c72ec8f78cd44b9 100644
--- a/src/components/ViewerInfo.js
+++ b/src/components/ViewerInfo.js
@@ -18,9 +18,11 @@ export class ViewerInfo extends Component {
 
     return (
       <div className={ns('osd-info')}>
-        <Typography variant="caption" className={ns('canvas-label')}>
+        <Typography inline variant="caption" className={ns('canvas-count')}>
           {`${canvasIndex + 1} ${t('of')} ${canvasCount}`}
-          {canvasLabel && ` ${String.fromCharCode(8226)} ${canvasLabel}`}
+        </Typography>
+        <Typography inline variant="caption" className={ns('canvas-label')}>
+          {canvasLabel && ` • ${canvasLabel}`}
         </Typography>
       </div>
     );
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f98a75a1529efcf006c108fa43c9f58b34f9dfd7..86a7c489099cfe16835f1f31b3aaf68beedb005c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -124,7 +124,12 @@
   }
 
   &-osd-info {
-    order: 2
+    order: 2;
+    overflow: hidden;
+    padding-bottom: 3px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
   }
 
   &-canvas-nav {
@@ -135,12 +140,6 @@
     text-align: center;
   }
 
-  &-canvas-label {
-    width: 100%;
-    text-overflow: ellipsis;
-    padding-bottom: 3px;
-  }
-
   &-thumb-navigation {
 
     .mirador-thumbnail-nav-canvas {