authorgravatar for 53140620+Xanacas@users.noreply.github.comXanacas <53140620+Xanacas@users.noreply.github.com> 2026-03-14 16:51:37+01:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-14 15:51:37+00:00
log8b8e8b38e57ab782d085e5ecf2ae970f6e796a3f
tree28a3a76c1c487d2d32fc394471cf5a66a5cfe751
parent46ea594f02fb5f1e0b82430ddbd07ccf41a77a0d
signature Signed by PGP key B5690EEEBB952194

fix(web): unify focus ring styles across sidebar and app (#1079)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2 files changed, 6 insertions(+), 6 deletions(-)

apps/web/src/components/Sidebar.logic.ts+1-1
...@@ -51,7 +51,7 @@ export function resolveThreadRowClassName(input: {...@@ -51,7 +51,7 @@ export function resolveThreadRowClassName(input: {
51 isSelected: boolean;51 isSelected: boolean;
52}): string {52}): string {
53 const baseClassName =53 const baseClassName =
54 "h-7 w-full translate-x-0 cursor-default justify-start px-2 text-left select-none focus-visible:ring-0";54 "h-7 w-full translate-x-0 cursor-default justify-start px-2 text-left select-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring";
5555
56 if (input.isSelected && input.isActive) {56 if (input.isSelected && input.isActive) {
57 return cn(57 return cn(
apps/web/src/components/ui/sidebar.tsx+5-5
...@@ -681,7 +681,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {...@@ -681,7 +681,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
681function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">) {681function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">) {
682 const defaultProps = {682 const defaultProps = {
683 className: cn(683 className: cn(
684 "flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",684 "flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
685 "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",685 "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
686 className,686 className,
687 ),687 ),
...@@ -699,7 +699,7 @@ function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentP...@@ -699,7 +699,7 @@ function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentP
699function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button">) {699function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button">) {
700 const defaultProps = {700 const defaultProps = {
701 className: cn(701 className: cn(
702 "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",702 "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
703 // Increases the hit area of the button on mobile.703 // Increases the hit area of the button on mobile.
704 "after:-inset-2 after:absolute md:after:hidden",704 "after:-inset-2 after:absolute md:after:hidden",
705 "group-data-[collapsible=icon]:hidden",705 "group-data-[collapsible=icon]:hidden",
...@@ -750,7 +750,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {...@@ -750,7 +750,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
750}750}
751751
752const sidebarMenuButtonVariants = cva(752const sidebarMenuButtonVariants = cva(
753 "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",753 "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
754 {754 {
755 defaultVariants: {755 defaultVariants: {
756 size: "default",756 size: "default",
...@@ -834,7 +834,7 @@ function SidebarMenuAction({...@@ -834,7 +834,7 @@ function SidebarMenuAction({
834}) {834}) {
835 const defaultProps = {835 const defaultProps = {
836 className: cn(836 className: cn(
837 "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",837 "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
838 // Increases the hit area of the button on mobile.838 // Increases the hit area of the button on mobile.
839 "after:-inset-2 after:absolute md:after:hidden",839 "after:-inset-2 after:absolute md:after:hidden",
840 "peer-data-[size=sm]/menu-button:top-1",840 "peer-data-[size=sm]/menu-button:top-1",
...@@ -946,7 +946,7 @@ function SidebarMenuSubButton({...@@ -946,7 +946,7 @@ function SidebarMenuSubButton({
946}) {946}) {
947 const defaultProps = {947 const defaultProps = {
948 className: cn(948 className: cn(
949 "-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",949 "-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
950 "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",950 "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
951 size === "sm" && "text-xs",951 size === "sm" && "text-xs",
952 size === "md" && "text-sm",952 size === "md" && "text-sm",