Fix unreadable white-on-white text when hovering the active identity page tab
The JS toggle set bg-white/text-ink on the newly active tab but never removed hover:text-white, which was still sitting in that tab's class list from its inactive state (or, for Identity, added by hovering while active) -- hovering the active pill turned its own text white on its own white background. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
@@ -307,6 +307,11 @@
|
|||||||
other.classList.toggle("bg-white", active);
|
other.classList.toggle("bg-white", active);
|
||||||
other.classList.toggle("text-ink", active);
|
other.classList.toggle("text-ink", active);
|
||||||
other.classList.toggle("text-on-dark", !active);
|
other.classList.toggle("text-on-dark", !active);
|
||||||
|
// Without this, a tab that started active (Identity, server-rendered
|
||||||
|
// without hover:text-white) or was activated via a click keeps whatever
|
||||||
|
// hover class its *other* state had -- hovering the active white pill
|
||||||
|
// would turn its own text white too, unreadable on the white background.
|
||||||
|
other.classList.toggle("hover:text-white", !active);
|
||||||
});
|
});
|
||||||
document.querySelectorAll("[data-page-panel]").forEach((panel) => {
|
document.querySelectorAll("[data-page-panel]").forEach((panel) => {
|
||||||
const active = panel.dataset.pagePanel === tab.dataset.pageTab;
|
const active = panel.dataset.pagePanel === tab.dataset.pageTab;
|
||||||
|
|||||||
Reference in New Issue
Block a user