Back arrow headers elsewhere

webview-ui/src/components/history/HistoryView.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useState } from "react"
+import { ArrowLeft } from "lucide-react"
 import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
 import { Virtuoso } from "react-virtuoso"
@@ -81,27 +82,34 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 	return (
 		<Tab>
 			<TabHeader className="flex flex-col gap-2">
-				<div className="flex justify-between items-center">
-					<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
-					<div className="flex gap-2">
-						<StandardTooltip
-							content={
-								isSelectionMode
-									? `${t("history:exitSelectionMode")}`
-									: `${t("history:enterSelectionMode")}`
-							}>
+				<div className="flex items-center justify-between gap-2">
+					<div className="flex items-center gap-2">
+						<StandardTooltip content={t("history:done")}>
 							<Button
-								variant={isSelectionMode ? "primary" : "secondary"}
-								onClick={toggleSelectionMode}
-								data-testid="toggle-selection-mode-button">
-								<span
-									className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
-								/>
-								{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
+								variant="ghost"
+								className="px-1.5 -ml-2"
+								onClick={onDone}
+								aria-label={t("history:done")}>
+								<ArrowLeft />
+								<span className="sr-only">{t("history:done")}</span>
 							</Button>
 						</StandardTooltip>
-						<Button onClick={onDone}>{t("history:done")}</Button>
+						<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
 					</div>
+					<StandardTooltip
+						content={
+							isSelectionMode ? `${t("history:exitSelectionMode")}` : `${t("history:enterSelectionMode")}`
+						}>
+						<Button
+							variant={isSelectionMode ? "primary" : "secondary"}
+							onClick={toggleSelectionMode}
+							data-testid="toggle-selection-mode-button">
+							<span
+								className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
+							/>
+							{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
+						</Button>
+					</StandardTooltip>
 				</div>
 				<div className="flex flex-col gap-2">
 					<VSCodeTextField

webview-ui/src/components/history/__tests__/HistoryView.spec.tsx

@@ -49,15 +49,15 @@ describe("HistoryView", () => {
 
 		// Check for main UI elements
 		expect(screen.getByText("history:history")).toBeInTheDocument()
-		expect(screen.getByText("history:done")).toBeInTheDocument()
+		expect(screen.getByRole("button", { name: "history:done" })).toBeInTheDocument()
 		expect(screen.getByPlaceholderText("history:searchPlaceholder")).toBeInTheDocument()
 	})
 
-	it("calls onDone when done button is clicked", () => {
+	it("calls onDone when back button is clicked", () => {
 		const onDone = vi.fn()
 		render(<HistoryView onDone={onDone} />)
 
-		const doneButton = screen.getByText("history:done")
+		const doneButton = screen.getByRole("button", { name: "history:done" })
 		fireEvent.click(doneButton)
 
 		expect(onDone).toHaveBeenCalled()

webview-ui/src/components/marketplace/MarketplaceView.tsx

@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo, useContext } from "react"
 import { Button } from "@/components/ui/button"
+import { StandardTooltip } from "@/components/ui"
+import { ArrowLeft } from "lucide-react"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 import { MarketplaceViewStateManager } from "./MarketplaceViewStateManager"
 import { useStateManager } from "./useStateManager"
@@ -99,16 +101,19 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
 		<TooltipProvider delayDuration={300}>
 			<Tab>
 				<TabHeader className="flex flex-col sticky top-0 z-10 px-3 py-2">
-					<div className="flex justify-between items-center px-2">
-						<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
-						<div className="flex gap-2 items-center">
-							<Button
-								variant="primary"
-								onClick={() => {
-									onDone?.()
-								}}>
-								{t("marketplace:done")}
-							</Button>
+					<div className="flex items-center justify-between gap-2 px-2">
+						<div className="flex items-center gap-2">
+							<StandardTooltip content={t("marketplace:done")}>
+								<Button
+									variant="ghost"
+									className="px-1.5 -ml-2"
+									onClick={() => onDone?.()}
+									aria-label={t("marketplace:done")}>
+									<ArrowLeft />
+									<span className="sr-only">{t("marketplace:done")}</span>
+								</Button>
+							</StandardTooltip>
+							<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
 						</div>
 					</div>
 

webview-ui/src/components/settings/SettingsSearchInput.tsx

@@ -38,8 +38,8 @@ export function SettingsSearchInput({
 				onKeyDown={onKeyDown}
 				placeholder={t("settings:search.placeholder")}
 				className={cn(
-					"pl-6 w-[0px] border-none focus:border-vscode-input-border focus:pl-8 focus:min-w-[132px] focus:w-full",
-					value && "pr-4 min-w-[148px]",
+					"pl-6 w-[0px] border-none focus:border-vscode-input-border focus:pl-8 focus:min-w-[110px] focus:w-full",
+					value && "pr-4 pl-8 min-w-[108px]",
 				)}
 			/>
 			{value && (