authorgravatar for 269035359+t3-code[bot]@users.noreply.github.comt3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> 2026-09-25 14:29:42-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-25 14:29:42-07:00
loged809f7ad274ebccdfbf029ccfd7ff2582fd486a
tree71f934bc76f1952cf70eb4a287ce9ffacccec81c
parent2598ce7a5ab0b25e32e0b67b084a9ec23cd8144f
signature Signed by PGP key B5690EEEBB952194

fix(web): restore compact provider instance badges (#13700)

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,7 +1965,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
1965 showBadge={showInstanceBadge}1965 showBadge={showInstanceBadge}
1966 // Glyph dims, badge stays saturated; offset matches the composer trigger.1966 // Glyph dims, badge stays saturated; offset matches the composer trigger.
1967 iconClassName="size-3.5 opacity-60"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 </span>1970 </span>
1971 ) : null}1971 ) : null}
apps/web/src/components/chat/ModelPickerSidebar.tsx+1-1
...@@ -210,7 +210,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {...@@ -210,7 +210,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
210 ? "var(--background)"210 ? "var(--background)"
211 : "color-mix(in oklab, var(--muted) 30%, transparent)"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 {showNewBadge ? (215 {showNewBadge ? (
216 <span className={NEW_BADGE_CLASS} aria-hidden>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,7 +55,7 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
55 {props.showBadge ? (55 {props.showBadge ? (
56 <span56 <span
57 className={cn(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 props.accentColor59 props.accentColor
60 ? "bg-(--provider-accent) text-white"60 ? "bg-(--provider-accent) text-white"
61 : "bg-card text-muted-foreground",61 : "bg-card text-muted-foreground",
apps/web/src/components/chat/ProviderModelPicker.test.tsx-3
...@@ -172,8 +172,5 @@ describe("ProviderModelPicker", () => {...@@ -172,8 +172,5 @@ describe("ProviderModelPicker", () => {
172 );172 );
173173
174 expect(markup).toContain(">CP</span>");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,7 +250,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
250 iconClassName={cn("size-4", props.activeProviderIconClassName)}250 iconClassName={cn("size-4", props.activeProviderIconClassName)}
251 indicatorBackground={props.instanceIndicatorBackground ?? "var(--contrast-input)"}251 indicatorBackground={props.instanceIndicatorBackground ?? "var(--contrast-input)"}
252 badgeClassName={cn(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 size === "xs" && "shadow-none",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,7 +570,7 @@ export function ProviderInstanceCard({
570 showBadge={Boolean(accentColor)}570 showBadge={Boolean(accentColor)}
571 className="size-5"571 className="size-5"
572 iconClassName="size-4 text-foreground/80"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 ) : FallbackIconComponent ? (575 ) : FallbackIconComponent ? (
576 <span className="inline-flex size-5 shrink-0 items-center justify-center">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,12 +161,17 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
161@theme inline {161@theme inline {
162 /* Two steps below Tailwind's text-xs (12px) for dense UI: metadata rows,162 /* Two steps below Tailwind's text-xs (12px) for dense UI: metadata rows,
163 badges, counters, keyboard hints and diagnostics tables. 2xs is 11px,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 in164 3xs is 10px. Provider icon overlays use 4xs (8px) and 5xs (7px) to fit
165 their smaller badges. Registered with tailwind-merge in
165 lib/utils.ts so cn() treats them as font sizes, not colours. */166 lib/utils.ts so cn() treats them as font sizes, not colours. */
166 --text-2xs: 0.6875rem;167 --text-2xs: 0.6875rem;
167 --text-2xs--line-height: calc(1 / 0.6875);168 --text-2xs--line-height: calc(1 / 0.6875);
168 --text-3xs: 0.625rem;169 --text-3xs: 0.625rem;
169 --text-3xs--line-height: calc(0.875 / 0.625);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 /* Motion. drawer is the decelerating curve for surfaces that slide or pop in175 /* Motion. drawer is the decelerating curve for surfaces that slide or pop in
171 (composer context, pills). */176 (composer context, pills). */
172 --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);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,7 +6,7 @@ import { DraftId } from "../composerDraftStore";
66
7// The theme's extra font sizes (index.css). Unregistered, tailwind-merge reads7// The theme's extra font sizes (index.css). Unregistered, tailwind-merge reads
8// text-2xs as a colour and drops it next to text-muted-foreground.8// text-2xs as a colour and drops it next to text-muted-foreground.
9const twMerge = extendTailwindMerge({ extend: { theme: { text: ["2xs", "3xs"] } } });9const twMerge = extendTailwindMerge({ extend: { theme: { text: ["2xs", "3xs", "4xs", "5xs"] } } });
1010
11export function cn(...inputs: CxOptions) {11export function cn(...inputs: CxOptions) {
12 return twMerge(cx(inputs));12 return twMerge(cx(inputs));