zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
38
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: costs chart overflow and toggle button styling (#648)

- use slice-based filtering for time ranges (shows last N days)
- fix chart overflow with flex shrink and min-width: 0
- add font-family: inherit to toggle buttons
- reduce label font size and add overflow handling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

authored by

nate nowack
Claude Opus 4.5 and committed by
GitHub a2ade221 be06e6a3

+19 -10
+19 -10
frontend/src/routes/costs/+page.svelte
··· 62 62 let timeRange = $state<'day' | 'week' | 'month'>('month'); 63 63 64 64 // filter daily data based on selected time range 65 + // returns the last N days of data based on selection 65 66 let filteredDaily = $derived.by(() => { 66 67 if (!data?.costs.audd.daily.length) return []; 67 - const now = Date.now(); 68 - let cutoffMs: number; 68 + const daily = data.costs.audd.daily; 69 69 if (timeRange === 'day') { 70 - cutoffMs = now - 24 * 60 * 60 * 1000; 70 + // show last 2 days (today + yesterday) for 24h view 71 + return daily.slice(-2); 71 72 } else if (timeRange === 'week') { 72 - cutoffMs = now - 7 * 24 * 60 * 60 * 1000; 73 + // show last 7 days 74 + return daily.slice(-7); 73 75 } else { 74 - cutoffMs = now - 30 * 24 * 60 * 60 * 1000; 76 + // show all (up to 30 days) 77 + return daily; 75 78 } 76 - return data.costs.audd.daily.filter((d) => new Date(d.date).getTime() >= cutoffMs); 77 79 }); 78 80 79 81 // calculate totals for selected time range ··· 505 507 506 508 .time-range-toggle button { 507 509 padding: 0.35rem 0.75rem; 510 + font-family: inherit; 508 511 font-size: 0.75rem; 509 512 font-weight: 500; 510 513 background: transparent; ··· 582 585 border: 1px solid var(--border-subtle); 583 586 border-radius: 8px; 584 587 padding: 1rem; 588 + overflow: hidden; 585 589 } 586 590 587 591 .daily-chart h3 { ··· 595 599 .chart-bars { 596 600 display: flex; 597 601 align-items: flex-end; 598 - gap: 4px; 602 + gap: 2px; 599 603 height: 100px; 604 + width: 100%; 600 605 } 601 606 602 607 .chart-bar-container { 603 - flex: 1; 608 + flex: 1 1 0; 609 + min-width: 0; 604 610 display: flex; 605 611 flex-direction: column; 606 612 align-items: center; ··· 621 627 } 622 628 623 629 .chart-label { 624 - font-size: 0.6rem; 630 + font-size: 0.55rem; 625 631 color: var(--text-tertiary); 626 - margin-top: 0.5rem; 632 + margin-top: 0.25rem; 627 633 white-space: nowrap; 634 + overflow: hidden; 635 + text-overflow: ellipsis; 636 + max-width: 100%; 628 637 } 629 638 630 639 /* support section */