From 783121c06e388c2d496fd68c59421fdff7d5620f Mon Sep 17 00:00:00 2001
From: Rahul A Mistry <149420892+ProdigyRahul@users.noreply.github.com>
Date: Mon, 26 Jan 2026 22:28:29 +0530
Subject: fix(ui): use focus-visible instead of focus to prevent sticky hover
 effect on click (#10651)

---
 packages/app/src/components/session/session-header.tsx | 2 +-
 packages/app/src/pages/layout.tsx                      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/app/src')

diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index e4a64b339..90daa971d 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -131,7 +131,7 @@ export function SessionHeader() {
           <Portal mount={mount()}>
             <button
               type="button"
-              class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
+              class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
               onClick={() => command.trigger("file.open")}
               aria-label={language.t("session.header.searchFiles")}
             >
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 87538d72e..7ad97a989 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -1696,7 +1696,7 @@ export default function Layout(props: ParentProps) {
       <div
         data-session-id={props.session.id}
         class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3
-               hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
+               hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
       >
         <Show
           when={hoverEnabled()}
@@ -1819,7 +1819,7 @@ export default function Layout(props: ParentProps) {
     )
 
     return (
-      <div class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
+      <div class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
         <Show
           when={!tooltip()}
           fallback={
-- 
cgit v1.2.3