Mobile view fixes (#189)
* fix: make new user checklist mobile responsive Adjust spacing, padding, typography, and indentation for small screens so the onboarding welcome screen works well on mobile devices. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: make expenses and bookkeeping verification views mobile responsive - Expenses/new: stack form grids on mobile, replace line items table with card layout, full-width action buttons - Expenses/[id]: stack header and actions, card layout for line items and payments, single-column info grid on mobile - JournalEntryList: unify verification lines into card layout for all screen sizes, hide redundant line descriptions that duplicate account name or entry description, stack filter bar and action buttons on mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: remove stray )); in provider_consents migration Syntax error on line 35 caused MIGRATIONS_FAILED on the Supabase staging branch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: enhance mobile responsiveness for invoices page and update dialog styles * fix: make arcim migration active connections card mobile responsive Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mattsson
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
d5410a518f
commit
3dd1f782c3
@@ -217,46 +217,57 @@ function ProviderStep({
|
||||
return (
|
||||
<div
|
||||
key={consent.id}
|
||||
className="flex items-center gap-4 rounded-lg border border-border bg-card p-4"
|
||||
className="rounded-lg border border-border bg-card p-4"
|
||||
>
|
||||
<img
|
||||
src={PROVIDER_LOGOS[consent.provider]}
|
||||
alt={providerInfo?.name ?? consent.provider}
|
||||
className="h-10 w-10 shrink-0 rounded-lg object-contain"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{providerInfo?.name ?? consent.provider}</p>
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
Ansluten
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 space-y-0.5">
|
||||
{consent.companyName && (
|
||||
<p className="text-xs text-muted-foreground">{consent.companyName}</p>
|
||||
)}
|
||||
{lastImport ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Senaste import: {new Date(lastImport.imported_at ?? lastImport.created_at).toLocaleDateString('sv-SE')}
|
||||
{lastImport.transactions_count != null && ` — ${lastImport.transactions_count} verifikationer`}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Ansluten {consent.createdAt ? new Date(consent.createdAt).toLocaleDateString('sv-SE') : ''}
|
||||
</p>
|
||||
)}
|
||||
{(connectionStatus?.entityCounts.customers ?? 0) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{connectionStatus?.entityCounts.customers} kunder, {connectionStatus?.entityCounts.suppliers} leverantörer, {connectionStatus?.entityCounts.invoices} fakturor
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-start gap-3 sm:items-center sm:gap-4">
|
||||
<img
|
||||
src={PROVIDER_LOGOS[consent.provider]}
|
||||
alt={providerInfo?.name ?? consent.provider}
|
||||
className="h-10 w-10 shrink-0 rounded-lg object-contain"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{providerInfo?.name ?? consent.provider}</p>
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
Ansluten
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 space-y-0.5">
|
||||
{consent.companyName && (
|
||||
<p className="text-xs text-muted-foreground">{consent.companyName}</p>
|
||||
)}
|
||||
{lastImport ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Senaste import: {new Date(lastImport.imported_at ?? lastImport.created_at).toLocaleDateString('sv-SE')}
|
||||
{lastImport.transactions_count != null && ` — ${lastImport.transactions_count} verifikationer`}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Ansluten {consent.createdAt ? new Date(consent.createdAt).toLocaleDateString('sv-SE') : ''}
|
||||
</p>
|
||||
)}
|
||||
{(connectionStatus?.entityCounts.customers ?? 0) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{connectionStatus?.entityCounts.customers} kunder, {connectionStatus?.entityCounts.suppliers} leverantörer, {connectionStatus?.entityCounts.invoices} fakturor
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="hidden shrink-0 text-muted-foreground hover:text-destructive sm:inline-flex"
|
||||
onClick={() => onDisconnect(consent.id)}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-2">
|
||||
<div className="mt-3 flex items-center gap-2 sm:mt-0 sm:pl-[52px]">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 sm:flex-none"
|
||||
onClick={() => onResync(consent.provider, consent.id)}
|
||||
>
|
||||
<RotateCcw className="mr-1.5 h-3.5 w-3.5" />
|
||||
@@ -265,7 +276,7 @@ function ProviderStep({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
className="shrink-0 text-muted-foreground hover:text-destructive sm:hidden"
|
||||
onClick={() => onDisconnect(consent.id)}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5" />
|
||||
|
||||
Reference in New Issue
Block a user