fix: themes ui list shows clipped when selected or hovered

closes #7318

Author: Miodec

frontend/src/styles/settings.scss

@@ -50,7 +50,6 @@
   .settingsGroup {
     display: grid;
     gap: 2rem;
-    overflow: hidden;
     &.quickNav {
       justify-content: center;
       .links {

frontend/src/ts/pages/settings.ts

@@ -753,26 +753,30 @@ function toggleSettingsGroup(groupName: string): void {
 
   const groupEl = qs(`.pageSettings .settingsGroup.${groupName}`);
   if (!groupEl?.hasClass("slideup")) {
-    groupEl?.animate({
+    groupEl?.setStyle({ overflow: "hidden" })?.animate({
       height: 0,
       duration: 250,
       onComplete: () => {
-        groupEl?.hide();
+        groupEl
+          ?.hide()
+          .setStyle({ height: "", overflow: "" })
+          .addClass("slideup");
       },
     });
-    groupEl?.addClass("slideup");
     $(`.pageSettings .sectionGroupTitle[group=${groupName}]`).addClass(
       "rotateIcon",
     );
   } else {
     groupEl?.show();
-    groupEl?.setStyle({ height: "" });
+    groupEl?.setStyle({ height: "", overflow: "hidden" });
     const height = groupEl.getOffsetHeight();
     groupEl?.animate({
       height: [0, height],
       duration: 250,
+      onComplete: () => {
+        groupEl?.setStyle({ height: "", overflow: "" }).removeClass("slideup");
+      },
     });
-    groupEl?.removeClass("slideup");
     $(`.pageSettings .sectionGroupTitle[group=${groupName}]`).removeClass(
       "rotateIcon",
     );