Responsive Breakpoint System

Six breakpoints cover the full device spectrum from small phones to wide monitors. The system is mobile-first: default styles target xs, and each breakpoint progressively enhances. Treasury dashboards adapt at three critical thresholds: lg (tablet, sidebar drawer), xl (desktop, fixed sidebar), and 2xl (wide, maximum data density).

Current Breakpoint

Breakpoint Definitions

useBreakpoint()

import { useBreakpoint } from "@/lib/breakpoints";
import type { Breakpoint } from "@/lib/breakpoints";

// ─── Hook implementation ───────────────────────────────────────────
function useBreakpoint(): Breakpoint {
  const [bp, setBp] = useState<Breakpoint>("xs");

  useEffect(() => {
    const getBreakpoint = (): Breakpoint => {
      const w = window.innerWidth;
      if (w >= 1440) return "2xl";
      if (w >= 1024) return "xl";
      if (w >= 768)  return "lg";
      if (w >= 430)  return "md";
      if (w >= 375)  return "sm";
      return "xs";
    };

    const handler = () => setBp(getBreakpoint());
    setBp(getBreakpoint());
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, []);

  return bp;
}

// ─── Usage examples ────────────────────────────────────────────────
function TreasuryDashboard() {
  const bp = useBreakpoint();

  // Conditional rendering based on breakpoint
  const isMobile = ["xs", "sm", "md"].includes(bp);
  const isTablet = bp === "lg";
  const isDesktop = ["xl", "2xl"].includes(bp);

  return (
    <div>
      {isMobile && <MobileNav />}
      {isTablet && <TabNav />}
      {isDesktop && <SidebarNav />}

      {/* Layout adaptation */}
      {isMobile
        ? <CardStackTable data={data} />
        : <DataTable data={data} />
      }
    </div>
  );
}

// ─── layoutAdaptations helper ──────────────────────────────────────
import { layoutAdaptations } from "@/lib/breakpoints";

function AdaptiveLayout() {
  const bp = useBreakpoint();
  const navMode = layoutAdaptations.navigation[bp];
  const sidebarMode = layoutAdaptations.sidebar[bp];
  const tableMode = layoutAdaptations.dataTable[bp];

  return (
    <AppShell
      navigation={navMode}   // "bottom-tab" | "top-tab" | "sidebar"
      sidebar={sidebarMode}  // "hidden" | "drawer" | "fixed"
      table={tableMode}      // "card-stack" | "compact-table" | "full-table"
    />
  );
}

Stack → Grid → Sidebar Transitions

Media Query Strings

semantic.css additions — sm and md breakpoints

/* Add to :root in tokens/semantic.css */
:root {
  /* Existing breakpoints */
  --ds-breakpoint-mobile:  320px;   /* xs — Small phones */
  --ds-breakpoint-tablet:  768px;   /* lg — Tablets */
  --ds-breakpoint-desktop: 1024px;  /* xl — Desktop */
  --ds-breakpoint-wide:    1440px;  /* 2xl — Wide screens */

  /* New — Sprint 24 additions */
  --ds-breakpoint-xs:  320px;   /* Small phones (alias for mobile) */
  --ds-breakpoint-sm:  375px;   /* Standard phones */
  --ds-breakpoint-md:  430px;   /* Large phones */
  --ds-breakpoint-lg:  768px;   /* Tablets (alias for tablet) */
  --ds-breakpoint-xl:  1024px;  /* Desktop (alias for desktop) */
  --ds-breakpoint-2xl: 1440px;  /* Wide (alias for wide) */
}

/* sm — Standard phone (375px+) */
@media (min-width: 375px) {
  :root {
    --ds-current-page-pad: var(--ds-page-pad-mobile); /* 16px */
  }
}

/* md — Large phone (430px+) */
@media (min-width: 430px) {
  :root {
    --ds-current-grid-cols: 2; /* Two columns on large phones */
  }
}

Breakpoint Misuse