All Docs
FeaturesMaking Tax DigitalUpdated February 27, 2026

Blog: Fixing the Property Detail Transaction Table on Mobile (v1.0.151)

Fixing the Property Detail Transaction Table on Mobile

Release: v1.0.151 | Category: Mobile UI / Breakpoints

What Was Wrong

When landlords opened a property's detail page on a phone — particularly on 375 px-wide devices such as an iPhone SE — the transaction list was almost unusable.

The list was built with a Tailwind CSS grid:

grid grid-cols-1 md:grid-cols-[1fr_5rem_7rem_8rem_auto]

At the md breakpoint and above this produces a clean five-column table:

DescriptionTypeCategoryAmountDate

Below md, however, grid-cols-1 collapses every column into a single full-width row — without any labels. The result was a wall of raw, unstyled values stacked on top of each other:

Monthly rent - Flat 4
payment
Rental Income
£1,200.00
01 Jun 2025

With no headings, no visual grouping, and no typographic differentiation, users had no way to tell at a glance which value was the amount, which was the category, and which was the date.

What Changed

We applied the same MobileTransactionCard pattern already used in the TransactionLedger component. On narrow viewports each transaction is now rendered as a self-contained card with explicitly labelled fields:

┌─────────────────────────────────────┐
│ Monthly rent - Flat 4               │
│ Type:      Payment                  │
│ Category:  Rental Income            │
│ Amount:    £1,200.00                │
│ Date:      01 Jun 2025              │
└─────────────────────────────────────┘

The multi-column grid layout on tablet and desktop is completely unchanged.

File modified: src/app/dashboard/properties/[id]/property-detail.tsx

Why It Matters

Many landlords check their property finances on the go. The Property Detail page is one of the most-visited pages in the dashboard — it surfaces rent payments, maintenance costs, and other transactions at a glance. A broken mobile layout on this page directly undermines the core promise of the platform: effortless visibility into property finances from anywhere.

Consistency Across the App

The MobileTransactionCard component was introduced earlier for TransactionLedger. Reusing it here means both transaction surfaces now behave identically on mobile, and any future improvements to the card design will automatically apply to both pages.

For a full list of changes in this release see the Changelog.