Skip to content

Commit c30e721

Browse files
kitfunsoclaude
kitfunso
and
claude
committed
Improve mobile UX: scrollable tables and fix View Transitions navigation
- Add horizontal scroll (overflow-x-auto + min-w) to calculator tables for better mobile viewing instead of squeezed columns - Fix homepage filters not responding after View Transitions navigation by adding astro:page-load event listener Affected calculators: 401k, ADS, ContractorVsEmployee, Loan, SDLT, UKStampDuty, UK100kTaxTrap, W2To1099 Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent a616ec5 commit c30e721

8 files changed

Lines changed: 228 additions & 217 deletions

File tree

‎src/components/calculators/401kCalculator/Calculator401k.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export default function Calculator401k() {
246246
<h3 className="text-sm font-semibold text-[var(--color-cream)] uppercase tracking-wider mb-4">
247247
Year-by-Year Projection
248248
</h3>
249-
<table className="w-full text-sm">
249+
<table className="w-full text-sm min-w-[550px]">
250250
<thead>
251251
<tr className="text-[var(--color-muted)] text-left">
252252
<th className="pb-2 pr-4">Age</th>

‎src/components/calculators/ADSCalculator/ADSCalculator.tsx‎

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -239,77 +239,79 @@ export default function ADSCalculator() {
239239
LBTT Band Breakdown
240240
</h3>
241241
<div className="bg-white/5 rounded-xl overflow-hidden">
242-
<table className="w-full">
243-
<thead>
244-
<tr className="border-b border-white/10">
245-
<th className="text-left px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
246-
Band
247-
</th>
248-
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
249-
Rate
250-
</th>
251-
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
252-
Tax
253-
</th>
254-
</tr>
255-
</thead>
256-
<tbody>
257-
{result.lbttBands.map((band, index) => (
258-
<tr key={index} className="border-b border-white/5 last:border-0">
259-
<td className="px-4 py-3 text-sm text-[var(--color-subtle)]">
260-
{formatCurrency(band.from)} - {formatCurrency(band.to)}
261-
</td>
262-
<td className="text-right px-4 py-3 text-sm text-[var(--color-subtle)]">
263-
{formatPercent(band.rate * 100, 0)}
264-
</td>
265-
<td className="text-right px-4 py-3 text-sm font-medium text-[var(--color-cream)]">
266-
{formatCurrency(band.taxDue)}
267-
</td>
242+
<div className="overflow-x-auto">
243+
<table className="w-full min-w-[400px]">
244+
<thead>
245+
<tr className="border-b border-white/10">
246+
<th className="text-left px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
247+
Band
248+
</th>
249+
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
250+
Rate
251+
</th>
252+
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
253+
Tax
254+
</th>
268255
</tr>
269-
))}
270-
{result.lbttBands.length === 0 && (
271-
<tr>
272-
<td
273-
colSpan={3}
274-
className="px-4 py-3 text-sm text-[var(--color-muted)] text-center"
275-
>
276-
No LBTT due - below threshold
256+
</thead>
257+
<tbody>
258+
{result.lbttBands.map((band, index) => (
259+
<tr key={index} className="border-b border-white/5 last:border-0">
260+
<td className="px-4 py-3 text-sm text-[var(--color-subtle)]">
261+
{formatCurrency(band.from)} - {formatCurrency(band.to)}
262+
</td>
263+
<td className="text-right px-4 py-3 text-sm text-[var(--color-subtle)]">
264+
{formatPercent(band.rate * 100, 0)}
265+
</td>
266+
<td className="text-right px-4 py-3 text-sm font-medium text-[var(--color-cream)]">
267+
{formatCurrency(band.taxDue)}
268+
</td>
269+
</tr>
270+
))}
271+
{result.lbttBands.length === 0 && (
272+
<tr>
273+
<td
274+
colSpan={3}
275+
className="px-4 py-3 text-sm text-[var(--color-muted)] text-center"
276+
>
277+
No LBTT due - below threshold
278+
</td>
279+
</tr>
280+
)}
281+
</tbody>
282+
<tfoot>
283+
<tr className="bg-white/5">
284+
<td className="px-4 py-3 text-sm font-semibold text-[var(--color-cream)]">
285+
LBTT Total
286+
</td>
287+
<td></td>
288+
<td className="text-right px-4 py-3 text-sm font-bold text-[var(--color-cream)]">
289+
{formatCurrency(result.lbttAmount)}
277290
</td>
278291
</tr>
279-
)}
280-
</tbody>
281-
<tfoot>
282-
<tr className="bg-white/5">
283-
<td className="px-4 py-3 text-sm font-semibold text-[var(--color-cream)]">
284-
LBTT Total
285-
</td>
286-
<td></td>
287-
<td className="text-right px-4 py-3 text-sm font-bold text-[var(--color-cream)]">
288-
{formatCurrency(result.lbttAmount)}
289-
</td>
290-
</tr>
291-
{adsApplies && (
292-
<tr className="bg-purple-950/30">
293-
<td className="px-4 py-3 text-sm font-semibold text-purple-400">
294-
+ ADS (6%)
292+
{adsApplies && (
293+
<tr className="bg-purple-950/30">
294+
<td className="px-4 py-3 text-sm font-semibold text-purple-400">
295+
+ ADS (6%)
296+
</td>
297+
<td></td>
298+
<td className="text-right px-4 py-3 text-sm font-bold text-purple-400">
299+
{formatCurrency(result.adsAmount)}
300+
</td>
301+
</tr>
302+
)}
303+
<tr className="bg-white/10">
304+
<td className="px-4 py-3 text-sm font-bold text-[var(--color-cream)]">
305+
Grand Total
295306
</td>
296307
<td></td>
297308
<td className="text-right px-4 py-3 text-sm font-bold text-purple-400">
298-
{formatCurrency(result.adsAmount)}
309+
{formatCurrency(result.totalTax)}
299310
</td>
300311
</tr>
301-
)}
302-
<tr className="bg-white/10">
303-
<td className="px-4 py-3 text-sm font-bold text-[var(--color-cream)]">
304-
Grand Total
305-
</td>
306-
<td></td>
307-
<td className="text-right px-4 py-3 text-sm font-bold text-purple-400">
308-
{formatCurrency(result.totalTax)}
309-
</td>
310-
</tr>
311-
</tfoot>
312-
</table>
312+
</tfoot>
313+
</table>
314+
</div>
313315
</div>
314316
</div>
315317

‎src/components/calculators/ContractorVsEmployeeCalculator/ContractorVsEmployeeCalculator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -577,7 +577,7 @@ export default function ContractorVsEmployeeCalculator() {
577577
<h3 className="text-sm font-semibold text-[var(--color-cream)] uppercase tracking-wider mb-4">
578578
Detailed Comparison
579579
</h3>
580-
<table className="w-full text-sm">
580+
<table className="w-full text-sm min-w-[400px]">
581581
<thead>
582582
<tr className="border-b border-[var(--color-charcoal)]">
583583
<th className="text-left py-2 text-[var(--color-muted)] font-medium">Item</th>

‎src/components/calculators/LoanCalculator/LoanCalculator.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,8 +212,8 @@ export default function LoanCalculator() {
212212
{/* Amortization Table */}
213213
{showAmortization && (
214214
<div className="bg-[var(--color-night)] rounded-xl border border-white/10 overflow-hidden">
215-
<div className="max-h-96 overflow-y-auto">
216-
<table className="w-full text-sm">
215+
<div className="max-h-96 overflow-y-auto overflow-x-auto">
216+
<table className="w-full text-sm min-w-[500px]">
217217
<thead className="sticky top-0 bg-[var(--color-void)]">
218218
<tr className="text-[var(--color-muted)] uppercase text-xs">
219219
<th className="p-3 text-left">Month</th>

‎src/components/calculators/SDLTCalculator/SDLTCalculator.tsx‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -251,57 +251,59 @@ export default function SDLTCalculator() {
251251
Tax Band Breakdown
252252
</h3>
253253
<div className="bg-white/5 rounded-xl overflow-hidden">
254-
<table className="w-full">
255-
<thead>
256-
<tr className="border-b border-white/10">
257-
<th className="text-left px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
258-
Band
259-
</th>
260-
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
261-
Rate
262-
</th>
263-
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
264-
Tax
265-
</th>
266-
</tr>
267-
</thead>
268-
<tbody>
269-
{result.bands.map((band, index) => (
270-
<tr key={index} className="border-b border-white/5 last:border-0">
271-
<td className="px-4 py-3 text-sm text-[var(--color-subtle)]">
272-
{formatCurrency(band.from)} - {formatCurrency(band.to)}
273-
</td>
274-
<td className="text-right px-4 py-3 text-sm text-[var(--color-subtle)]">
275-
{formatPercent(band.rate * 100, 1)}
276-
</td>
277-
<td className="text-right px-4 py-3 text-sm font-medium text-[var(--color-cream)]">
278-
{formatCurrency(band.taxDue)}
279-
</td>
254+
<div className="overflow-x-auto">
255+
<table className="w-full min-w-[400px]">
256+
<thead>
257+
<tr className="border-b border-white/10">
258+
<th className="text-left px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
259+
Band
260+
</th>
261+
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
262+
Rate
263+
</th>
264+
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
265+
Tax
266+
</th>
280267
</tr>
281-
))}
282-
{result.bands.length === 0 && (
283-
<tr>
284-
<td
285-
colSpan={3}
286-
className="px-4 py-3 text-sm text-[var(--color-muted)] text-center"
287-
>
288-
No tax due - below threshold
268+
</thead>
269+
<tbody>
270+
{result.bands.map((band, index) => (
271+
<tr key={index} className="border-b border-white/5 last:border-0">
272+
<td className="px-4 py-3 text-sm text-[var(--color-subtle)]">
273+
{formatCurrency(band.from)} - {formatCurrency(band.to)}
274+
</td>
275+
<td className="text-right px-4 py-3 text-sm text-[var(--color-subtle)]">
276+
{formatPercent(band.rate * 100, 1)}
277+
</td>
278+
<td className="text-right px-4 py-3 text-sm font-medium text-[var(--color-cream)]">
279+
{formatCurrency(band.taxDue)}
280+
</td>
281+
</tr>
282+
))}
283+
{result.bands.length === 0 && (
284+
<tr>
285+
<td
286+
colSpan={3}
287+
className="px-4 py-3 text-sm text-[var(--color-muted)] text-center"
288+
>
289+
No tax due - below threshold
290+
</td>
291+
</tr>
292+
)}
293+
</tbody>
294+
<tfoot>
295+
<tr className="bg-white/5">
296+
<td className="px-4 py-3 text-sm font-semibold text-[var(--color-cream)]">
297+
Total
298+
</td>
299+
<td></td>
300+
<td className="text-right px-4 py-3 text-sm font-bold text-blue-400">
301+
{formatCurrency(result.sdltAmount)}
289302
</td>
290303
</tr>
291-
)}
292-
</tbody>
293-
<tfoot>
294-
<tr className="bg-white/5">
295-
<td className="px-4 py-3 text-sm font-semibold text-[var(--color-cream)]">
296-
Total
297-
</td>
298-
<td></td>
299-
<td className="text-right px-4 py-3 text-sm font-bold text-blue-400">
300-
{formatCurrency(result.sdltAmount)}
301-
</td>
302-
</tr>
303-
</tfoot>
304-
</table>
304+
</tfoot>
305+
</table>
306+
</div>
305307
</div>
306308
</div>
307309

‎src/components/calculators/UKStampDutyCalculator/UKStampDutyCalculator.tsx‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -209,57 +209,59 @@ export default function UKStampDutyCalculator() {
209209
Tax Band Breakdown
210210
</h3>
211211
<div className="bg-white/5 rounded-xl overflow-hidden">
212-
<table className="w-full">
213-
<thead>
214-
<tr className="border-b border-white/10">
215-
<th className="text-left px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
216-
Band
217-
</th>
218-
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
219-
Rate
220-
</th>
221-
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
222-
Tax
223-
</th>
224-
</tr>
225-
</thead>
226-
<tbody>
227-
{result.bands.map((band, index) => (
228-
<tr key={index} className="border-b border-white/5 last:border-0">
229-
<td className="px-4 py-3 text-sm text-[var(--color-subtle)]">
230-
{formatCurrency(band.from)} – {formatCurrency(band.to)}
231-
</td>
232-
<td className="text-right px-4 py-3 text-sm text-[var(--color-subtle)]">
233-
{formatPercent(band.rate * 100, 1)}
234-
</td>
235-
<td className="text-right px-4 py-3 text-sm font-medium text-[var(--color-cream)]">
236-
{formatCurrency(band.taxDue)}
237-
</td>
212+
<div className="overflow-x-auto">
213+
<table className="w-full min-w-[400px]">
214+
<thead>
215+
<tr className="border-b border-white/10">
216+
<th className="text-left px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
217+
Band
218+
</th>
219+
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
220+
Rate
221+
</th>
222+
<th className="text-right px-4 py-3 text-sm font-medium text-[var(--color-muted)]">
223+
Tax
224+
</th>
238225
</tr>
239-
))}
240-
{result.bands.length === 0 && (
241-
<tr>
242-
<td
243-
colSpan={3}
244-
className="px-4 py-3 text-sm text-[var(--color-muted)] text-center"
245-
>
246-
No tax due - below threshold
226+
</thead>
227+
<tbody>
228+
{result.bands.map((band, index) => (
229+
<tr key={index} className="border-b border-white/5 last:border-0">
230+
<td className="px-4 py-3 text-sm text-[var(--color-subtle)]">
231+
{formatCurrency(band.from)} – {formatCurrency(band.to)}
232+
</td>
233+
<td className="text-right px-4 py-3 text-sm text-[var(--color-subtle)]">
234+
{formatPercent(band.rate * 100, 1)}
235+
</td>
236+
<td className="text-right px-4 py-3 text-sm font-medium text-[var(--color-cream)]">
237+
{formatCurrency(band.taxDue)}
238+
</td>
239+
</tr>
240+
))}
241+
{result.bands.length === 0 && (
242+
<tr>
243+
<td
244+
colSpan={3}
245+
className="px-4 py-3 text-sm text-[var(--color-muted)] text-center"
246+
>
247+
No tax due - below threshold
248+
</td>
249+
</tr>
250+
)}
251+
</tbody>
252+
<tfoot>
253+
<tr className="bg-white/5">
254+
<td className="px-4 py-3 text-sm font-semibold text-[var(--color-cream)]">
255+
Total
256+
</td>
257+
<td></td>
258+
<td className="text-right px-4 py-3 text-sm font-bold text-blue-400">
259+
{formatCurrency(result.totalTax)}
247260
</td>
248261
</tr>
249-
)}
250-
</tbody>
251-
<tfoot>
252-
<tr className="bg-white/5">
253-
<td className="px-4 py-3 text-sm font-semibold text-[var(--color-cream)]">
254-
Total
255-
</td>
256-
<td></td>
257-
<td className="text-right px-4 py-3 text-sm font-bold text-blue-400">
258-
{formatCurrency(result.totalTax)}
259-
</td>
260-
</tr>
261-
</tfoot>
262-
</table>
262+
</tfoot>
263+
</table>
264+
</div>
263265
</div>
264266
</div>
265267

0 commit comments

Comments
 (0)