4 files changed, 8 insertions, 4 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 0d72429..3c2d5b8 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -59,6 +59,7 @@
   line-height: 1.3;
   font-family: "Freight Text", serif;
   padding: 0.25rem 0;
+  margin-bottom: 3rem;
 }
 .nav-footnotes-gradient {
   position: absolute;
@@ -67,6 +68,7 @@
   width: 100%;
   height: 2rem;
   background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0));
+  pointer-events: none
 }
 .nav-footnotes .note-element {
   display: flex;
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index fd48f55..8843a09 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -32,7 +32,8 @@
   background: black;
   padding: 0;
 }
-.sections-nav.viewer-nav > .nav-row > div {
+.sections-nav.viewer-nav > .nav-row > div.link-element,
+.sections-nav.viewer-nav > .nav-row > div.link {
   width: auto;
 }
 .sections-nav .link {
@@ -164,4 +165,5 @@
   position: relative;
   left: -0.5rem;
   padding: 0.5rem 0 0.2rem 0;
+  cursor: pointer;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
index f8c6cba..fa5142f 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -30,7 +30,7 @@ class ViewerSectionsFootnotes extends Component {
   }
   scrollToFootnote() {
     const { currentFootnote } = this.props
-    const id = currentFootnote.footnote_id - 1
+    const id = currentFootnote - 1
     const pos = this.state.scrollPositions[id]
     this.scrollRef.current.scrollTo(0, pos - 5)
   }
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index 1c0f49d..d0f1dbd 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -15,7 +15,7 @@ class ViewerSectionsNav extends Component {
       <div className="viewer-nav sections-nav">
         <div className='nav-row'>
 
-          <div className="checklist-element" onClick={() => {
+          <div className="checklist-element link-element" onClick={() => {
               actions.viewer.hideNavComponent('credits')
               actions.viewer.toggleNavComponent('checklist')
             }}>
@@ -25,7 +25,7 @@ class ViewerSectionsNav extends Component {
             </div>
           </div>
 
-          <div className="credits-element" onClick={() => {
+          <div className="credits-element link-element" onClick={() => {
               actions.viewer.hideNavComponent('checklist')
               actions.viewer.toggleNavComponent('credits')
             }}>