@carlonicora/nextjs-jsonapi 3.25.0 → 3.26.0

package/src/components/navigations/Header.tsx

@@ -15,9 +15,22 @@ type HeaderProps = {
   /** Rendered before everything else, on mobile only — where the sidebar (and its logo) is off-canvas. */
   logo?: React.ReactNode;
   className?: string;
+  /**
+   * Drop the sidebar toggle on mobile. Set by page shells that render the mobile
+   * bottom bar, whose "Menu" slot opens the same drawer — two controls for one
+   * drawer only cost header room on a phone. Desktop always keeps the toggle.
+   */
+  hideSidebarTriggerOnMobile?: boolean;
 };
 
-export function Header({ children, mobileChildren, leftContent, logo, className }: HeaderProps) {
+export function Header({
+  children,
+  mobileChildren,
+  leftContent,
+  logo,
+  className,
+  hideSidebarTriggerOnMobile,
+}: HeaderProps) {
   const { breadcrumbs } = useSharedContext();
   const rootLabel = useHeaderRootLabel();
   const isRootHidden = useIsBreadcrumbRootHidden();
@@ -42,9 +55,9 @@ export function Header({ children, mobileChildren, leftContent, logo, className
     >
       <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between ps-2 pe-4">
         {isMobile && logo && <div className="flex shrink-0 flex-row items-center pe-1">{logo}</div>}
-        {sidebar && <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />}
+        {sidebar && !(isMobile && hideSidebarTriggerOnMobile) && <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />}
         {leftContent}
-        <div className="flex w-full flex-row items-center justify-start">
+        <div className="flex w-full flex-row items-center justify-start max-md:min-w-0">
           <BreadcrumbNavigation items={breadcrumbs} rootLabel={rootLabel ?? undefined} showRoot={!isRootHidden} />
         </div>
         {isMobile

package/src/components/navigations/MobileNavigationBar.tsx

@@ -84,6 +84,18 @@ export function MobileNavigationBar({ className }: { className?: string } = {})
           </>
         );
 
+        // A slot with neither href nor onClick is self-contained: its `render`
+        // brings its own control (e.g. an avatar that opens a user menu), so it
+        // is not wrapped in a Link/button — that would nest one interactive
+        // element inside another.
+        if (!item.href && !item.onClick) {
+          return (
+            <div key={item.key} data-testid={`mobile-nav-${item.key}`} className={cn(slotClass, tone)}>
+              <SlotContent item={item} />
+            </div>
+          );
+        }
+
         return item.href ? (
           <Link
             key={item.key}

package/src/components/navigations/__tests__/MobileNavigationBar.spec.tsx

@@ -109,6 +109,23 @@ describe("MobileNavigationBar", () => {
     expect(screen.getByTestId("avatar-stub")).toBeInTheDocument();
   });
 
+  it("renders a slot with neither href nor onClick as-is, without wrapping it in a link or button", () => {
+    renderBar([
+      {
+        key: "profile",
+        label: "Account",
+        render: (
+          <button type="button" data-testid="menu-trigger">
+            Account
+          </button>
+        ),
+      },
+    ]);
+    const trigger = screen.getByTestId("menu-trigger");
+    expect(trigger.parentElement?.closest("button, a")).toBeNull();
+    expect(screen.getAllByRole("button")).toHaveLength(1);
+  });
+
   // The load-bearing case: a bare startsWith would make href="/" match everything.
   it("marks only the exactly-matching slot active when one href is '/'", () => {
     pathnameRef.current = "/conversations";

package/src/components/tables/ContentListTable.tsx

@@ -10,6 +10,7 @@ import React, { ReactNode, memo, useMemo, useState } from "react";
 import { DataListRetriever, TableContent, useTableGenerator } from "../../hooks";
 import { ModuleWithPermissions } from "../../permissions";
 import { Button, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../../shadcnui";
+import { useIsMobile } from "../../utils/use-mobile";
 import { MicroLabel } from "../typography";
 import { ContentTableSearch } from "./ContentTableSearch";
 
@@ -110,6 +111,7 @@ function renderCell(cellDef: unknown, context: unknown): ReactNode {
 export const ContentListTable = memo(function ContentListTable(props: ContentListTableProps) {
   const { data, fields, checkedIds, toggleId, allowSearch, filters: _filters, fullWidth, onRowClick } = props;
   const t = useTranslations();
+  const isMobile = useIsMobile();
   const [expanded, setExpanded] = useState<ExpandedState>(
     props.defaultExpanded === true ? true : typeof props.defaultExpanded === "object" ? props.defaultExpanded : {},
   );
@@ -212,13 +214,60 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
   // 12px title is the mismatch the opt-in exists to avoid.
   const titleIsLarge = (props.titleSize ?? (fullWidth ? `lg` : `sm`)) === `lg`;
 
+  const titleLabel = (
+    <div
+      className={cn(
+        "text-muted-foreground flex items-center gap-x-2  font-light whitespace-nowrap",
+        titleIsLarge ? `text-lg` : `text-sm`,
+      )}
+    >
+      {props.titleActions}
+      {props.tableGeneratorType.icon && (
+        <props.tableGeneratorType.icon className={cn(`text-primary`, titleIsLarge ? `h-6 w-6` : `h-4 w-4`)} />
+      )}
+      {props.title}
+    </div>
+  );
+
+  const hasTitleControls = !!(props.functions || props.filters || allowSearch);
+  const titleControls = (
+    <>
+      {props.filters}
+      {props.functions}
+      {/* `allowSearch !== false`, not `allowSearch`: the search box has
+          always rendered here whenever `functions`/`filters` were set, and
+          most callers rely on that without passing the flag. Gating on the
+          flag alone (as the sibling ContentListGrid does) would silently
+          remove search from every such list. This only lets a caller whose
+          retriever ignores `search` — e.g. notifications, whose repository
+          has no search param and no fulltext index — opt out of a control
+          that would do nothing. */}
+      {allowSearch !== false && <ContentTableSearch data={data} />}
+    </>
+  );
+
   return (
     <div data-help="list.table" className="flex w-full flex-col">
       {/* <div className="overflow-clip rounded-md border"> */}
       <div className={cn(`overflow-clip`, fullWidth ? `` : `rounded-md border`)}>
+        {/* On a phone the title bar sits above the table instead of inside its
+            header: inside, it is as wide as the table, so on a table wider than
+            the screen "Create New", search and filters land off-screen. Above it,
+            it wraps within the card while the table scrolls sideways on its own. */}
+        {props.title && isMobile && (
+          <div
+            data-testid="content-list-table-title-bar"
+            className="bg-card text-primary flex flex-wrap items-center gap-2 border-b p-4 font-bold"
+          >
+            <div className="shrink-0">{titleLabel}</div>
+            {hasTitleControls && (
+              <div className="ms-auto flex flex-wrap items-center justify-end gap-2">{titleControls}</div>
+            )}
+          </div>
+        )}
         <Table>
           <TableHeader className="bg-muted font-semibold">
-            {props.title && (
+            {props.title && !isMobile && (
               <TableRow>
                 <TableHead
                   className="bg-card rounded-t-lg text-primary p-4 text-start font-bold"
@@ -226,37 +275,8 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
                 >
                   <div className="flex w-full items-center justify-between gap-x-2">
                     {/* <div className="w-full">{fullWidth ? `` : props.title}</div> */}
-                    <div className="w-full">
-                      <div
-                        className={cn(
-                          "text-muted-foreground flex items-center gap-x-2  font-light whitespace-nowrap",
-                          titleIsLarge ? `text-lg` : `text-sm`,
-                        )}
-                      >
-                        {props.titleActions}
-                        {props.tableGeneratorType.icon && (
-                          <props.tableGeneratorType.icon
-                            className={cn(`text-primary`, titleIsLarge ? `h-6 w-6` : `h-4 w-4`)}
-                          />
-                        )}
-                        {props.title}
-                      </div>
-                    </div>
-                    {(props.functions || props.filters || allowSearch) && (
-                      <>
-                        {props.filters}
-                        {props.functions}
-                        {/* `allowSearch !== false`, not `allowSearch`: the search box has
-                            always rendered here whenever `functions`/`filters` were set, and
-                            most callers rely on that without passing the flag. Gating on the
-                            flag alone (as the sibling ContentListGrid does) would silently
-                            remove search from every such list. This only lets a caller whose
-                            retriever ignores `search` — e.g. notifications, whose repository
-                            has no search param and no fulltext index — opt out of a control
-                            that would do nothing. */}
-                        {allowSearch !== false && <ContentTableSearch data={data} />}
-                      </>
-                    )}
+                    <div className="w-full">{titleLabel}</div>
+                    {hasTitleControls && titleControls}
                   </div>
                 </TableHead>
               </TableRow>

package/src/features/analytics/components/AnalyticsAdminFilterBar.tsx

@@ -48,12 +48,15 @@ export function AnalyticsAdminFilterBar({ section, granularity, onChange }: Prop
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <DateRangeSelector
-        onDateChange={(range) => {
-          if (!range?.from || !range?.to) return;
-          onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
-        }}
-      />
+      {/* The date button is a fixed 300px; on a phone it takes the full row instead. */}
+      <div className="max-md:w-full max-md:[&_#date]:w-full">
+        <DateRangeSelector
+          onDateChange={(range) => {
+            if (!range?.from || !range?.to) return;
+            onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
+          }}
+        />
+      </div>
 
       <Segmented
         ariaLabel={t("analytics.admin.filter.section")}

package/src/features/analytics/components/AnalyticsBreakdownTable.tsx

@@ -48,7 +48,8 @@ export function AnalyticsBreakdownTable({ breakdowns }: Props) {
 
   return (
     <Tabs defaultValue={ANALYTICS_DIMENSIONS[0]}>
-      <TabsList>
+      {/* Six tabs are wider than a phone-width card: scroll them sideways there. */}
+      <TabsList className="max-md:w-full max-md:justify-start max-md:overflow-x-auto">
         {ANALYTICS_DIMENSIONS.map((dimension) => (
           <TabsTrigger key={dimension} value={dimension}>
             {labels[dimension]}

package/src/features/assistant/components/parts/AssistantBlockNoteComposer.tsx

@@ -129,7 +129,7 @@ export function AssistantBlockNoteComposer({
           <ArrowUp className="me-1 h-4 w-4" /> {t("features.assistant.send")}
         </Button>
       </div>
-      <div className="text-muted-foreground text-end text-xs">{t("features.assistant.keyboard_hint")}</div>
+      <div className="text-muted-foreground text-end text-xs max-md:hidden">{t("features.assistant.keyboard_hint")}</div>
     </div>
   );
 }

package/src/features/assistant/components/parts/AssistantComposer.tsx

@@ -92,7 +92,7 @@ export function AssistantComposer({
           {sendButton}
         </div>
       )}
-      <div className="text-muted-foreground text-end text-xs">{t("features.assistant.keyboard_hint")}</div>
+      <div className="text-muted-foreground text-end text-xs max-md:hidden">{t("features.assistant.keyboard_hint")}</div>
     </div>
   );
 }

package/src/features/assistant-message/components/MessageItem.tsx

@@ -82,7 +82,7 @@ export function MessageItem({
           renders invisible here, so force the on-primary colour and lean on
           weight for the affordance (links are never underlined in this UI).
         */}
-        <div className="bg-primary text-primary-foreground max-w-[72%] rounded-2xl rounded-ee-sm px-3.5 py-2 text-sm [&_a]:text-primary-foreground [&_a]:font-semibold [&_p]:m-0">
+        <div className="bg-primary text-primary-foreground max-w-[72%] max-md:max-w-[92%] rounded-2xl rounded-ee-sm px-3.5 py-2 text-sm [&_a]:text-primary-foreground [&_a]:font-semibold [&_p]:m-0">
           <ReactMarkdown remarkPlugins={[remarkGfm]} urlTransform={mentionUrlTransform} components={markdownComponents}>
             {message.content}
           </ReactMarkdown>
@@ -103,7 +103,7 @@ export function MessageItem({
   const isApprovalRequest = message.messageType === "approval-request" && !!renderApprovalAction;
 
   return (
-    <div className="flex min-w-0 max-w-[78%] flex-col gap-1.5">
+    <div className="flex min-w-0 max-w-[78%] max-md:max-w-[92%] flex-col gap-1.5">
       <div className="text-muted-foreground flex items-center gap-2 ps-1 text-xs">
         <span className="flex h-4 w-4 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-violet-500 text-white">
           <Sparkles className="h-2.5 w-2.5" />

package/src/features/assistant-message/components/parts/tabs/CitationsTab.tsx

@@ -9,6 +9,8 @@ import type { ApiDataInterface } from "../../../../../core";
 import type { ChunkInterface, ChunkRelationshipMeta } from "../../../../chunk/data/ChunkInterface";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui/ui/table";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../../../shadcnui/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../../shadcnui/ui/popover";
+import { useIsMobile } from "../../../../../utils/use-mobile";
 import { cn } from "@/lib/utils";
 import { RelevanceMeter } from "../RelevanceMeter";
 import { useEntityLabel } from "./useEntityLabel";
@@ -26,6 +28,8 @@ interface Props {
 export function CitationsTab({ citations, sources }: Props) {
   const t = useTranslations();
   const entityLabel = useEntityLabel();
+  // A tooltip never opens on touch, so on a phone the reason is a tap popover.
+  const isMobile = useIsMobile();
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   if (citations.length === 0) return null;
 
@@ -45,7 +49,7 @@ export function CitationsTab({ citations, sources }: Props) {
       <TableHeader>
         <TableRow>
           <TableHead>{t("features.assistant.message.sources.source")}</TableHead>
-          <TableHead className="w-28 text-center">{t("features.assistant.message.sources.relevance")}</TableHead>
+          <TableHead className="w-28 text-center max-md:w-20">{t("features.assistant.message.sources.relevance")}</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -76,9 +80,23 @@ export function CitationsTab({ citations, sources }: Props) {
                     aria-expanded={isOpen}
                     className="flex w-full cursor-pointer items-center justify-start gap-x-2"
                   >
-                    <ChevronDown className={cn("h-4 w-4 transition-transform", !isOpen && "-rotate-90")} />
-                    <span className="font-semibold">{sourceName}</span>
-                    {chunk.reason && (
+                    <ChevronDown
+                      className={cn("h-4 w-4 transition-transform max-md:shrink-0", !isOpen && "-rotate-90")}
+                    />
+                    <span className="font-semibold max-md:min-w-0 max-md:truncate">{sourceName}</span>
+                    {chunk.reason && isMobile && (
+                      <Popover>
+                        <PopoverTrigger
+                          aria-label={chunk.reason}
+                          onClick={(e) => e.stopPropagation()}
+                          className="text-muted-foreground -m-2 inline-flex shrink-0 p-2"
+                        >
+                          <HelpCircle className="h-3.5 w-3.5" />
+                        </PopoverTrigger>
+                        <PopoverContent className="max-w-64 text-xs">{chunk.reason}</PopoverContent>
+                      </Popover>
+                    )}
+                    {chunk.reason && !isMobile && (
                       <Tooltip>
                         <TooltipTrigger className="text-muted-foreground inline-flex">
                           <HelpCircle className="h-3.5 w-3.5" />
@@ -89,7 +107,7 @@ export function CitationsTab({ citations, sources }: Props) {
                   </div>
                 </TableCell>
                 <TableCell className="text-center">
-                  <RelevanceMeter value={chunk.relevance ?? 0} />
+                  <RelevanceMeter value={chunk.relevance ?? 0} className="max-md:w-16" />
                 </TableCell>
               </TableRow>
               {isOpen && (

package/src/features/auth/components/containers/AuthContainer.tsx

@@ -28,5 +28,12 @@ function InnerAuthContainer() {
       </div>
     );
 
-  return <Card className="w-full max-w-md">{activeComponent}</Card>;
+  // Phone: 40px buttons and inputs on the auth forms (login, register, reset…)
+  // so they are comfortable to tap. Input-group buttons (show password) carry
+  // data-size and keep their own size. md+ is unchanged.
+  return (
+    <Card className="w-full max-w-md max-md:[&_[data-slot=button]:not([data-size])]:h-10 max-md:[&_[data-slot=input-group-control]]:h-full max-md:[&_[data-slot=input-group]]:h-10 max-md:[&_[data-slot=input]]:h-10">
+      {activeComponent}
+    </Card>
+  );
 }

package/src/features/company/components/details/CompanyContent.tsx

@@ -7,6 +7,7 @@ import { ReactNode } from "react";
 import { AttributeElement } from "../../../../components";
 import { SectionHeader, MicroLabel } from "../../../../components/typography";
 import { FiscalDataDisplay } from "../../../../components/fiscal/FiscalDataDisplay";
+import { cn } from "../../../../utils";
 import { CompanyInterface } from "../../data";
 
 type CompanyContentProps = {
@@ -34,7 +35,8 @@ export function CompanyContent({ company, actions }: CompanyContentProps) {
   return (
     <div className="flex flex-col gap-y-8">
       {/* Title Row */}
-      <div className="flex w-full items-center justify-between">
+      {/* Without actions the row only repeats the name the page header shows; hide it on a phone. */}
+      <div className={cn("flex w-full items-center justify-between", !actions && "max-md:hidden")}>
         <SectionHeader level={2}>{company.name}</SectionHeader>
         {actions && <div className="flex items-center gap-x-2">{actions}</div>}
       </div>

package/src/features/company/components/details/CompanyDetails.tsx

@@ -17,7 +17,15 @@ export function CompanyDetails() {
 
   return (
     <div className="flex w-full flex-col gap-y-2">
-      <ContentTitle module={Modules.Company} type={title.type} element={title.element} functions={title.functions} />
+      {/* On a phone the page header already shows the type, the name and the
+          commands, so this inner copy is hidden there. */}
+      <ContentTitle
+        module={Modules.Company}
+        type={title.type}
+        element={title.element}
+        functions={title.functions}
+        className="max-md:hidden"
+      />
       <TokenStatusIndicator size="md" />
       <CompanyContent company={company} />
     </div>

package/src/features/company/components/details/TokenStatusIndicator.tsx

@@ -12,6 +12,12 @@ interface TokenStatusIndicatorProps {
   className?: string;
   size?: "sm" | "md" | "lg";
   showExtraPages?: boolean;
+  /**
+   * Render the indicator as a link to this URL instead of a hover tooltip.
+   * For touch surfaces (the mobile header), where a hover tooltip never opens:
+   * the link carries a 40px tap area and leads to the usage page.
+   */
+  href?: string;
 }
 
 /**
@@ -36,7 +42,12 @@ const asWholeCredits = (value: number): string => Math.trunc(value).toLocaleStri
  * - BatteryLow: 5-25% available
  * - Battery (empty): <5% available
  */
-export function TokenStatusIndicator({ className, size = "md", showExtraPages = true }: TokenStatusIndicatorProps) {
+export function TokenStatusIndicator({
+  className,
+  size = "md",
+  showExtraPages = true,
+  href,
+}: TokenStatusIndicatorProps) {
   const { company } = useCurrentUserContext();
   const t = useTranslations();
 
@@ -131,6 +142,35 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
     </div>
   );
 
+  const badge = (
+    <>
+      {getBatteryIcon()}
+      <span className={cn(textSize, "text-muted-foreground font-medium leading-none")}>
+        {asWholeCredits(availableMonthlyCredits)}
+      </span>
+      {showExtraPages && availableExtraCredits > 0 && (
+        <span className="inline-flex items-center gap-0.5">
+          <PlusCircle className={cn(smallIconSize, "text-blue-500")} />
+          <span className={cn(textSize, "text-blue-500 font-medium leading-none")}>
+            {asWholeCredits(availableExtraCredits)}
+          </span>
+        </span>
+      )}
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={cn("inline-flex min-h-10 min-w-10 items-center justify-center gap-1.5 px-1", className)}
+        aria-label={t("billing.tokens.status", { defaultValue: "Page Status" })}
+      >
+        {badge}
+      </Link>
+    );
+  }
+
   return (
     <Tooltip>
       {/* The layout classes live on the trigger itself, which renders the
@@ -142,18 +182,7 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
         className={cn("inline-flex items-center gap-1.5 cursor-default", className)}
         aria-label={t("billing.tokens.status", { defaultValue: "Page Status" })}
       >
-        {getBatteryIcon()}
-        <span className={cn(textSize, "text-muted-foreground font-medium leading-none")}>
-          {asWholeCredits(availableMonthlyCredits)}
-        </span>
-        {showExtraPages && availableExtraCredits > 0 && (
-          <span className="inline-flex items-center gap-0.5">
-            <PlusCircle className={cn(smallIconSize, "text-blue-500")} />
-            <span className={cn(textSize, "text-blue-500 font-medium leading-none")}>
-              {asWholeCredits(availableExtraCredits)}
-            </span>
-          </span>
-        )}
+        {badge}
       </TooltipTrigger>
       <TooltipContent side="top" className="max-w-xs">
         {tooltipContent}

package/src/features/help/components/HelpHeader.tsx

@@ -16,14 +16,16 @@ export function HelpHeader() {
   const appHref = brand?.appHref ?? "/";
 
   return (
-    <header className="border-border bg-background flex items-center justify-between border-b px-4 py-3">
-      <Link href="/help" className="flex items-center gap-2">
-        {logo ? <Image src={logo} alt={label} width={28} height={28} /> : null}
-        <span className="text-base font-semibold">
+    <header className="border-border bg-background flex items-center justify-between border-b px-4 py-3 max-md:gap-2">
+      {/* Phone: the title shrinks and the "· Help & Documentation" suffix
+          truncates with an ellipsis instead of wrapping onto a second line. */}
+      <Link href="/help" className="flex items-center gap-2 max-md:min-w-0">
+        {logo ? <Image src={logo} alt={label} width={28} height={28} className="max-md:shrink-0" /> : null}
+        <span className="text-base font-semibold max-md:truncate">
           {label} · {t("help.footerLink")}
         </span>
       </Link>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 max-md:shrink-0">
         <HelpAskAi />
         {/* Styled Links, not <Button render={<Link/>} nativeButton={false}>. Base UI's
             Button primitive warns when rendered as a non-button, and nativeButton={false}

package/src/features/tokenusage/components/TokenUsageAdminFilterBar.tsx

@@ -41,12 +41,15 @@ export function TokenUsageAdminFilterBar({ granularity, companyId, metric, compa
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <DateRangeSelector
-        onDateChange={(range) => {
-          if (!range?.from || !range?.to) return;
-          onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
-        }}
-      />
+      {/* The date button is a fixed 300px; on a phone it takes the full row instead. */}
+      <div className="max-md:w-full max-md:[&_#date]:w-full">
+        <DateRangeSelector
+          onDateChange={(range) => {
+            if (!range?.from || !range?.to) return;
+            onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
+          }}
+        />
+      </div>
 
       <Segmented
         ariaLabel={t("token_usage.admin.granularity.label")}

package/src/features/tokenusage/lib/__tests__/formatters.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { createUsageFormatters } from "../formatters";
+
+describe("createUsageFormatters.compact", () => {
+  const { compact } = createUsageFormatters("en-US", "EUR");
+
+  it("keeps sub-unit axis ticks distinct", () => {
+    const ticks = [0, 0.05, 0.1, 0.15, 0.2, 0.25];
+    const labels = ticks.map(compact);
+    expect(labels).toEqual(["0", "0.05", "0.1", "0.15", "0.2", "0.25"]);
+    expect(new Set(labels).size).toBe(ticks.length);
+  });
+
+  it("keeps thousands ticks distinct and exact", () => {
+    expect([0, 250, 500, 750, 1000, 1250].map(compact)).toEqual(["0", "250", "500", "750", "1K", "1.25K"]);
+  });
+
+  it("still abbreviates large values", () => {
+    expect(compact(1500000)).toBe("1.5M");
+  });
+});

package/src/features/tokenusage/lib/formatters.ts

@@ -50,7 +50,11 @@ export function createUsageFormatters(locale: string, currency: string): UsageFo
 
   const dayFormat = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", timeZone: "UTC" });
   const monthFormat = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric", timeZone: "UTC" });
-  const compactFormat = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
+  // Axis ticks step by 1, 2, 2.5 or 5 times a power of ten, so a tick never needs
+  // more than three significant digits. A fixed one-decimal cap rounded a 0.05
+  // step into repeated labels (0.1, 0.1, 0.2, 0.2); significant digits keep every
+  // tick distinct at any scale (0.05, 0.15, 1.25K).
+  const compactFormat = new Intl.NumberFormat(locale, { notation: "compact", maximumSignificantDigits: 3 });
   const collator = new Intl.Collator(locale);
 
   return {

package/src/shadcnui/ui/button.tsx

@@ -21,7 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+          "h-7 max-md:h-9 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         xs: "h-5 gap-1 rounded-sm px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-2.5",
         sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
         lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-4",

package/src/shadcnui/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 max-md:after:-inset-y-3 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}

package/src/shadcnui/ui/command.tsx

@@ -21,7 +21,7 @@ function Command({ className, ...props }: React.ComponentProps<typeof CommandPri
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden",
+        "bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden max-md:min-h-0",
         "[[data-slot=dialog-content]_&]:bg-transparent [[data-slot=dialog-content]_&]:text-foreground",
         className,
       )}
@@ -75,11 +75,11 @@ function CommandDialog({
 function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/20 dark:bg-input/30 h-8!">
+      <InputGroup className="bg-input/20 dark:bg-input/30 h-8! max-md:h-10!">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
-            "w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            "w-full text-xs/relaxed max-md:text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
             className,
           )}
           {...props}
@@ -96,7 +96,7 @@ function CommandList({ className, ...props }: React.ComponentProps<typeof Comman
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className)}
+      className={cn("no-scrollbar max-h-72 max-md:min-h-0 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className)}
       {...props}
     />
   );

package/src/shadcnui/ui/dialog.tsx

@@ -52,6 +52,8 @@ function DialogContent({
         className={cn(
           // rtl-ok: symmetric centering (`left-1/2` + `-translate-x-1/2`) — identical in LTR and RTL
           "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 outline-none",
+          // Phone: never wider or taller than the screen; the dialog scrolls inside.
+          "max-md:max-h-[calc(100svh-2rem)] max-md:max-w-[calc(100vw-2rem)] max-md:overflow-y-auto",
           className,
         )}
         {...props}

package/src/shadcnui/ui/input.tsx

@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 max-md:h-10 rounded-md border px-2 py-0.5 text-base transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}