fix nav wrapping issues at small widths

3 files changed, 22 insertions, 4 deletions

diff --git a/src/page/album.js b/src/page/album.js
index 472d89f1..030b7778 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -464,7 +464,10 @@ export function generateAlbumNavLinks(album, currentTrack, {
 }
 
 export function generateAlbumChronologyLinks(album, currentTrack, {generateChronologyLinks}) {
-    return html.tag('div', {class: 'nav-chronology-links'}, [
+    return html.tag('div', {
+        [html.onlyIfContent]: true,
+        class: 'nav-chronology-links',
+    }, [
         currentTrack && generateChronologyLinks(currentTrack, {
             contribKey: 'artistContribs',
             getThings: artist => [...artist.tracksAsArtist, ...artist.tracksAsContributor],
diff --git a/src/static/site.css b/src/static/site.css
index 7d1f4747..553172a5 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -121,12 +121,22 @@ a:hover {
 
 #header {
     display: grid;
-    grid-template-columns: max-content 3fr;
+}
+
+#header.nav-has-main-links.nav-has-content {
+    grid-template-columns: 2.5fr 3fr;
     grid-template-areas:
         "main-links content"
         "bottom-row content";
 }
 
+#header.nav-has-main-links:not(.nav-has-content) {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+        "main-links"
+        "bottom-row";
+}
+
 .nav-main-links {
     grid-area: main-links;
     margin-right: 20px;
diff --git a/src/upd8.js b/src/upd8.js
index d1077fbb..d9bca28f 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -1013,12 +1013,17 @@ writePage.html = (pageInfo, {
     const navHTML = html.tag('nav', {
         [html.onlyIfContent]: true,
         id: 'header',
-        class: nav.classes
+        class: [
+            ...nav.classes,
+            links.length && 'nav-has-main-links',
+            nav.content && 'nav-has-content',
+            nav.bottomRowContent && 'nav-has-bottom-row',
+        ],
     }, [
         links.length && html.tag('div',
             {class: ['nav-main-links', ...nav.linkContainerClasses]},
             navLinkParts),
-        html.tag('div', {class: 'nav-content'}, nav.content),
+        nav.content && html.tag('div', {class: 'nav-content'}, nav.content),
         nav.bottomRowContent && html.tag('div', {class: 'nav-bottom-row'}, nav.bottomRowContent),
     ]);