From d88c7825418740206b4e51411c5fd158cb5d89b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ng=C3=B4=20Th=C6=B0=E1=BB=A3ng?=
 <83950837+nguyenngothuong@users.noreply.github.com>
Date: Sat, 14 Mar 2026 05:16:25 +0700
Subject: [PATCH] fix: project label text hidden by selection overlay in dark
 mode (#648)

In NavRail's ProjectTile, the expanded active item renders an absolutely
positioned background overlay (--interactive-selection) that visually
covers the text label. The label span was missing 'relative z-10',
unlike NavRailActionButton which correctly uses it.

Fixes text being invisible on selected project in dark themes
(nord-dark, dracula-dark, monokai-dark, gruvbox-dark, etc.)
---
 packages/ui/src/components/layout/NavRail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/layout/NavRail.tsx b/packages/ui/src/components/layout/NavRail.tsx
index 1b5116d6..fd8bf942 100644
--- a/packages/ui/src/components/layout/NavRail.tsx
+++ b/packages/ui/src/components/layout/NavRail.tsx
@@ -355,7 +355,7 @@ const ProjectTile: React.FC<{
       <span
         aria-hidden={!projectTextVisible}
         className={cn(
-          'min-w-0 truncate text-left text-[13px] leading-tight transition-opacity duration-[180ms] ease-in-out',
+          'relative z-10 min-w-0 truncate text-left text-[13px] leading-tight transition-opacity duration-[180ms] ease-in-out',
           expanded ? 'flex-1' : 'w-0 flex-none',
           projectTextVisible ? 'opacity-100' : 'opacity-0',
           isActive && expanded ? 'font-medium text-[var(--interactive-selection-foreground)]' : 'text-[var(--surface-foreground)]',