2 files changed, 55 insertions, 44 deletions

diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index 01150844..f7f04f16 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -62,6 +62,47 @@ export default {
               .slot('color', slots.color),
 
           language.encapsulate(entryCapsule, 'title', titleCapsule => [
+            html.tag('span', {class: 'commentary-entry-heading-text'},
+              language.encapsulate(titleCapsule, workingCapsule => {
+                const workingOptions = {};
+
+                workingOptions.artists =
+                  html.tag('span', {class: 'commentary-entry-artists'},
+                    (relations.artistsContent
+                      ? relations.artistsContent.slot('mode', 'inline')
+                   : relations.artistLinks
+                      ? language.formatConjunctionList(relations.artistLinks)
+                      : language.$(titleCapsule, 'noArtists')));
+
+                const accent =
+                  html.tag('span', {class: 'commentary-entry-accent'},
+                    {[html.onlyIfContent]: true},
+
+                    language.encapsulate(titleCapsule, 'accent', accentCapsule =>
+                      language.encapsulate(accentCapsule, workingCapsule => {
+                        const workingOptions = {};
+
+                        if (relations.annotationContent) {
+                          workingCapsule += '.withAnnotation';
+                          workingOptions.annotation =
+                            relations.annotationContent.slot('mode', 'inline');
+                        }
+
+                        if (workingCapsule === accentCapsule) {
+                          return html.blank();
+                        } else {
+                          return language.$(workingCapsule, workingOptions);
+                        }
+                      })));
+
+                if (!html.isBlank(accent)) {
+                  workingCapsule += '.withAccent';
+                  workingOptions.accent = accent;
+                }
+
+                return language.$(workingCapsule, workingOptions);
+              })),
+
             relations.textWithTooltip.slots({
               attributes: {class: 'commentary-date'},
 
@@ -91,46 +132,6 @@ export default {
                       }),
                   }),
             }),
-
-            language.encapsulate(titleCapsule, workingCapsule => {
-              const workingOptions = {};
-
-              workingOptions.artists =
-                html.tag('span', {class: 'commentary-entry-artists'},
-                  (relations.artistsContent
-                    ? relations.artistsContent.slot('mode', 'inline')
-                 : relations.artistLinks
-                    ? language.formatConjunctionList(relations.artistLinks)
-                    : language.$(titleCapsule, 'noArtists')));
-
-              const accent =
-                html.tag('span', {class: 'commentary-entry-accent'},
-                  {[html.onlyIfContent]: true},
-
-                  language.encapsulate(titleCapsule, 'accent', accentCapsule =>
-                    language.encapsulate(accentCapsule, workingCapsule => {
-                      const workingOptions = {};
-
-                      if (relations.annotationContent) {
-                        workingCapsule += '.withAnnotation';
-                        workingOptions.annotation =
-                          relations.annotationContent.slot('mode', 'inline');
-                      }
-
-                      if (workingCapsule === accentCapsule) {
-                        return html.blank();
-                      } else {
-                        return language.$(workingCapsule, workingOptions);
-                      }
-                    })));
-
-              if (!html.isBlank(accent)) {
-                workingCapsule += '.withAccent';
-                workingOptions.accent = accent;
-              }
-
-              return language.$(workingCapsule, workingOptions);
-            }),
           ])),
 
         html.tag('blockquote', {class: 'commentary-entry-body'},
diff --git a/src/static/css/site.css b/src/static/css/site.css
index ede644a4..592114cb 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1180,22 +1180,32 @@ ul.image-details li {
 }
 
 .commentary-entry-heading {
+  display: flex;
+  flex-direction: row;
+
   margin-left: 15px;
-  padding-left: calc(5px + 1.25ch);
-  text-indent: -1.25ch;
+  padding-left: 5px;
   max-width: 625px;
   padding-bottom: 0.2em;
+
   border-bottom: 1px solid var(--dim-color);
 }
 
+.commentary-entry-heading-text {
+  flex-grow: 1;
+  padding-left: 1.25ch;
+  text-indent: -1.25ch;
+}
+
 .commentary-entry-accent {
   font-style: oblique;
 }
 
 .commentary-entry-heading .commentary-date {
-  float: right;
-  text-indent: 0;
+  flex-shrink: 0;
+
   margin-left: 0.75ch;
+  align-self: flex-end;
 }
 
 .commentary-entry-heading .commentary-date time {