@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/crm/components/filter-tabs.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface FilterTab {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+/**
+ * A row of view filters under the page header, each with its count. On a
+ * phone the row scrolls sideways inside itself instead of widening the page.
+ *
+ * Each filter is a toggle button in a labelled group; ←/→ move between them
+ * and Home/End jump to the ends.
+ */
+export function FilterTabs({
+  tabs,
+  value,
+  onChange,
+  label,
+  trailing,
+  className,
+}: {
+  tabs: FilterTab[];
+  value: string;
+  onChange: (id: string) => void;
+  /** Accessible name for the group, such as "Ticket status". */
+  label: string;
+  /** Extra controls at the end of the row, such as a toggle. */
+  trailing?: React.ReactNode;
+  className?: string;
+}) {
+  function onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, index: number) {
+    const target =
+      event.key === "ArrowRight"
+        ? (index + 1) % tabs.length
+        : event.key === "ArrowLeft"
+          ? (index - 1 + tabs.length) % tabs.length
+          : event.key === "Home"
+            ? 0
+            : event.key === "End"
+              ? tabs.length - 1
+              : -1;
+    if (target < 0) return;
+    event.preventDefault();
+    const next = tabs[target];
+    onChange(next.id);
+    const list = event.currentTarget.parentElement;
+    list?.querySelector<HTMLButtonElement>(`[data-tab="${next.id}"]`)?.focus();
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-11 shrink-0 items-center gap-3 border-b border-border px-3 md:px-5",
+        className,
+      )}
+    >
+      <div
+        role="group"
+        aria-label={label}
+        className="-mx-1 flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {tabs.map((tab, index) => {
+          const selected = tab.id === value;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              data-tab={tab.id}
+              aria-pressed={selected}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => onChange(tab.id)}
+              onKeyDown={(event) => onKeyDown(event, index)}
+              className={cn(
+                "flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-[12.5px] transition-colors",
+                selected
+                  ? "bg-foreground/[0.07] font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+              )}
+            >
+              {tab.label}
+              {typeof tab.count === "number" ? (
+                <span
+                  className={cn(
+                    "tabular text-[11.5px]",
+                    selected ? "text-foreground/60" : "text-muted-foreground/80",
+                  )}
+                >
+                  {tab.count}
+                </span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+      {trailing ? <div className="flex shrink-0 items-center gap-2">{trailing}</div> : null}
+    </div>
+  );
+}

package/templates/crm/components/metrics-bar.tsx

@@ -8,7 +8,7 @@ import { metrics, money, percent, type Deal } from "@/lib/pipeline";
 export function MetricsBar({ deals }: { deals: Deal[] }) {
   const m = metrics(deals);
   return (
-    <dl className="grid grid-cols-2 gap-px border-b border-border bg-border sm:grid-cols-4">
+    <dl className="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-border lg:grid-cols-4">
       <Metric
         label="Open pipeline"
         value={money(m.open)}
@@ -19,7 +19,7 @@ export function MetricsBar({ deals }: { deals: Deal[] }) {
         value={money(m.weighted)}
         hint="by stage probability"
       />
-      <Metric label="Won" value={money(m.won)} hint="closed" />
+      <Metric label="Won" value={money(m.won)} hint="closed won" />
       <Metric label="Win rate" value={percent(m.winRate)} hint="of closed deals" />
     </dl>
   );
@@ -35,12 +35,12 @@ function Metric({
   hint: string;
 }) {
   return (
-    <div className="bg-background px-4 py-3">
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
-      <dd className="tabular mt-0.5 text-[18px] font-semibold tracking-tight">
+    <div className="min-w-0 bg-background px-4 py-2.5 md:px-5 md:py-3.5">
+      <dt className="truncate text-[12px] text-muted-foreground">{label}</dt>
+      <dd className="tabular mt-1 text-[18px] font-semibold leading-none tracking-[-0.02em] md:text-[22px]">
         {value}
       </dd>
-      <p className="mt-0.5 text-[11px] text-muted-foreground">{hint}</p>
+      <p className="mt-1 truncate text-[11.5px] text-muted-foreground md:mt-1.5">{hint}</p>
     </div>
   );
 }

package/templates/crm/components/nav.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Building2, KanbanSquare, Users } from "lucide-react";
+
+export interface NavEntry {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+/** The sidebar's links, top to bottom. Add a view here to put it in the nav. */
+export const NAV: NavEntry[] = [
+  { href: "/", label: "Pipeline", icon: <KanbanSquare /> },
+  { href: "/companies", label: "Companies", icon: <Building2 /> },
+  { href: "/contacts", label: "Contacts", icon: <Users /> },
+];

package/templates/crm/components/page-header.tsx

@@ -1,36 +1,72 @@
+"use client";
+
 import React from "react";
+import { Menu, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useShell } from "@/components/app-shell";
 
 /**
  * The bar at the top of every view: title on the left, actions on the right.
- * Fixed height so switching pages doesn't shift the content below it.
+ * Fixed height, so switching pages doesn't shift the content below it.
+ *
+ * Below the `md` breakpoint it also carries the menu button that opens the
+ * navigation drawer and a search button, since the sidebar is hidden there.
  */
 export function PageHeader({
   title,
   count,
+  leading,
   children,
   className,
 }: {
   title: string;
-  /** Shown beside the title — the number of rows in view. */
+  /** Shown beside the title. Pass the same number the sidebar shows. */
   count?: number;
+  /** Rendered before the title, such as a back link on a detail page. */
+  leading?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
 }) {
+  const shell = useShell();
   return (
     <header
       className={cn(
-        "flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4",
+        "flex h-13 shrink-0 items-center justify-between gap-2 border-b border-border px-3 md:gap-3 md:px-5",
         className,
       )}
     >
-      <div className="flex min-w-0 items-baseline gap-2">
-        <h1 className="truncate text-[13px] font-semibold">{title}</h1>
+      <div className="flex min-w-0 items-center gap-1.5">
+        {shell ? (
+          <button
+            type="button"
+            onClick={shell.openNav}
+            aria-label="Open navigation"
+            className="-ml-1 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.05] hover:text-foreground md:hidden"
+          >
+            <Menu className="size-[18px]" />
+          </button>
+        ) : null}
+        {leading}
+        <h1 className="truncate text-[14px] font-semibold tracking-[-0.01em]">{title}</h1>
         {typeof count === "number" ? (
-          <span className="tabular text-[12px] text-muted-foreground">{count}</span>
+          <span className="tabular ml-0.5 rounded-full bg-foreground/[0.06] px-1.5 py-px text-[11.5px] font-medium text-muted-foreground">
+            {count}
+          </span>
+        ) : null}
+      </div>
+      <div className="flex shrink-0 items-center gap-1.5 md:gap-2">
+        {shell ? (
+          <button
+            type="button"
+            onClick={shell.openCommand}
+            aria-label="Search"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.05] hover:text-foreground md:hidden"
+          >
+            <Search className="size-[18px]" />
+          </button>
         ) : null}
+        {children}
       </div>
-      <div className="flex items-center gap-2">{children}</div>
     </header>
   );
 }

package/templates/crm/components/pipeline-board.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { cn } from "@/lib/utils";
 import { DealCard } from "@/components/deal-card";
 import { BOARD_STAGES, groupByStage, money, type Deal } from "@/lib/pipeline";
+import { STAGE_DOT } from "@/components/stage-badge";
 
 /**
  * The pipeline, as columns you can drag deals between.
@@ -29,7 +30,7 @@ export function PipelineBoard({
   const columns = groupByStage(deals, BOARD_STAGES);
 
   return (
-    <div className="flex h-full gap-3 overflow-x-auto p-4">
+    <div className="flex h-full snap-x snap-mandatory scroll-px-4 gap-3 overflow-x-auto p-4 md:snap-none md:px-5">
       {columns.map((column) => {
         const isTarget = over === column.stage.id;
         return (
@@ -58,19 +59,24 @@ export function PipelineBoard({
               onMove(id, column.stage.id);
             }}
             className={cn(
-              "flex w-[268px] shrink-0 flex-col rounded-xl border transition-colors",
+              "flex w-[84vw] shrink-0 snap-start flex-col rounded-xl border transition-colors",
+              "md:w-auto md:min-w-[208px] md:max-w-[340px] md:flex-1",
               isTarget
-                ? "border-ring/60 bg-surface-2/60"
-                : "border-border bg-surface-1/50",
+                ? "border-ring/50 bg-primary/[0.04]"
+                : "border-border/70 bg-surface-1",
             )}
             aria-label={column.stage.label}
           >
-            <header className="flex items-center gap-2 px-3 py-2.5">
-              <h2 className="text-[12px] font-medium">{column.stage.label}</h2>
-              <span className="tabular text-[11px] text-muted-foreground">
+            <header className="flex items-center gap-2 px-3 pb-2 pt-3">
+              <span
+                aria-hidden="true"
+                className={cn("size-2 shrink-0 rounded-full", STAGE_DOT[column.stage.id])}
+              />
+              <h2 className="text-[12.5px] font-semibold">{column.stage.label}</h2>
+              <span className="tabular text-[12px] text-muted-foreground">
                 {column.deals.length}
               </span>
-              <span className="tabular ml-auto text-[11px] text-muted-foreground">
+              <span className="tabular ml-auto text-[12px] font-medium text-muted-foreground">
                 {money(column.total)}
               </span>
             </header>
@@ -92,8 +98,8 @@ export function PipelineBoard({
                 />
               ))}
               {column.deals.length === 0 ? (
-                <p className="px-1 py-6 text-center text-[11px] text-muted-foreground">
-                  {isTarget ? "Drop here" : "Nothing here"}
+                <p className="rounded-lg border border-dashed border-border px-3 py-6 text-center text-[12px] text-muted-foreground">
+                  {isTarget ? "Drop to move here" : `No deals in ${column.stage.label}`}
                 </p>
               ) : null}
             </div>

package/templates/crm/components/require-auth.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useAuth } from "@pylonsync/client";
-import { AuthForm } from "@/components/auth-form";
+import { BRAND } from "@/lib/brand";
+import { AuthForm, type AuthMode } from "@/components/auth-form";
+import { BrandMark } from "@/components/brand-mark";
 
 /**
  * Client-side auth gate.
@@ -18,44 +20,40 @@ import { AuthForm } from "@/components/auth-form";
  * It also removes a full page load from the sign-in path: authenticating swaps
  * this component's children in place instead of navigating.
  */
-export function RequireAuth({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description: string;
-  children: React.ReactNode;
-}) {
+export function RequireAuth({ children }: { children: React.ReactNode }) {
   const { isSignedIn, isLoaded } = useAuth();
+  const [mode, setMode] = useState<AuthMode>("login");
 
   // `isLoaded` covers the beat before the engine has resolved the stored token.
   // Rendering the form during it would flash a sign-in screen at someone who is
   // already signed in.
   if (!isLoaded) {
     return (
-      <main className="flex min-h-screen items-center justify-center">
-        <span className="text-[13px] text-muted-foreground">Loading…</span>
+      <main className="flex min-h-dvh items-center justify-center" aria-busy="true">
+        <BrandMark className="size-8 animate-pulse" />
+        <span className="sr-only">Loading {BRAND.name}</span>
       </main>
     );
   }
 
   if (!isSignedIn) {
     return (
-      <main className="flex min-h-screen items-center justify-center px-6">
-        <div className="w-full max-w-[320px]">
-          <div className="mb-7 flex items-center gap-2">
-            <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
-              {title.slice(0, 1).toUpperCase()}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight">{title}</span>
+      <main className="flex min-h-dvh items-center justify-center bg-surface-1 px-4 py-10">
+        <div className="w-full max-w-[380px]">
+          <div className="mb-6 flex items-center justify-center gap-2.5">
+            <BrandMark className="size-8 rounded-[9px]" />
+            <span className="text-[17px] font-semibold tracking-[-0.015em]">{BRAND.name}</span>
           </div>
-          <h1 className="text-[19px] font-semibold tracking-tight">
-            Sign in to your workspace
-          </h1>
-          <p className="mt-1 text-[13px] text-muted-foreground">{description}</p>
-          <div className="mt-6">
-            <AuthForm />
+          <div className="rounded-xl border border-border bg-background p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-12px_rgb(0_0_0/0.12)] sm:p-7">
+            <h1 className="text-[18px] font-semibold tracking-[-0.015em]">
+              {mode === "login" ? `Sign in to ${BRAND.name}` : `Create your ${BRAND.name} account`}
+            </h1>
+            <p className="mt-1.5 text-[13px] leading-5 text-muted-foreground">
+              {BRAND.description}
+            </p>
+            <div className="mt-6">
+              <AuthForm mode={mode} onModeChange={setMode} />
+            </div>
           </div>
         </div>
       </main>

package/templates/crm/components/sidebar.tsx

@@ -1,112 +1,117 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { Building2, Command, LayoutGrid, LogOut, Users } from "lucide-react";
+import { LogOut, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { BRAND } from "@/lib/brand";
+import { NAV } from "@/components/nav";
 import { Avatar } from "@/components/avatar";
+import { BrandMark } from "@/components/brand-mark";
 import { Kbd } from "@/components/kbd";
 
-export interface NavItem {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  count?: number;
+/** True when `href` is the section `pathname` belongs to. */
+export function isActive(href: string, pathname: string): boolean {
+  if (href === "/") return pathname === "/";
+  return pathname === href || pathname.startsWith(`${href}/`);
 }
 
-export const NAV: Array<Omit<NavItem, "count">> = [
-  { href: "/", label: "Pipeline", icon: <LayoutGrid /> },
-  { href: "/companies", label: "Companies", icon: <Building2 /> },
-  { href: "/contacts", label: "Contacts", icon: <Users /> },
-];
-
 /**
- * The fixed left rail. Presentational: the active path, the counts, and the
- * sign-out handler all arrive as props, so it renders identically in a test.
+ * The navigation rail: brand, search, links with counts, and the signed-in
+ * person. The same component renders as the fixed rail on wide screens and
+ * inside the drawer on phones (see components/app-shell.tsx).
+ *
+ * Presentational: the path, counts, and handlers arrive as props, so it
+ * renders the same in a test.
  */
 export function Sidebar({
-  workspace,
-  email,
+  user,
   pathname,
   counts,
   onOpenCommand,
+  onNavigate,
   onSignOut,
+  className,
 }: {
-  workspace: string;
-  email: string;
+  user: { name: string; email: string };
   pathname: string;
+  /** Badge per nav href. Omit a key to show no number. */
   counts?: Record<string, number>;
   onOpenCommand: () => void;
+  /** Called after a link is chosen, so the phone drawer can close. */
+  onNavigate?: () => void;
   onSignOut: () => void;
+  className?: string;
 }) {
   return (
-    <aside className="flex w-[224px] shrink-0 flex-col border-r border-border bg-surface-1">
-      <div className="flex h-12 items-center gap-2 px-3">
-        <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-[11px] font-bold text-primary-foreground">
-          {workspace.slice(0, 1).toUpperCase()}
+    <div className={cn("flex h-full w-full flex-col bg-surface-1", className)}>
+      <div className="flex h-13 shrink-0 items-center gap-2.5 px-4">
+        <BrandMark />
+        <span className="truncate text-[14px] font-semibold tracking-[-0.01em]">
+          {BRAND.name}
         </span>
-        <span className="truncate text-[13px] font-semibold">{workspace}</span>
       </div>
 
-      <div className="px-2 pb-2">
+      <div className="px-3 pb-3">
         <button
           type="button"
           onClick={onOpenCommand}
           className={cn(
-            "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5",
-            "text-[12px] text-muted-foreground transition-colors hover:border-ring/40 hover:text-foreground",
+            "flex h-8 w-full items-center gap-2 rounded-md border border-border bg-background px-2.5",
+            "text-[12.5px] text-muted-foreground shadow-[0_1px_1px_rgb(0_0_0/0.03)] transition-colors",
+            "hover:border-foreground/15 hover:text-foreground",
           )}
         >
-          <Command className="size-3.5" />
-          <span className="flex-1 text-left">Search…</span>
-          <Kbd>⌘K</Kbd>
+          <Search className="size-3.5" />
+          <span className="flex-1 text-left">Search</span>
+          <Kbd className="max-md:hidden">⌘K</Kbd>
         </button>
       </div>
 
-      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+      <nav className="flex-1 space-y-px overflow-y-auto px-3" aria-label="Main">
         {NAV.map((item) => {
-          const active =
-            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          const active = isActive(item.href, pathname);
+          const count = counts?.[item.href];
           return (
             <Link
               key={item.href}
               href={item.href}
+              onClick={onNavigate}
               aria-current={active ? "page" : undefined}
               className={cn(
-                "flex h-7 items-center gap-2 rounded-md px-2 text-[13px] transition-colors",
-                "[&_svg]:size-3.5 [&_svg]:shrink-0",
+                "flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] transition-colors md:h-7.5",
+                "[&_svg]:size-4 [&_svg]:shrink-0",
                 active
-                  ? "bg-surface-2 font-medium text-foreground"
-                  : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+                  ? "bg-foreground/[0.06] font-medium text-foreground [&_svg]:text-primary"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
               )}
             >
               {item.icon}
               <span className="flex-1 truncate">{item.label}</span>
-              {counts?.[item.href] ? (
-                <span className="tabular text-[11px] text-muted-foreground">
-                  {counts[item.href]}
-                </span>
+              {typeof count === "number" ? (
+                <span className="tabular text-[11.5px] text-muted-foreground">{count}</span>
               ) : null}
             </Link>
           );
         })}
       </nav>
 
-      <div className="border-t border-border p-2">
-        <div className="flex items-center gap-2 rounded-md px-1.5 py-1">
-          <Avatar name={email} size="sm" />
-          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
-            {email}
-          </span>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-2.5">
+          <Avatar name={user.name || user.email} />
+          <div className="min-w-0 flex-1 leading-tight">
+            <p className="truncate text-[12.5px] font-medium">{user.name || "Signed in"}</p>
+            <p className="truncate text-[11.5px] text-muted-foreground">{user.email}</p>
+          </div>
           <button
             type="button"
             onClick={onSignOut}
             title="Sign out"
             aria-label="Sign out"
-            className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
           >
-            <LogOut className="size-3.5" />
+            <LogOut className="size-4" />
           </button>
         </div>
       </div>
-    </aside>
+    </div>
   );
 }

package/templates/crm/components/stage-badge.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { cn } from "@/lib/utils";
 import { stageById } from "@/lib/pipeline";
 
-const DOT: Record<string, string> = {
+/** The colour dot for each stage, shared by the badge and the board columns. */
+export const STAGE_DOT: Record<string, string> = {
   lead: "bg-stage-lead",
   qualified: "bg-stage-qualified",
   proposal: "bg-stage-proposal",
+  negotiation: "bg-stage-negotiation",
   won: "bg-stage-won",
   lost: "bg-stage-lost",
 };
@@ -25,7 +27,7 @@ export function StageBadge({
   return (
     <span className={cn("inline-flex items-center gap-1.5 whitespace-nowrap", className)}>
       <span
-        className={cn("size-1.5 shrink-0 rounded-full", DOT[stage] ?? "bg-muted-foreground")}
+        className={cn("size-1.5 shrink-0 rounded-full", STAGE_DOT[stage] ?? "bg-muted-foreground")}
       />
       <span className="text-muted-foreground">{meta?.label ?? stage}</span>
     </span>

package/templates/crm/components/ui/button.tsx

@@ -5,15 +5,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[color,background-color,box-shadow,transform] duration-150 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.15),0_1px_2px_rgb(0_0_0/0.1)] hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-[0_1px_1px_rgb(0_0_0/0.03)] hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -21,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
+        sm: "h-8 rounded-md px-3 text-[12.5px] md:h-7.5 [&_svg]:size-3.5",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
       },

package/templates/crm/components/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200",
+        "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-xl border bg-background p-5 shadow-[0_24px_48px_-12px_rgb(0_0_0/0.25)] duration-200 sm:p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className,
       )}

package/templates/crm/components/ui/input.tsx

@@ -12,7 +12,7 @@ function Input({
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/crm/components/ui/select.tsx

@@ -22,7 +22,7 @@ function Select({
       <select
         data-slot="select"
         className={cn(
-          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-base shadow-sm md:text-[13px] transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className,

package/templates/crm/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",