fix summary els not looking right on Safari

3 files changed, 7 insertions, 7 deletions

diff --git a/src/page/album.js b/src/page/album.js
index f4578ace..24033b1d 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -549,7 +549,7 @@ export function generateAlbumSidebar(album, currentTrack, {
           html.tag(
             'summary',
             {style: getLinkThemeString(color)},
-            [
+            html.tag('span', [
               listTag === 'ol' &&
                 language.$('albumSidebar.trackList.group.withRange', {
                   group: groupName,
@@ -561,7 +561,7 @@ export function generateAlbumSidebar(album, currentTrack, {
                 language.$('albumSidebar.trackList.group', {
                   group: groupName,
                 }),
-            ]),
+            ])),
           html.tag(listTag,
             listTag === 'ol' ? {start: startIndex + 1} : {},
             tracks.map(trackToListItem)),
diff --git a/src/page/group.js b/src/page/group.js
index 9a48c1d8..81e1728d 100644
--- a/src/page/group.js
+++ b/src/page/group.js
@@ -247,9 +247,10 @@ function generateGroupSidebar(currentGroup, isGallery, {
           [
             html.tag('summary',
               {style: getLinkThemeString(category.color)},
-              language.$('groupSidebar.groupList.category', {
-                category: `<span class="group-name">${category.name}</span>`,
-              })),
+              html.tag('span',
+                language.$('groupSidebar.groupList.category', {
+                  category: `<span class="group-name">${category.name}</span>`,
+                }))),
             html.tag('ul',
               category.groups.map((group) => {
                 const linkKey = (
diff --git a/src/static/site3.css b/src/static/site3.css
index 22a92f84..9128bd81 100644
--- a/src/static/site3.css
+++ b/src/static/site3.css
@@ -342,14 +342,13 @@ body::before {
 .sidebar > details summary {
   margin-top: 0.5em;
   padding-left: 5px;
-  user-select: none;
 }
 
 .sidebar > details summary .group-name {
   color: var(--primary-color);
 }
 
-.sidebar > details summary:hover {
+.sidebar > details summary > span:hover {
   cursor: pointer;
   text-decoration: underline;
   text-decoration-color: var(--primary-color);