Browse Source

fix: enhance focus styles in select-dropdown and docs url (#3336)

Tony Zhang 7 months ago
parent
commit
1f91086c6b
2 changed files with 9 additions and 1 deletions
  1. 1 1
      webview-ui/src/components/ui/select-dropdown.tsx
  2. 8 0
      webview-ui/src/index.css

+ 1 - 1
webview-ui/src/components/ui/select-dropdown.tsx

@@ -193,7 +193,7 @@ export const SelectDropdown = React.memo(
 						className={cn(
 							"w-full min-w-0 max-w-full inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
 							"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground w-auto",
-							"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+							"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 							disabled
 								? "opacity-50 cursor-not-allowed"
 								: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",

+ 8 - 0
webview-ui/src/index.css

@@ -413,3 +413,11 @@ input[cmdk-input]:focus {
 .codicon[class*="codicon-"] {
 	text-rendering: geometricPrecision !important;
 }
+
+/*
+ * Fix the color of <a> in ChatView
+ */
+
+a:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+}