From ed809f7ad274ebccdfbf029ccfd7ff2582fd486a Mon Sep 17 00:00:00 2001 From: "t3-code[bot]" <269035359+t3-code[bot]@users.noreply.github.com> Date: Fri, 25 Sep 2026 14:29:42 -0700 Subject: [PATCH] fix(web): restore compact provider instance badges (#13700) Co-authored-by: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> --- apps/web/src/components/Sidebar.tsx | 2 +- apps/web/src/components/chat/ModelPickerSidebar.tsx | 2 +- apps/web/src/components/chat/ProviderInstanceIcon.tsx | 2 +- apps/web/src/components/chat/ProviderModelPicker.test.tsx | 3 --- apps/web/src/components/chat/ProviderModelPicker.tsx | 2 +- apps/web/src/components/settings/ProviderInstanceCard.tsx | 2 +- apps/web/src/index.css | 7 ++++++- apps/web/src/lib/utils.ts | 2 +- 8 files changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx index 7cbae330c318c9443af4afd23bf6ae4d48ef7128..4b8027c141088c779c3afe1f755cc2aa393b8eeb 100644 --- a/apps/web/src/components/Sidebar.tsx +++ b/apps/web/src/components/Sidebar.tsx @@ -1965,7 +1965,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { showBadge={showInstanceBadge} // Glyph dims, badge stays saturated; offset matches the composer trigger. iconClassName="size-3.5 opacity-60" - badgeClassName="right-[-0.1875rem] bottom-[-0.1875rem] h-3 min-w-3 px-0.5 text-3xs" + badgeClassName="right-[-0.1875rem] bottom-[-0.1875rem] h-3 min-w-3 px-0.5 text-5xs" /> ) : null} diff --git a/apps/web/src/components/chat/ModelPickerSidebar.tsx b/apps/web/src/components/chat/ModelPickerSidebar.tsx index 80b06cbc680d5819441f0c293bf65a21a545b64c..d043c053a073864042d776e09aa0b17ffe966969 100644 --- a/apps/web/src/components/chat/ModelPickerSidebar.tsx +++ b/apps/web/src/components/chat/ModelPickerSidebar.tsx @@ -210,7 +210,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: { ? "var(--background)" : "color-mix(in oklab, var(--muted) 30%, transparent)" } - {...(entry.accentColor ? { badgeClassName: "h-3 min-w-3 px-0.5 text-3xs" } : {})} + {...(entry.accentColor ? { badgeClassName: "h-3 min-w-3 px-0.5 text-5xs" } : {})} /> {showNewBadge ? ( diff --git a/apps/web/src/components/chat/ProviderInstanceIcon.tsx b/apps/web/src/components/chat/ProviderInstanceIcon.tsx index 4f6d83eb92bfdfaff8231aab4fa3900be927a4da..6c36087a1e290c9b575a66f99d18d38923c2a128 100644 --- a/apps/web/src/components/chat/ProviderInstanceIcon.tsx +++ b/apps/web/src/components/chat/ProviderInstanceIcon.tsx @@ -55,7 +55,7 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: { {props.showBadge ? ( { ); expect(markup).toContain(">CP"); - expect(markup).toContain("size-4"); - expect(markup).toContain("h-3"); - expect(markup).toContain("text-3xs"); }); }); diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx index c24a3189435aba9c75a3fa8b5ddf9a1b55fb829e..fbc17896537839950b38b6b40e373f88ca47a3b2 100644 --- a/apps/web/src/components/chat/ProviderModelPicker.tsx +++ b/apps/web/src/components/chat/ProviderModelPicker.tsx @@ -250,7 +250,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: { iconClassName={cn("size-4", props.activeProviderIconClassName)} indicatorBackground={props.instanceIndicatorBackground ?? "var(--contrast-input)"} badgeClassName={cn( - "right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-3xs", + "right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs", size === "xs" && "shadow-none", )} /> diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx index 4e2405c138b172772dbc80099a3a370296353600..ff0546f5012dd0bc5decdd0749f56e284f4c9a6b 100644 --- a/apps/web/src/components/settings/ProviderInstanceCard.tsx +++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx @@ -570,7 +570,7 @@ export function ProviderInstanceCard({ showBadge={Boolean(accentColor)} className="size-5" iconClassName="size-4 text-foreground/80" - badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-3xs" + badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs" /> ) : FallbackIconComponent ? ( diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 9caf42ca2d6cdaf8b6ce349012a195164dc1f658..1039f23b19b86b119e8588d3e6c42458c77a54ae 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -161,12 +161,17 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil @theme inline { /* Two steps below Tailwind's text-xs (12px) for dense UI: metadata rows, badges, counters, keyboard hints and diagnostics tables. 2xs is 11px, - 3xs is 10px and the floor of the scale. Registered with tailwind-merge in + 3xs is 10px. Provider icon overlays use 4xs (8px) and 5xs (7px) to fit + their smaller badges. Registered with tailwind-merge in lib/utils.ts so cn() treats them as font sizes, not colours. */ --text-2xs: 0.6875rem; --text-2xs--line-height: calc(1 / 0.6875); --text-3xs: 0.625rem; --text-3xs--line-height: calc(0.875 / 0.625); + --text-4xs: 0.5rem; + --text-4xs--line-height: 1; + --text-5xs: 0.4375rem; + --text-5xs--line-height: 1; /* Motion. drawer is the decelerating curve for surfaces that slide or pop in (composer context, pills). */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts index 43d55682e12dde98869249c91d4ec8ff4da7c949..ca9a3a6340c2e6dc93bea9dff0fae7875c029cfb 100644 --- a/apps/web/src/lib/utils.ts +++ b/apps/web/src/lib/utils.ts @@ -6,7 +6,7 @@ import { DraftId } from "../composerDraftStore"; // The theme's extra font sizes (index.css). Unregistered, tailwind-merge reads // text-2xs as a colour and drops it next to text-muted-foreground. -const twMerge = extendTailwindMerge({ extend: { theme: { text: ["2xs", "3xs"] } } }); +const twMerge = extendTailwindMerge({ extend: { theme: { text: ["2xs", "3xs", "4xs", "5xs"] } } }); export function cn(...inputs: CxOptions) { return twMerge(cx(inputs)); -- 2.54.0