feat: add fullscreen expand to all dashboard cards

ExpandableCard component wraps cards with a hover-reveal expand
button that opens content in a fullscreen overlay portal. Handles
escape/click-outside to close, locks body scroll, strips max-height
constraints and stretches Recharts containers in fullscreen mode.

- Wrap all data cards across dashboard, insights, and user detail pages
- Top Spenders chart shows 15 users (vs 8) when expanded via render fn
- Plan Exhaustion auto-shows user list when expanded
- Global :focus-visible fix removes click-triggered focus outlines

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ofershap

.cursor/rules/coding-conventions.mdc

@@ -39,6 +39,8 @@ import type { Anomaly } from "@/lib/types";
 - Use Tailwind CSS with zinc color palette (dark theme)
 - No shadcn/ui installed — components are hand-rolled
 - Model names displayed via `shortModel()` from `src/lib/format-utils.ts` with full name in tooltip
+- Self-contained components: components like `upgrade-banner.tsx` are designed with minimal footprint — single file, own modal/overlay logic baked in, easy to add/remove with 1-2 line diffs in consuming files. Do NOT extract shared modals or abstractions from them; keep them isolated.
+- `ExpandableCard` (`src/components/expandable-card.tsx`): wraps any card to add a fullscreen expand button. Wrap the outer card div, don't restructure the card internals.
 
 ## Anomaly Detection
 

src/app/dashboard-client.tsx

@@ -9,6 +9,7 @@ import { SpendTrendChart } from "@/components/charts/spend-trend-chart";
 import { MembersTable } from "@/components/dashboard/members-table";
 import Link from "next/link";
 import { shortModel } from "@/lib/format-utils";
+import { ExpandableCard } from "@/components/expandable-card";
 
 interface BillingGroupWithMembers {
   id: string;
@@ -492,31 +493,47 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
 
       {/* ── Row: Team Spend Trend + Model Cost Comparison ── */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-        <SpendTrendChart
-          data={filteredTeamDailySpend}
-          selectedDays={days}
-          avgPerDay={filteredSpendCents / 100 / (effectiveDays || 1)}
-        />
-        <ModelCostComparison data={data.modelCosts} />
+        <ExpandableCard>
+          <SpendTrendChart
+            data={filteredTeamDailySpend}
+            selectedDays={days}
+            avgPerDay={filteredSpendCents / 100 / (effectiveDays || 1)}
+          />
+        </ExpandableCard>
+        <ExpandableCard>
+          <ModelCostComparison data={data.modelCosts} />
+        </ExpandableCard>
       </div>
 
       {/* ── Charts ── */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-        <SpendBarChart data={filteredUsers.slice(0, 20)} highlightEmail={searchedUser?.email} />
-        <DailySpendChart data={dailySpendData} onNameClick={(name) => setSearch(name)} />
+        <ExpandableCard>
+          {(exp) => (
+            <SpendBarChart
+              data={filteredUsers.slice(0, 20)}
+              highlightEmail={searchedUser?.email}
+              expanded={exp}
+            />
+          )}
+        </ExpandableCard>
+        <ExpandableCard>
+          <DailySpendChart data={dailySpendData} onNameClick={(name) => setSearch(name)} />
+        </ExpandableCard>
       </div>
 
       {/* ── Table ── */}
-      <MembersTable
-        data={filteredUsers}
-        sortCol={sortCol}
-        sortAsc={sortAsc}
-        onSort={handleSort}
-        highlightEmail={searchedUser?.email}
-        timeLabel={timeLabel}
-        badgeFilter={badgeFilter}
-        onBadgeFilter={handleBadgeFilter}
-      />
+      <ExpandableCard>
+        <MembersTable
+          data={filteredUsers}
+          sortCol={sortCol}
+          sortAsc={sortAsc}
+          onSort={handleSort}
+          highlightEmail={searchedUser?.email}
+          timeLabel={timeLabel}
+          badgeFilter={badgeFilter}
+          onBadgeFilter={handleBadgeFilter}
+        />
+      </ExpandableCard>
     </div>
   );
 }

src/app/globals.css

@@ -27,6 +27,10 @@ label[for] {
   cursor: pointer;
 }
 
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);