diff --git a/example.config.js b/example.config.js
index afae114..3c8661b 100644
--- a/example.config.js
+++ b/example.config.js
@@ -24,7 +24,7 @@ module.exports = {
     app: {
       map: {
         anchor: [31.356397, 34.784818]
-      },
+      }
     },
     ui: {
       style: {
@@ -37,6 +37,5 @@ module.exports = {
         selectedEvent: {}
       }
     }
-  },
-
+  }
 }
diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss
index c1a8e28..893cceb 100644
--- a/src/scss/cardstack.scss
+++ b/src/scss/cardstack.scss
@@ -7,10 +7,13 @@
   right: $card-right;
   max-height: calc(100% - 180px);
   height: auto;
+  width: $card-width;
   overflow-y: scroll;
   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   z-index: $header;
   color: white;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   &.narrative-mode {
     right: $card-right;
diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss
index 14cfd61..c31b585 100644
--- a/src/scss/narrativecard.scss
+++ b/src/scss/narrativecard.scss
@@ -104,7 +104,7 @@ NARRATIVE INFO
   bottom: $timeline-height;
   right: auto;
   background-color: rgba(0,0,0,0.8);
-  z-index: $overheader;
+  z-index: $header;
 
   &.left {
     right: $card-right + $card-width - 40pt;