Skip to content

Commit 7948c86

Browse files
jmpompeojmpompeo
authored
fix: center budget table alignment (#83)
1 parent 620a806 commit 7948c86

1 file changed

Lines changed: 17 additions & 17 deletions

File tree

‎src/web/src/ExpenseTrackerPage.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1244,10 +1244,10 @@ export default function ExpenseTrackerPage() {
12441244
<div className="rounded border border-slate-800">
12451245
<div className="hidden items-center gap-x-3 border-b border-slate-800 px-3 py-2 text-xs uppercase tracking-wide text-slate-400 sm:grid sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,14ch)]">
12461246
<div>Item</div>
1247-
<div className="justify-self-end text-right">Budget</div>
1248-
<div className="justify-self-end text-right">Spent</div>
1249-
<div className="justify-self-end text-right">Remaining</div>
1250-
<div className="justify-self-end text-right">Status</div>
1247+
<div className="justify-self-center text-center">Budget</div>
1248+
<div className="justify-self-center text-center">Spent</div>
1249+
<div className="justify-self-center text-center">Remaining</div>
1250+
<div className="justify-self-center text-center">Status</div>
12511251
</div>
12521252
<div className="divide-y divide-slate-800">
12531253
{groupedBudgetItems.map(group => {
@@ -1320,13 +1320,13 @@ export default function ExpenseTrackerPage() {
13201320
onDragEnd={handleBudgetDragEnd}
13211321
>
13221322
<div className="order-1 font-medium sm:order-none">{category.name}</div>
1323-
<div className="order-4 justify-self-stretch sm:order-none">
1323+
<div className="order-4 justify-self-stretch sm:order-none sm:w-full sm:max-w-[12rem] sm:justify-self-center">
13241324
<input
13251325
type="number"
13261326
min="0"
13271327
step="0.01"
13281328
inputMode="decimal"
1329-
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-right text-sm tabular-nums"
1329+
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-center text-sm tabular-nums"
13301330
value={budgetInputs[category.id] ?? ''}
13311331
onChange={e => setBudgetInputs(prev => ({ ...prev, [category.id]: e.target.value }))}
13321332
onBlur={() => void handleBudgetAutoSave(category.id)}
@@ -1339,16 +1339,16 @@ export default function ExpenseTrackerPage() {
13391339
aria-label={`Budget for ${category.name}`}
13401340
/>
13411341
</div>
1342-
<div className="order-3 justify-self-end text-right tabular-nums text-slate-300 sm:order-none">{formatCurrency(spent)}</div>
1342+
<div className="order-3 justify-self-end text-right tabular-nums text-slate-300 sm:order-none sm:justify-self-center sm:text-center">{formatCurrency(spent)}</div>
13431343
<div
1344-
className={`order-2 justify-self-end text-right font-semibold tabular-nums sm:order-none ${
1344+
className={`order-2 justify-self-end text-right font-semibold tabular-nums sm:order-none sm:justify-self-center sm:text-center ${
13451345
delta >= 0 ? 'text-emerald-300' : 'text-rose-300'
13461346
}`}
13471347
>
13481348
{formatCurrency(delta)}
13491349
</div>
13501350
<div
1351-
className={`order-5 col-span-2 justify-self-end text-right text-xs sm:col-span-1 sm:order-none ${
1351+
className={`order-5 col-span-2 justify-self-end text-right text-xs sm:col-span-1 sm:order-none sm:justify-self-center sm:text-center ${
13521352
status === 'error' ? 'text-rose-300' : status === 'saved' ? 'text-emerald-300' : 'text-slate-400'
13531353
}`}
13541354
>
@@ -1360,16 +1360,16 @@ export default function ExpenseTrackerPage() {
13601360
))}
13611361
<div className="grid grid-cols-2 gap-x-3 gap-y-1 bg-slate-950/60 px-3 py-2 text-xs sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,14ch)]">
13621362
<div className="order-1 font-semibold text-slate-300 sm:order-none">Subtotal</div>
1363-
<div className="order-4 justify-self-end text-right font-semibold tabular-nums text-slate-300 sm:order-none">
1363+
<div className="order-4 justify-self-end text-right font-semibold tabular-nums text-slate-300 sm:order-none sm:justify-self-center sm:text-center">
13641364
{formatCurrency(group.totals.budget)}
13651365
</div>
1366-
<div className="order-3 justify-self-end text-right font-semibold tabular-nums text-slate-300 sm:order-none">
1366+
<div className="order-3 justify-self-end text-right font-semibold tabular-nums text-slate-300 sm:order-none sm:justify-self-center sm:text-center">
13671367
{formatCurrency(group.totals.spent)}
13681368
</div>
1369-
<div className="order-2 justify-self-end text-right font-semibold tabular-nums text-slate-300 sm:order-none">
1369+
<div className="order-2 justify-self-end text-right font-semibold tabular-nums text-slate-300 sm:order-none sm:justify-self-center sm:text-center">
13701370
{formatCurrency(group.totals.remaining)}
13711371
</div>
1372-
<div className="order-5 col-span-2 justify-self-end text-right text-xs text-slate-500 sm:col-span-1 sm:order-none">
1372+
<div className="order-5 col-span-2 justify-self-end text-right text-xs text-slate-500 sm:col-span-1 sm:order-none sm:justify-self-center sm:text-center">
13731373
{group.name}
13741374
</div>
13751375
</div>
@@ -1378,14 +1378,14 @@ export default function ExpenseTrackerPage() {
13781378
})}
13791379
<div className="grid grid-cols-2 gap-x-3 gap-y-1 bg-slate-950/40 px-3 py-2 text-sm sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,14ch)]">
13801380
<div className="order-1 font-semibold text-slate-200 sm:order-none">Total</div>
1381-
<div className="order-4 justify-self-end text-right font-semibold tabular-nums text-slate-200 sm:order-none">
1381+
<div className="order-4 justify-self-end text-right font-semibold tabular-nums text-slate-200 sm:order-none sm:justify-self-center sm:text-center">
13821382
{formatCurrency(budgetTotals.budget)}
13831383
</div>
1384-
<div className="order-3 justify-self-end text-right font-semibold tabular-nums text-slate-200 sm:order-none">
1384+
<div className="order-3 justify-self-end text-right font-semibold tabular-nums text-slate-200 sm:order-none sm:justify-self-center sm:text-center">
13851385
{formatCurrency(budgetTotals.spent)}
13861386
</div>
1387-
<div className="order-2 justify-self-end text-right text-slate-500 sm:order-none">—</div>
1388-
<div className="order-5 col-span-2 justify-self-end text-right text-xs text-slate-500 sm:col-span-1 sm:order-none">Totals</div>
1387+
<div className="order-2 justify-self-end text-right text-slate-500 sm:order-none sm:justify-self-center sm:text-center">—</div>
1388+
<div className="order-5 col-span-2 justify-self-end text-right text-xs text-slate-500 sm:col-span-1 sm:order-none sm:justify-self-center sm:text-center">Totals</div>
13891389
</div>
13901390
</div>
13911391
</div>

0 commit comments

Comments
 (0)