Skip to content

Commit ed809f7

Browse files
t3-code-bot[bot]juliusmarminge
t3-code-bot[bot]
and
juliusmarminge
authored
fix(web): restore compact provider instance badges (#13700)
Co-authored-by: Julius Marminge <[email protected]>
1 parent 2598ce7 commit ed809f7

8 files changed

Lines changed: 12 additions & 10 deletions

File tree

‎apps/web/src/components/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1965,7 +1965,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
19651965
showBadge={showInstanceBadge}
19661966
// Glyph dims, badge stays saturated; offset matches the composer trigger.
19671967
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"
19691969
/>
19701970
</span>
19711971
) : null}

‎apps/web/src/components/chat/ModelPickerSidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
210210
? "var(--background)"
211211
: "color-mix(in oklab, var(--muted) 30%, transparent)"
212212
}
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" } : {})}
214214
/>
215215
{showNewBadge ? (
216216
<span className={NEW_BADGE_CLASS} aria-hidden>

‎apps/web/src/components/chat/ProviderInstanceIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
5555
{props.showBadge ? (
5656
<span
5757
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",
5959
props.accentColor
6060
? "bg-(--provider-accent) text-white"
6161
: "bg-card text-muted-foreground",

‎apps/web/src/components/chat/ProviderModelPicker.test.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,8 +172,5 @@ describe("ProviderModelPicker", () => {
172172
);
173173

174174
expect(markup).toContain(">CP</span>");
175-
expect(markup).toContain("size-4");
176-
expect(markup).toContain("h-3");
177-
expect(markup).toContain("text-3xs");
178175
});
179176
});

‎apps/web/src/components/chat/ProviderModelPicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
250250
iconClassName={cn("size-4", props.activeProviderIconClassName)}
251251
indicatorBackground={props.instanceIndicatorBackground ?? "var(--contrast-input)"}
252252
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",
254254
size === "xs" && "shadow-none",
255255
)}
256256
/>

‎apps/web/src/components/settings/ProviderInstanceCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ export function ProviderInstanceCard({
570570
showBadge={Boolean(accentColor)}
571571
className="size-5"
572572
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"
574574
/>
575575
) : FallbackIconComponent ? (
576576
<span className="inline-flex size-5 shrink-0 items-center justify-center">

‎apps/web/src/index.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,17 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
161161
@theme inline {
162162
/* Two steps below Tailwind's text-xs (12px) for dense UI: metadata rows,
163163
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
165166
lib/utils.ts so cn() treats them as font sizes, not colours. */
166167
--text-2xs: 0.6875rem;
167168
--text-2xs--line-height: calc(1 / 0.6875);
168169
--text-3xs: 0.625rem;
169170
--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;
170175
/* Motion. drawer is the decelerating curve for surfaces that slide or pop in
171176
(composer context, pills). */
172177
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

‎apps/web/src/lib/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { DraftId } from "../composerDraftStore";
66

77
// The theme's extra font sizes (index.css). Unregistered, tailwind-merge reads
88
// 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"] } } });
1010

1111
export function cn(...inputs: CxOptions) {
1212
return twMerge(cx(inputs));

0 commit comments

Comments
 (0)