From 1476c905707d38c7719e4d3d6fea0706afcb618b Mon Sep 17 00:00:00 2001
From: Tyler <tyler@crispygoat.com>
Date: Sat, 20 Jun 2026 16:51:17 -0600
Subject: [PATCH] style(frontend): mobile responsive polish for
 Dashboard/Providers/Upload/Reconciliation

---
 src/pages/Dashboard.tsx      | 10 +++++-----
 src/pages/Providers.tsx      |  6 +++---
 src/pages/Reconciliation.tsx | 30 ++++++++++++++++--------------
 src/pages/Upload.tsx         | 16 +++++++++-------
 4 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index ea76b32..31299cd 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -108,7 +108,7 @@ export function Dashboard() {
   const sectionBase = kpiBase + kpiStep * 5 + 60; // after the last KPI
 
   return (
-    <div className="space-y-10">
+    <div className="space-y-6 md:space-y-10">
       {/* Hero */}
       <header
         className="relative animate-fade-in overflow-hidden"
@@ -129,13 +129,13 @@ export function Dashboard() {
             {fmt.usd(kpis.billed)}
           </div>
 
-          <div className="relative z-10 flex items-end justify-between gap-6 flex-wrap">
-            <div>
+          <div className="relative z-10 flex items-end justify-between gap-4 sm:gap-6 flex-wrap">
+            <div className="min-w-0">
               <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
                 <span className="inline-block h-px w-6 bg-border" />
                 Today · {fmt.date(new Date().toISOString())}
               </div>
-              <h1 className="text-[28px] leading-[1.15] font-semibold tracking-tight">
+              <h1 className="text-[22px] sm:text-[28px] leading-[1.15] font-semibold tracking-tight">
                 Good morning, Jordan.
               </h1>
               <p className="text-muted-foreground mt-1.5 max-w-xl text-[14px] leading-relaxed">
@@ -157,7 +157,7 @@ export function Dashboard() {
       {/* KPIs — every card carries a trend. */}
       <section
         aria-label="Key performance indicators"
-        className="grid gap-4 grid-cols-2 lg:grid-cols-5"
+        className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5"
       >
         <KpiCard
           label="Claims"
diff --git a/src/pages/Providers.tsx b/src/pages/Providers.tsx
index ab2d705..f56e45e 100644
--- a/src/pages/Providers.tsx
+++ b/src/pages/Providers.tsx
@@ -10,13 +10,13 @@ export function Providers() {
   const items = data?.items ?? [];
 
   return (
-    <div className="space-y-8 animate-fade-in">
+    <div className="space-y-6 md:space-y-8 animate-fade-in">
       <header>
         <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
           <span className="inline-block h-px w-6 bg-border" />
           Providers
         </div>
-        <h1 className="text-[22px] font-semibold tracking-tight">Provider directory</h1>
+        <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">Provider directory</h1>
         <p className="text-muted-foreground mt-1.5 text-[14px]">
           NPIs registered with the clearinghouse for 837P submission and 835
           remittance retrieval.
@@ -49,7 +49,7 @@ export function Providers() {
           {items.map((p) => (
             <article
               key={p.npi}
-              className="surface rounded-xl p-6 flex flex-col gap-4 hover:bg-muted/20 transition-colors"
+              className="surface rounded-xl p-4 sm:p-6 flex flex-col gap-4 hover:bg-muted/20 transition-colors"
             >
               <div className="flex items-start gap-3">
                 <div className="h-10 w-10 rounded-lg bg-muted/60 flex items-center justify-center text-foreground">
diff --git a/src/pages/Reconciliation.tsx b/src/pages/Reconciliation.tsx
index d57ebd1..044511c 100644
--- a/src/pages/Reconciliation.tsx
+++ b/src/pages/Reconciliation.tsx
@@ -27,17 +27,17 @@ export function ReconciliationPage() {
 
   if (unmatched.isLoading) {
     return (
-      <div className="space-y-8 animate-fade-in">
+      <div className="space-y-6 md:space-y-8 animate-fade-in">
         <header>
           <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
             <span className="inline-block h-px w-6 bg-border" />
             Reconciliation
           </div>
-          <h1 className="text-[22px] font-semibold tracking-tight">
+          <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
             Manual pairing
           </h1>
         </header>
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Skeleton variant="default" height={320} />
           <Skeleton variant="default" height={320} />
         </div>
@@ -51,13 +51,13 @@ export function ReconciliationPage() {
         ? unmatched.error.message
         : String(unmatched.error);
     return (
-      <div className="space-y-8 animate-fade-in">
+      <div className="space-y-6 md:space-y-8 animate-fade-in">
         <header>
           <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
             <span className="inline-block h-px w-6 bg-border" />
             Reconciliation
           </div>
-          <h1 className="text-[22px] font-semibold tracking-tight">
+          <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
             Manual pairing
           </h1>
         </header>
@@ -78,13 +78,13 @@ export function ReconciliationPage() {
 
   if (empty) {
     return (
-      <div className="space-y-8 animate-fade-in">
+      <div className="space-y-6 md:space-y-8 animate-fade-in">
         <header>
           <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
             <span className="inline-block h-px w-6 bg-border" />
             Reconciliation
           </div>
-          <h1 className="text-[22px] font-semibold tracking-tight">
+          <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
             Manual pairing
           </h1>
         </header>
@@ -125,13 +125,13 @@ export function ReconciliationPage() {
   };
 
   return (
-    <div className="space-y-8 animate-fade-in">
+    <div className="space-y-6 md:space-y-8 animate-fade-in">
       <header>
         <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
           <span className="inline-block h-px w-6 bg-border" />
           Reconciliation
         </div>
-        <h1 className="text-[22px] font-semibold tracking-tight">
+        <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
           Manual pairing
         </h1>
         <p className="text-muted-foreground mt-1.5 text-[14px]">
@@ -139,7 +139,7 @@ export function ReconciliationPage() {
         </p>
       </header>
 
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {/* Claims column */}
         <div className="surface rounded-xl border border-border/60 p-4 space-y-2">
           <h2 className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
@@ -155,7 +155,7 @@ export function ReconciliationPage() {
                   onClick={() => setSelectedClaim(c.id)}
                   aria-pressed={active}
                   className={cn(
-                    "w-full text-left p-3 rounded-md border transition-colors",
+                    "w-full text-left p-3 min-h-[44px] rounded-md border transition-colors",
                     active
                       ? "border-accent bg-accent/5"
                       : "border-border/60 hover:border-border"
@@ -190,7 +190,7 @@ export function ReconciliationPage() {
                   onClick={() => setSelectedRemit(r.id)}
                   aria-pressed={active}
                   className={cn(
-                    "w-full text-left p-3 rounded-md border transition-colors",
+                    "w-full text-left p-3 min-h-[44px] rounded-md border transition-colors",
                     active
                       ? "border-accent bg-accent/5"
                       : "border-border/60 hover:border-border"
@@ -215,10 +215,11 @@ export function ReconciliationPage() {
         </div>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 flex-wrap">
         <Button
           onClick={handleMatch}
           disabled={!selectedClaim || !selectedRemit || match.isPending}
+          className="min-h-[44px] sm:min-h-0"
         >
           <GitMerge className="h-3.5 w-3.5 mr-1.5" />
           Match selected
@@ -227,12 +228,13 @@ export function ReconciliationPage() {
           variant="outline"
           onClick={handleClear}
           disabled={(!selectedClaim && !selectedRemit) || match.isPending}
+          className="min-h-[44px] sm:min-h-0"
         >
           <X className="h-3.5 w-3.5 mr-1.5" />
           Clear selection
         </Button>
         {selectedClaim || selectedRemit ? (
-          <span className="text-xs text-muted-foreground ml-2">
+          <span className="text-xs text-muted-foreground sm:ml-2 basis-full sm:basis-auto">
             {selectedClaim ? `Claim ${selectedClaim}` : "No claim"}
             {" · "}
             {selectedRemit ? `Remit ${selectedRemit}` : "No remit"}
diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx
index 1eea36b..343e6f7 100644
--- a/src/pages/Upload.tsx
+++ b/src/pages/Upload.tsx
@@ -233,7 +233,7 @@ function ClaimCard837({ claim }: { claim: ClaimOutput }) {
               <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-1.5">
                 Service lines
               </div>
-              <div className="rounded-md border border-border/40 overflow-hidden">
+              <div className="rounded-md border border-border/40 overflow-x-auto">
                 <table className="w-full text-[12px]">
                   <thead className="bg-muted/30">
                     <tr className="text-left text-muted-foreground">
@@ -403,7 +403,7 @@ function ClaimCard835({ claim }: { claim: ClaimPayment }) {
               <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-1.5">
                 Service payments
               </div>
-              <div className="rounded-md border border-border/40 overflow-hidden">
+              <div className="rounded-md border border-border/40 overflow-x-auto">
                 <table className="w-full text-[12px]">
                   <thead className="bg-muted/30">
                     <tr className="text-left text-muted-foreground">
@@ -584,13 +584,13 @@ export function Upload() {
   }
 
   return (
-    <div className="space-y-8 animate-fade-in">
+    <div className="space-y-6 md:space-y-8 animate-fade-in">
       <header>
         <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
           <span className="inline-block h-px w-6 bg-border" />
           Upload · EDI parser
         </div>
-        <h1 className="text-[22px] font-semibold tracking-tight">
+        <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
           Parse an X12 file
         </h1>
         <p className="text-muted-foreground mt-1.5 text-[14px] max-w-2xl">
@@ -665,7 +665,7 @@ export function Upload() {
               if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
             }}
             className={cn(
-              "relative flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border/60 bg-muted/20 px-6 py-8 cursor-pointer transition-colors",
+              "relative flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border/60 bg-muted/20 px-6 py-10 sm:py-8 min-h-[140px] sm:min-h-[120px] cursor-pointer transition-colors",
               "hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             )}
           >
@@ -704,7 +704,7 @@ export function Upload() {
             />
           </div>
 
-          <div className="flex items-center justify-between gap-3">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div className="text-[12px] text-muted-foreground">
               {api.isConfigured ? (
                 <span className="inline-flex items-center gap-1.5">
@@ -721,12 +721,13 @@ export function Upload() {
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-wrap">
               {file ? (
                 <Button
                   variant="ghost"
                   onClick={() => pickFile(null)}
                   disabled={running}
+                  className="min-h-[44px] sm:min-h-0"
                 >
                   Clear
                 </Button>
@@ -734,6 +735,7 @@ export function Upload() {
               <Button
                 onClick={onParse}
                 disabled={!file || running}
+                className="min-h-[44px] sm:min-h-0"
               >
                 {running ? (
                   <>