UI fixes

Author: abrulic

docs/app/components/backdrop.tsx

@@ -1,9 +1,9 @@
 import { cn } from "~/utils/css"
 
-export const Backdrop = ({ onClose }: { onClose: () => void }) => (
+export const Backdrop = ({ onClose, className }: { onClose: () => void, className?: string }) => (
 	// biome-ignore lint/a11y/useKeyWithClickEvents: We don't need keyboard events for backdrop
 	<div
-		className={cn("fixed inset-0 bg-[var(--color-modal-backdrop)] backdrop-blur-sm transition-opacity duration-200 z-50")}
+		className={cn("fixed inset-0 bg-[var(--color-modal-backdrop)] backdrop-blur-sm transition-opacity duration-200 z-50", className)}
 		onClick={(e) => {
 			if (e.target === e.currentTarget) {
 				onClose()

docs/app/components/code-block/code-block-elements.tsx

@@ -57,7 +57,7 @@ export const PreElement = ({ lines, className = "", ...props }: PreElementProps)
 	<pre
 		{...props}
 		className={cn(
-			"scrollbar scrollbar-thin relative overflow-x-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-code-block-bg)] py-4 font-mono text-[var(--color-code-block-text)] text-xs leading-relaxed sm:text-sm md:text-base [&::-webkit-scrollbar-thumb:hover]:cursor-pointer",
+			"scrollbar scrollbar-thin relative overflow-x-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-code-block-bg)] py-4 font-mono text-[var(--color-code-block-text)] leading-relaxed text-sm md:text-base [&::-webkit-scrollbar-thumb:hover]:cursor-pointer",
 			className
 		)}
 	>

docs/app/components/code-block/copy-button.tsx

@@ -24,7 +24,7 @@ export const CopyButton = ({ lines }: { lines: string[] }) => {
 			onClick={handleCopy}
 			disabled={disabled}
 			className={cn(
-				"absolute top-3 right-3 flex items-center gap-1 rounded px-2 py-1 text-xs transition-all sm:text-sm md:text-base",
+				"absolute top-3 right-3 flex items-center gap-1 rounded px-2 py-1 transition-all text-sm md:text-base",
 				"bg-[var(--color-code-copy-bg)] text-[var(--color-code-copy-text)]",
 				"opacity-0 group-hover:opacity-100",
 				!disabled && "hover:bg-[var(--color-code-copy-hover-bg)]",

docs/app/components/command-k/components/command-k.tsx

@@ -126,7 +126,7 @@ export const CommandK = ({ placeholder, version }: CommandPaletteProps) => {
 				}}
 				placeholder={searchPlaceholder}
 			/>
-			<div className="max-h-96 overflow-y-auto overscroll-contain" aria-label={searchPlaceholder}>
+			<div className="max-h-96 overflow-y-auto overscroll-contain scrollbar" aria-label={searchPlaceholder}>
 				{renderBody()}
 			</div>
 			<ResultsFooter resultsCount={results.length} query={query} />

docs/app/components/command-k/components/empty-state.tsx

@@ -18,7 +18,7 @@ export const EmptyState = ({ query }: { query?: string }) => {
 	return (
 		<div className="space-y-6 px-4 py-8 text-center">
 			<p className="mb-4 font-medium text-[var(--color-empty-text)]">{t("text.start_typing_to_search")}</p>
-			<div className="flex items-center justify-center gap-6 text-[var(--color-empty-text-muted)] text-xs">
+			<div className="flex items-center justify-center gap-6 text-[var(--color-empty-text-muted)] text-sm">
 				<KeyboardHint keys={["↑", "↓"]} label={t("controls.navigate")} />
 				<KeyboardHint keys="↵" label={t("controls.select")} />
 				<KeyboardHint keys="⇥" label={t("controls.cycle")} />

docs/app/components/command-k/components/results-footer-note.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"
 export const ResultsFooterNote = () => {
 	const { t } = useTranslation()
 	return (
-		<span className="text-[var(--color-footer-text)] text-xs opacity-70">
+		<span className="text-[var(--color-footer-text)] text-sm opacity-70">
 			{t("p.search_by")}{" "}
 			<span className="font-semibold">
 				<a href="https://www.forge42.dev/" target="_blank" rel="noopener noreferrer">

docs/app/components/command-k/components/results-footer.tsx

@@ -15,7 +15,7 @@ export const ResultsFooter = ({
 
 	return (
 		<div className={cn("border-[var(--color-footer-border)] border-t bg-[var(--color-footer-bg)] px-4 py-3")}>
-			<div className="flex items-center justify-between text-xs">
+			<div className="flex items-center justify-between text-sm">
 				<span className="font-medium text-[var(--color-footer-text)]">{t("text.result", { count: resultsCount })}</span>
 				<div className="flex items-center gap-4 text-[var(--color-footer-text)]">
 					<KeyboardHint keys={["↑", "↓"]} label={t("controls.navigate")} />

docs/app/components/command-k/components/search-history.tsx

@@ -35,7 +35,7 @@ const ClearHistoryButton = ({ onClear }: Pick<SearchHistoryProps, "onClear">) =>
 			type="button"
 			onClick={onClear}
 			className={cn(
-				"flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors",
+				"flex items-center gap-1 rounded px-2 py-1 text-sm",
 				"text-[var(--color-result-meta)] hover:bg-[var(--color-history-clear-hover-bg)] hover:text-[var(--color-history-clear-hover-text)]"
 			)}
 			title="Clear history"

docs/app/components/command-k/components/search-input.tsx

@@ -35,7 +35,7 @@ export function SearchInput({ value, onChange, placeholder, ref }: SearchInputPr
 			<div className="flex items-center gap-2">
 				<kbd
 					className={cn(
-						"hidden rounded border border-[var(--color-kbd-border)] bg-[var(--color-kbd-bg)] px-2 py-1 font-mono text-xs sm:block",
+						"hidden rounded border-[var(--color-kbd-border)] bg-[var(--color-kbd-bg)] px-2 py-1 font-mono text-sm sm:block",
 						"text-[var(--color-kbd-text)]"
 					)}
 				>

docs/app/components/command-k/components/search-result.tsx

@@ -22,7 +22,7 @@ const ResultIcon = ({
 	return (
 		<div
 			className={cn(
-				"mt-0.5 transition-colors duration-150",
+				"mt-0.5 transition-transform duration-150",
 				isSelected ? "text-[var(--color-result-icon-selected)]" : "text-[var(--color-result-icon)]"
 			)}
 		>
@@ -42,7 +42,7 @@ const ResultTitle = ({
 }) => (
 	<div
 		className={cn(
-			"font-medium leading-snug transition-colors duration-150",
+			"font-medium leading-snug transition-transform duration-150",
 			isSelected ? "text-[var(--color-result-selected-text)]" : "text-[var(--color-result-text)]"
 		)}
 	>
@@ -52,7 +52,7 @@ const ResultTitle = ({
 )
 
 const ResultMetadata = ({ item, matchType }: Pick<SearchResultProps, "item" | "matchType">) => (
-	<div className="mt-2 text-[var(--color-breadcrumb-text)] text-xs">
+	<div className="mt-2 text-[var(--color-breadcrumb-text)] text-sm">
 		{item.title}
 		{matchType === "paragraph" && item.subtitle ? <span> &gt; {item.subtitle}</span> : null}
 	</div>