From 1294499d0f89b7016cb8aef55f0aa7f99fb7ee51 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 6 Jan 2026 16:56:51 +0100
Subject: [PATCH] fix: themes ui list shows clipped when selected or hovered

closes #7318
---
 frontend/src/styles/settings.scss |  1 -
 frontend/src/ts/pages/settings.ts | 14 +++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index 2dcc02cab..f37ed4b68 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -50,7 +50,6 @@
   .settingsGroup {
     display: grid;
     gap: 2rem;
-    overflow: hidden;
     &.quickNav {
       justify-content: center;
       .links {
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index a95237020..125c18d18 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/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",
     );