1 files changed, 12 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
index 58695e0..aa105d1 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
@@ -19,24 +19,34 @@ class ChecklistDropdown extends Component {
   render() {
     const { sections, checklistSection } = this.props
     const { open } = this.state
+    const showingAll = checklistSection === 'all'
+    let dropdownHeight = sections.length * 2
+    if (!showingAll) {
+      dropdownHeight += 2
+    }
     return (
       <div className="checklist-dropdown-column">
         <div className="checklist-dropdown-container">
           <div className="checklist-dropdown" onClick={() => this.handleOpen()}>
-            {checklistSection === 'all' ? 'View All' : 'Section ' + ROMAN_NUMERALS[checklistSection]}
+            {showingAll ? 'View All' : 'Section ' + ROMAN_NUMERALS[checklistSection]}
             <div className='arrow-box'>
               <Arrow type={open ? 'up' : 'down'} />
             </div>
           </div>
           <div
             className={open ? "checklist-dropdown-options open" : "checklist-dropdown-options"}
-            style={{ height: open ? ((sections.length * 2) + 'rem') : 0 }}
+            style={{ height: open ? ((dropdownHeight) + 'rem') : 0 }}
           >
             {sections.map(section => (
               <div key={section.index} onClick={() => this.handleSelect(section.index)}>
                 {'Section '}{ROMAN_NUMERALS[section.index]}
               </div>
             ))}
+            {!showingAll &&
+              <div onClick={() => this.handleSelect('all')}>
+                {'View All'}
+              </div>
+            }
           </div>
         </div>
       </div>