fix(transactions): stop inbox row markers overlapping Belopp on mobile (#2003)
* fix(transactions): stop inbox row markers overlapping Belopp on mobile The inbox row's inline markers (pre-migration marker, edited badge, 1930<->1630 badge) are shrink-0 inside a max-w-0 description cell, so on narrow viewports they overflowed the cell and painted over the amount column. Gate them behind md: (the same pattern TransactionHistoryList already uses), clip the description cell with overflow-hidden as a backstop, and surface the pre-migration context in the row foldout so it stays reachable on mobile. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YQkngviNKUTAwA5dhi2ff1 * fix(transactions): keep edited-title state reachable on mobile without original name CodeRabbit review: the PATCH route can set title_edited_at while original_description is null, and below md both the inline marker (now hidden) and the foldout line (required originalName) disappeared. The foldout now opens on title_edited_at alone and falls back to a generic edited-title line when the original bank name is missing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YQkngviNKUTAwA5dhi2ff1 --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Mattsson
co-authored by
Claude Fable 5
Claude Fable 5
parent
52e99295de
commit
5720632832
@@ -226,14 +226,23 @@ export default function TransactionInboxCard({
|
||||
const showOverflowMenu =
|
||||
showInvoiceMatchButton || showMatchVoucherItem || showAttachDocumentItem || showSplitItem || showEditItem || showMoveAccountItem || showIgnoreItem || showDeleteItem
|
||||
|
||||
// Pre-migration history row (ISO dates compare lexically): most likely
|
||||
// corresponds to an already-imported verifikat, so it carries a quiet
|
||||
// marker steering toward matching rather than re-booking.
|
||||
const isPreMigration = !!preMigrationCutoff && transaction.date <= preMigrationCutoff
|
||||
|
||||
// The foldout carries row detail only (actions live on the row: pill + ⋯).
|
||||
// Rows with nothing to show don't expand at all; classified imported rows
|
||||
// always have at least the payment-method line.
|
||||
const hasFoldoutContent =
|
||||
Boolean(transaction.transaction_method) ||
|
||||
(transaction.currency !== 'SEK' && transaction.amount_sek != null) ||
|
||||
Boolean(transaction.title_edited_at && originalName) ||
|
||||
// No originalName requirement: below md the inline "redigerad" marker is
|
||||
// hidden, so the foldout is the only place the edited state survives; it
|
||||
// must open even when the original bank name is missing.
|
||||
Boolean(transaction.title_edited_at) ||
|
||||
Boolean(skvCounterpartDate) ||
|
||||
isPreMigration ||
|
||||
(HAS_AI_EXTRACTION && (extraction.status === 'running' || extraction.status === 'failed'))
|
||||
const canExpand = hasFoldoutContent
|
||||
// An exiting row's foldout closes with it: the foldout <tr> has no exit
|
||||
@@ -299,28 +308,35 @@ export default function TransactionInboxCard({
|
||||
<td className={cn(TD_CLASS, '!pl-0 whitespace-nowrap tabular-nums text-muted-foreground')}>
|
||||
{formatDate(transaction.date)}
|
||||
</td>
|
||||
<td className={cn(TD_CLASS, 'max-w-0 w-full')}>
|
||||
{/* overflow-hidden: the shrink-0 markers below don't truncate, so on
|
||||
a viewport too narrow for them the cell must clip instead of
|
||||
painting over the Belopp column. */}
|
||||
<td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
|
||||
<span className="row-collapsible flex min-w-0 items-center gap-2">
|
||||
<span className="truncate">{transaction.description}</span>
|
||||
<TransactionAttachmentIndicator documentId={attachedDocumentId} />
|
||||
{/* The markers below are desktop-only (hidden md:*): on mobile
|
||||
they overflowed the cell into Belopp; their info stays
|
||||
reachable in the foldout (TransactionHistoryList gates its
|
||||
markers the same way). */}
|
||||
{transaction.title_edited_at && (
|
||||
<span
|
||||
className="shrink-0 text-xs text-muted-foreground"
|
||||
className="hidden shrink-0 text-xs text-muted-foreground md:inline"
|
||||
title={originalName ? t('original_name_tooltip', { name: originalName }) : undefined}
|
||||
>
|
||||
{t('edited_badge')}
|
||||
</span>
|
||||
)}
|
||||
{skvCounterpartDate && (
|
||||
<Badge variant="warning" className="h-4 shrink-0 gap-1 px-1.5 py-0 text-[10px]">
|
||||
<Badge variant="warning" className="hidden h-4 shrink-0 gap-1 px-1.5 py-0 text-[10px] md:inline-flex">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
Möjlig 1930↔1630
|
||||
</Badge>
|
||||
)}
|
||||
{/* Quiet pre-migration marker (muted text, not a chip: it is
|
||||
context, not an exception state). ISO dates compare lexically. */}
|
||||
{preMigrationCutoff && transaction.date <= preMigrationCutoff && (
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
context, not an exception state). */}
|
||||
{isPreMigration && (
|
||||
<span className="hidden shrink-0 text-xs text-muted-foreground md:inline">
|
||||
{t('pre_migration_marker')}
|
||||
</span>
|
||||
)}
|
||||
@@ -485,7 +501,8 @@ export default function TransactionInboxCard({
|
||||
{transaction.transaction_method ||
|
||||
(transaction.currency !== 'SEK' && transaction.amount_sek != null) ||
|
||||
transaction.title_edited_at ||
|
||||
skvCounterpartDate ? (
|
||||
skvCounterpartDate ||
|
||||
isPreMigration ? (
|
||||
<div className="space-y-1 py-1 text-xs text-muted-foreground">
|
||||
{transaction.transaction_method && (
|
||||
<p>
|
||||
@@ -501,8 +518,12 @@ export default function TransactionInboxCard({
|
||||
{formatCurrency(transaction.amount_sek)}
|
||||
</p>
|
||||
)}
|
||||
{transaction.title_edited_at && originalName && (
|
||||
<p>{t('original_name_tooltip', { name: originalName })}</p>
|
||||
{transaction.title_edited_at && (
|
||||
<p>
|
||||
{originalName
|
||||
? t('original_name_tooltip', { name: originalName })
|
||||
: t('edited_no_original')}
|
||||
</p>
|
||||
)}
|
||||
{skvCounterpartDate && (
|
||||
<p>
|
||||
@@ -510,6 +531,7 @@ export default function TransactionInboxCard({
|
||||
{t('skv_counterpart_body', { date: skvCounterpartDate })}
|
||||
</p>
|
||||
)}
|
||||
{isPreMigration && <p>{t('pre_migration_foldout')}</p>}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
|
||||
@@ -3018,7 +3018,9 @@
|
||||
"delete_aria": "Delete transaction",
|
||||
"edit_title_aria": "Edit title",
|
||||
"edited_badge": "edited",
|
||||
"edited_no_original": "The title has been edited from the bank's original name.",
|
||||
"pre_migration_marker": "from the period before your migration",
|
||||
"pre_migration_foldout": "This transaction is from the period before your migration: it most likely corresponds to an already imported voucher, so match it to an existing voucher rather than booking it again.",
|
||||
"original_name_tooltip": "Original bank name: {name}",
|
||||
"edit_title_dialog_title": "Edit transaction title",
|
||||
"edit_title_warning": "Are you sure you want to edit the title of this transaction?",
|
||||
|
||||
@@ -3018,7 +3018,9 @@
|
||||
"delete_aria": "Ta bort transaktion",
|
||||
"edit_title_aria": "Ändra titel",
|
||||
"edited_badge": "redigerad",
|
||||
"edited_no_original": "Titeln har redigerats från bankens originalnamn.",
|
||||
"pre_migration_marker": "från perioden före din migrering",
|
||||
"pre_migration_foldout": "Transaktionen är från perioden före din migrering: den motsvarar troligen ett redan importerat verifikat, så matcha den hellre mot en befintlig verifikation än att bokföra på nytt.",
|
||||
"original_name_tooltip": "Bankens originalnamn: {name}",
|
||||
"edit_title_dialog_title": "Ändra transaktionens titel",
|
||||
"edit_title_warning": "Är du säker på att du vill ändra titeln på den här transaktionen?",
|
||||
|
||||
Reference in New Issue
Block a user