2 files changed, 41 insertions, 51 deletions

diff --git a/src/content/dependencies/generateArtistGroupContributionsInfo.js b/src/content/dependencies/generateArtistGroupContributionsInfo.js
index 6940053f..96011c3e 100644
--- a/src/content/dependencies/generateArtistGroupContributionsInfo.js
+++ b/src/content/dependencies/generateArtistGroupContributionsInfo.js
@@ -195,50 +195,35 @@ export default {
               : slots.title))),
 
         html.tag('dd', {class: topLevelClasses},
-          html.tag('ul', {class: 'group-contributions-table'},
-            {role: 'list'},
-
-            (slots.sort === 'count'
-              ? stitchArrays({
-                  group: relations.groupLinksSortedByCount,
-                  count: getCounts(data.groupCountsSortedByCount),
-                  duration:
-                    getDurations(
-                      data.groupDurationsSortedByCount,
-                      data.groupDurationsApproximateSortedByCount),
-                }).map(({group, count, duration}) =>
-                    language.encapsulate(capsule, 'item', capsule =>
-                      html.tag('li',
-                        html.tag('div', {class: 'group-contributions-row'}, [
-                          group,
-                          html.tag('span', {class: 'group-contributions-metrics'},
-                            // When sorting by count, duration details aren't necessarily
-                            // available for all items.
-                            (slots.showBothColumns && duration
-                              ? language.$(capsule, 'countDurationAccent', {count, duration})
-                              : language.$(capsule, 'countAccent', {count}))),
-                        ]))))
-
-              : stitchArrays({
-                  group: relations.groupLinksSortedByDuration,
-                  count: getCounts(data.groupCountsSortedByDuration),
-                  duration:
-                    getDurations(
-                      data.groupDurationsSortedByDuration,
-                      data.groupDurationsApproximateSortedByDuration),
-                }).map(({group, count, duration}) =>
-                    language.encapsulate(capsule, 'item', capsule =>
-                      html.tag('li',
-                        html.tag('div', {class: 'group-contributions-row'}, [
-                          group,
-                          html.tag('span', {class: 'group-contributions-metrics'},
-                            // Count details are always available, since they're just the
-                            // number of contributions directly. And duration details are
-                            // guaranteed for every item when sorting by duration.
-                            (slots.showBothColumns
-                              ? language.$(capsule, 'durationCountAccent', {duration, count})
-                              : language.$(capsule, 'durationAccent', {duration}))),
-                        ]))))))),
+          html.tag('table', {class: 'group-contributions-table'},
+            stitchArrays({
+              group: relations.groupLinksSortedByCount,
+              count: getCounts(data.groupCountsSortedByCount),
+              duration:
+                getDurations(
+                  data.groupDurationsSortedByCount,
+                  data.groupDurationsApproximateSortedByCount),
+            }).map(({group, count, duration}) =>
+                language.encapsulate(capsule, 'item', capsule =>
+                  html.tag('tr', [
+                    html.tag('td', {class: 'group-contributions-link-cell'},
+                      html.tag('span', group)),
+
+                    html.tag('td', {class: 'group-contributions-metrics-cell'},
+                      (slots.sort === 'count'
+                          // When sorting by count, duration details aren't necessarily
+                          // available for all items.
+                        ? (slots.showBothColumns && duration
+                            ? language.$(capsule, 'countDurationAccent', {count, duration})
+                            : language.$(capsule, 'countAccent', {count}))
+
+                          // Count details are always available, since they're just the
+                          // number of contributions directly. And duration details are
+                          // guaranteed for every item when sorting by duration.
+                        : (slots.showBothColumns
+                            ? language.$(capsule, 'durationCountAccent', {duration, count})
+                            : language.$(capsule, 'durationAccent', {duration})))),
+                  ]))))),
       ]);
     }),
 };
diff --git a/src/static/css/features.css b/src/static/css/features.css
index b0cb575d..410bf5b9 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -1219,21 +1219,26 @@
   }
 }
 
-/* Group-contributions tables */
+/* Group contributions tables */
 
 @layer layout {
   .group-contributions-table {
-    display: inline-block;
+    margin-left: 40px;
+    border-collapse: collapse;
   }
 
-  .group-contributions-table .group-contributions-row {
-    display: flex;
-    justify-content: space-between;
+  .group-contributions-table td {
+    padding: 0 0 4px 0;
+  }
+
+  .group-contributions-table .group-contributions-link-cell {
+    display: list-item;
   }
 
-  .group-contributions-table .group-contributions-metrics {
-    margin-left: 1.5ch;
+  .group-contributions-table .group-contributions-metrics-cell {
+    padding-left: 1.5ch;
     white-space: nowrap;
+    text-align: right;
   }
 }