From 7d27bcbacb8d96e74785362409907376db4c10bd Mon Sep 17 00:00:00 2001
From: Hein Thant Maung Maung <me@heinthanth.com>
Date: Wed, 7 Oct 2026 13:54:53 +0700
Subject: [PATCH] fix(lyrics-plus): fix a bug that mode switch top bar is not
 visible

---
 modules/lyrics-plus/index.scss  | 15 +++++++++++++--
 modules/lyrics-plus/tab-bar.tsx | 17 ++++-------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/modules/lyrics-plus/index.scss b/modules/lyrics-plus/index.scss
index 22f8f33..ba138e6 100644
--- a/modules/lyrics-plus/index.scss
+++ b/modules/lyrics-plus/index.scss
@@ -315,7 +315,6 @@
 }
 
 .lyrics-tabBar-headerItem {
-	-webkit-app-region: no-drag;
 	display: inline-block;
 	pointer-events: auto;
 }
@@ -348,8 +347,20 @@
 	content: "• ";
 }
 
+.lyrics-plus-topbar-content {
+	align-self: start;
+	grid-area: 1 / 1 / -1 / -1;
+	padding: 16px 24px 0;
+	pointer-events: none;
+	z-index: 2;
+}
+
+#lyrics-fullscreen-container .lyrics-plus-topbar-content,
+.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-plus-topbar-content {
+	display: none;
+}
+
 .lyrics-tabBar-nav {
-	-webkit-app-region: drag;
 	pointer-events: none;
 	width: 100%;
 }
diff --git a/modules/lyrics-plus/tab-bar.tsx b/modules/lyrics-plus/tab-bar.tsx
index 8a4656f..dcb4507 100644
--- a/modules/lyrics-plus/tab-bar.tsx
+++ b/modules/lyrics-plus/tab-bar.tsx
@@ -123,19 +123,10 @@ export const TopBarContent = ({ links, activeLink, lockLink, switchCallback, loc
 	);
 };
 
-export const TabBarContext = ({ children }: { children?: ReactTypes.ReactNode }) => {
-	const content = react.createElement(
-		"div",
-		{
-			className: "main-topBar-topbarContent lyrics-plus-topbar-content",
-		},
-		children,
-	);
-	// The classic app portaled the mode switcher into the client top bar. v3 has
-	// no such wrapper, so fall back to rendering it inline within the route.
-	const target = document.querySelector(".main-topBar-topbarContentWrapper");
-	return target ? client.reactDOM.createPortal(content, target) : content;
-};
+// The classic app portaled the mode switcher into the client top bar, but the
+// lyrics container paints over that bar, so it always renders inline instead.
+export const TabBarContext = ({ children }: { children?: ReactTypes.ReactNode }) =>
+	react.createElement("div", { className: "lyrics-plus-topbar-content" }, children);
 
 export const TabBar = react.memo(
 	({