Commit ed809f7ad274ebccdfbf029ccfd7ff2582fd486a | the-knife

author	t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> 2026-09-25 14:29:42-07:00
committer	GitHub <noreply@github.com> 2026-09-25 14:29:42-07:00
log	ed809f7ad274ebccdfbf029ccfd7ff2582fd486a
tree	71f934bc76f1952cf70eb4a287ce9ffacccec81c
parent	2598ce7a5ab0b25e32e0b67b084a9ec23cd8144f
signature	Signed by PGP key B5690EEEBB952194

Co-authored-by: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>

8 files changed, 12 insertions(+), 10 deletions(-)

apps/web/src/components/Sidebar.tsx+1-1

...	...	@@ -1965,7 +1965,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
1965	1965	showBadge={showInstanceBadge}
1966	1966	// Glyph dims, badge stays saturated; offset matches the composer trigger.
1967	1967	iconClassName="size-3.5 opacity-60"
1968		badgeClassName="right-[-0.1875rem] bottom-[-0.1875rem] h-3 min-w-3 px-0.5 text-3xs"
	1968	badgeClassName="right-[-0.1875rem] bottom-[-0.1875rem] h-3 min-w-3 px-0.5 text-5xs"
1969	1969	/>
1970	1970	</span>
1971	1971	) : null}

apps/web/src/components/chat/ModelPickerSidebar.tsx+1-1

...	...	@@ -210,7 +210,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
210	210	? "var(--background)"
211	211	: "color-mix(in oklab, var(--muted) 30%, transparent)"
212	212	}
213		{...(entry.accentColor ? { badgeClassName: "h-3 min-w-3 px-0.5 text-3xs" } : {})}
	213	{...(entry.accentColor ? { badgeClassName: "h-3 min-w-3 px-0.5 text-5xs" } : {})}
214	214	/>
215	215	{showNewBadge ? (
216	216	<span className={NEW_BADGE_CLASS} aria-hidden>

apps/web/src/components/chat/ProviderInstanceIcon.tsx+1-1

...	...	@@ -55,7 +55,7 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
55	55	{props.showBadge ? (
56	56	<span
57	57	className={cn(
58		"pointer-events-none absolute right-0 bottom-0 z-10 flex h-3.5 min-w-3.5 items-center justify-center rounded-full border px-0.5 text-3xs font-semibold leading-none shadow-sm",
	58	"pointer-events-none absolute right-0 bottom-0 z-10 flex h-3.5 min-w-3.5 items-center justify-center rounded-full border px-0.5 text-4xs font-semibold leading-none shadow-sm",
59	59	props.accentColor
60	60	? "bg-(--provider-accent) text-white"
61	61	: "bg-card text-muted-foreground",

apps/web/src/components/chat/ProviderModelPicker.test.tsx-3

...	...	@@ -172,8 +172,5 @@ describe("ProviderModelPicker", () => {
172	172	);
173	173
174	174	expect(markup).toContain(">CP</span>");
175		expect(markup).toContain("size-4");
176		expect(markup).toContain("h-3");
177		expect(markup).toContain("text-3xs");
178	175	});
179	176	});

apps/web/src/components/chat/ProviderModelPicker.tsx+1-1

...	...	@@ -250,7 +250,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
250	250	iconClassName={cn("size-4", props.activeProviderIconClassName)}
251	251	indicatorBackground={props.instanceIndicatorBackground ?? "var(--contrast-input)"}
252	252	badgeClassName={cn(
253		"right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-3xs",
	253	"right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs",
254	254	size === "xs" && "shadow-none",
255	255	)}
256	256	/>

apps/web/src/components/settings/ProviderInstanceCard.tsx+1-1

...	...	@@ -570,7 +570,7 @@ export function ProviderInstanceCard({
570	570	showBadge={Boolean(accentColor)}
571	571	className="size-5"
572	572	iconClassName="size-4 text-foreground/80"
573		badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-3xs"
	573	badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs"
574	574	/>
575	575	) : FallbackIconComponent ? (
576	576	<span className="inline-flex size-5 shrink-0 items-center justify-center">

apps/web/src/index.css+6-1

...	...	@@ -161,12 +161,17 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
161	161	@theme inline {
162	162	/* Two steps below Tailwind's text-xs (12px) for dense UI: metadata rows,
163	163	badges, counters, keyboard hints and diagnostics tables. 2xs is 11px,
164		3xs is 10px and the floor of the scale. Registered with tailwind-merge in
	164	3xs is 10px. Provider icon overlays use 4xs (8px) and 5xs (7px) to fit
	165	their smaller badges. Registered with tailwind-merge in
165	166	lib/utils.ts so cn() treats them as font sizes, not colours. */
166	167	--text-2xs: 0.6875rem;
167	168	--text-2xs--line-height: calc(1 / 0.6875);
168	169	--text-3xs: 0.625rem;
169	170	--text-3xs--line-height: calc(0.875 / 0.625);
	171	--text-4xs: 0.5rem;
	172	--text-4xs--line-height: 1;
	173	--text-5xs: 0.4375rem;
	174	--text-5xs--line-height: 1;
170	175	/* Motion. drawer is the decelerating curve for surfaces that slide or pop in
171	176	(composer context, pills). */
172	177	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

apps/web/src/lib/utils.ts+1-1

...	...	@@ -6,7 +6,7 @@ import { DraftId } from "../composerDraftStore";
6	6
7	7	// The theme's extra font sizes (index.css). Unregistered, tailwind-merge reads
8	8	// text-2xs as a colour and drops it next to text-muted-foreground.
9		const twMerge = extendTailwindMerge({ extend: { theme: { text: ["2xs", "3xs"] } } });
	9	const twMerge = extendTailwindMerge({ extend: { theme: { text: ["2xs", "3xs", "4xs", "5xs"] } } });
10	10
11	11	export function cn(...inputs: CxOptions) {
12	12	return twMerge(cx(inputs));