2 files changed, 38 insertions, 17 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 622c3ac1..c068c07d 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -510,16 +510,15 @@ a:not([href]):hover {
   display: none;
 }
 
-#header .scoped-chronology p {
-  margin-top: 0;
-  margin-bottom: 0.25em;
-}
-
-#header .scoped-chronology-switcher {
+#header .scoped-chronology-switcher .switcher-link {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
 
+#header .scoped-chronology-switcher > div {
+  margin-left: 20px;
+}
+
 #secondary-nav {
   text-align: center;
 }
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 5611a349..fe45ba16 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -2954,7 +2954,7 @@ clientSteps.addPageListeners.push(addAdditionalNamesBoxListeners);
 
 const scopedChronologyLinksInfo = initInfo('scopedChronologyLinksInfo', {
   containers: null,
-  switchers: null,
+  switcherLinks: null,
   modes: null,
 
   session: {
@@ -2965,12 +2965,18 @@ const scopedChronologyLinksInfo = initInfo('scopedChronologyLinksInfo', {
 function getScopedChronologyLinksReferences() {
   const info = scopedChronologyLinksInfo;
 
+  const switcher =
+    document.querySelector('.scoped-chronology-switcher');
+
+  if (!switcher) {
+    return;
+  }
+
   info.containers =
-    Array.from(document.querySelectorAll('.scoped-chronology'));
+    Array.from(switcher.querySelectorAll(':scope > div'));
 
-  info.switchers =
-    info.containers
-      .map(container => container.querySelector('.scoped-chronology-switcher'));
+  info.switcherLinks =
+    Array.from(switcher.querySelectorAll('.switcher-link'));
 
   info.modes =
     info.containers
@@ -2984,21 +2990,29 @@ function addScopedChronologyLinksPageHandlers() {
   const info = scopedChronologyLinksInfo;
   const {session} = scopedChronologyLinksInfo;
 
-  for (const [index, switcher] of info.switchers.entries()) {
-    const currentContainer =
-      info.containers[index];
-
+  for (const [index, {
+    container: currentContainer,
+    switcherLink: currentSwitcherLink,
+  }] of stitchArrays({
+    container: info.containers,
+    switcherLink: info.switcherLinks,
+  }).entries()) {
     const nextContainer =
       atOffset(info.containers, index, +1, {wrap: true});
 
+    const nextSwitcherLink =
+      atOffset(info.switcherLinks, index, +1, {wrap: true});
+
     const nextMode =
       atOffset(info.modes, index, +1, {wrap: true});
 
-    switcher.addEventListener('click', domEvent => {
+    currentSwitcherLink.addEventListener('click', domEvent => {
       domEvent.preventDefault();
 
       cssProp(currentContainer, 'display', 'none');
+      cssProp(currentSwitcherLink, 'display', 'none');
       cssProp(nextContainer, 'display', 'block');
+      cssProp(nextSwitcherLink, 'display', 'inline');
 
       session.selectedMode = nextMode;
     });
@@ -3013,11 +3027,19 @@ function mutateScopedChronologyLinksContent() {
   if (info.modes.includes(selectedMode)) {
     const selectedIndex = info.modes.indexOf(selectedMode);
 
-    for (const [index, container] of info.containers.entries()) {
+    for (const [index, {
+      container,
+      switcherLink,
+    }] of stitchArrays({
+      container: info.containers,
+      switcherLink: info.switcherLinks,
+    }).entries()) {
       if (index === selectedIndex) {
         cssProp(container, 'display', 'block');
+        cssProp(switcherLink, 'display', 'inline');
       } else {
         cssProp(container, 'display', 'none');
+        cssProp(switcherLink, 'display', 'none');
       }
     }
   }