null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

fix: TrackerBucket and SnowballPage minor adjustments

This commit is contained in:
null 2026-06-04 00:50:50 -05:00
parent da4642dbd0
commit 1ea6979903
3 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
HISTORY.md
View File

@ -74,6 +74,9 @@
- **Month navigation brackets the month name** — In TrackerPage the month navigation pill previously showed `< Today >` — the arrows flanked a "Today" button rather than the current month. The pill now shows `< MAY 2026 >` with the month and year as a static label between the arrows, and "Today" promoted to a standalone `variant="outline"` button beside the pill. In CalendarPage the pill already had the correct structure (`< MONTH YEAR >`) but `min-w-40 px-3` (160 px minimum + 24 px of padding) made the label too wide, leaving the arrows visually disconnected from the text. Reduced to `min-w-[8rem] px-1` so the arrows bracket the text tightly. Both labels gain `tabular-nums` (prevents width jitter on month change) and `select-none` (prevents accidental text selection when clicking arrows quickly). - **Month navigation brackets the month name** — In TrackerPage the month navigation pill previously showed `< Today >` — the arrows flanked a "Today" button rather than the current month. The pill now shows `< MAY 2026 >` with the month and year as a static label between the arrows, and "Today" promoted to a standalone `variant="outline"` button beside the pill. In CalendarPage the pill already had the correct structure (`< MONTH YEAR >`) but `min-w-40 px-3` (160 px minimum + 24 px of padding) made the label too wide, leaving the arrows visually disconnected from the text. Reduced to `min-w-[8rem] px-1` so the arrows bracket the text tightly. Both labels gain `tabular-nums` (prevents width jitter on month change) and `select-none` (prevents accidental text selection when clicking arrows quickly).
### Release Image
![Doing my part](/img/doingmypart.jpg)
--- ---
## v0.35.1 ## v0.35.1
@ -91,7 +94,6 @@
![Doing my part](/img/doingmypart.jpg) ![Doing my part](/img/doingmypart.jpg)
--- ---
---
## v0.35.0 ## v0.35.0

16
client/components/tracker/TrackerBucket.jsx
View File

@ -178,15 +178,15 @@ export function TrackerBucket({ label, rows, year, month, refresh, onEditBill, l
<Table className="min-w-[1120px]"> <Table className="min-w-[1120px]">
<TableHeader> <TableHeader>
<TableRow className="border-border/80 bg-background/30 hover:bg-background/30"> <TableRow className="border-border/80 bg-background/30 hover:bg-background/30">
<TableHead className="w-[18%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Bill</TableHead> <TableHead className="w-[18%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground">Bill</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Due</TableHead> <TableHead className="w-[10%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground">Due</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 text-right">Expected</TableHead> <TableHead className="w-[10%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground text-right">Expected</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 text-right">Last Month</TableHead> <TableHead className="w-[10%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground/80 text-right">Last Month</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 text-right">Paid</TableHead> <TableHead className="w-[10%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground text-right">Paid</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Paid Date</TableHead> <TableHead className="w-[10%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground">Paid Date</TableHead>
<TableHead className="w-[9%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Status</TableHead> <TableHead className="w-[9%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground">Status</TableHead>
<TableHead className="w-[10%] py-2.5" /> <TableHead className="w-[10%] py-2.5" />
<TableHead className="w-[23%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 border-l border-border/80 pl-4"> <TableHead className="w-[23%] py-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground border-l border-border/80 pl-4">
Notes Notes
</TableHead> </TableHead>
</TableRow> </TableRow>

2
client/pages/SnowballPage.jsx
View File

@ -992,7 +992,7 @@ export default function SnowballPage() {
<div className="lg:sticky lg:top-24 lg:self-start"> <div className="lg:sticky lg:top-24 lg:self-start">
<ProjectionPanel <ProjectionPanel
projection={displayProjection} projection={displayProjection}
projectionLoading={projectionLoading && !liveSnowball} projectionLoading={projectionLoading}
billCount={bills.length} billCount={bills.length}
/> />
</div> </div>