tyler/cyclone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(frontend): mobile responsive polish for Dashboard/Providers/Upload/Reconciliation

Browse Source
This commit is contained in:
Tyler
2026-06-20 16:51:17 -06:00
parent b980e77cf2
commit 1476c90570
4 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Reconciliation.tsx
+16 -14
View File
@@ -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"}