Backup Job Dashboard Cards#

Overview#

BackupCard is the primary UI component for rendering individual backup job entries in the dashboard. It wraps a <Link> that navigates to /backups/$backupId and renders a shadcn-style Card with two regions: a header (job identity + status) and a content area (schedule/timing rows).

Source: backup-card.tsx

Component Structure#

The card is divided into two sections 1:

Header (CardHeader)#

Contains two rows:

1. Title row — A CalendarClock icon + the schedule name (schedule.name) truncated with truncate, and a BackupStatusDot pinned to the right with shrink-0.
2. Description row — A compact source→destination breadcrumb using HardDrive icon + schedule.volume.name → Database icon + schedule.repository.name, both names using font-mono truncate.

Content (CardContent)#

Three key–value rows, each using the dashed-border spacer pattern 2:

The dashed spacer (flex-1 border-b border-dashed) fills the gap between label and value.

Status Indicator#

BackupStatusDot accepts enabled, hasError, hasWarning, and isInProgress props derived from schedule.lastBackupStatus 3. It maps these to a StatusDot variant (success | neutral | error | warning | info) with priority: in_progress → error → warning → enabled → paused 4.

Text Overflow & Flexbox Patterns#

Long volume or repository names require careful overflow control. Key patterns enforced across the card 5:

• min-w-0 on flex containers — allows flex children to shrink below their natural width; without this, truncate on children has no effect. The <Link> wrapper, <Card>, and <CardContent> all use min-w-0 to ensure proper overflow handling in nested flex/grid layouts.
• shrink-0 on icons and separators — the HardDrive icon, → arrow, and Database icon will never shrink, keeping them visible even when names are very long 6.
• truncate on text nodes — volume and repository name <span>s truncate with ellipsis rather than overflowing 7.
• flex-1 min-w-0 w-0 on the title flex child — used in the title row so the schedule name truncates before pushing the status dot off-screen 8.
• max-w-[60%] truncate with title attribute on cron expression chip — long cron expressions are truncated at 60% of the container width with an ellipsis, while the title={schedule.cronExpression || undefined} provides a tooltip showing the full expression on hover.

The pattern min-w-0 on container + shrink-0 on chrome elements + truncate on text is the standard approach used throughout the codebase for long-content flex rows. 5

Data Model#

BackupCard takes a single schedule: BackupSchedule prop. BackupSchedule is a type alias for GetBackupScheduleResponse from the generated API client 9. Relevant fields used by this component:

• shortId, name, enabled, cronExpression
• lastBackupAt, lastBackupStatus (success | error | in_progress | warning | null)
• nextBackupAt
• volume.name, repository.name

Related Files#

PRs:

• PR #430 – fix dot invisible if volume name too long — added min-w-0 + shrink-0 pattern to description row
• PR #1051 – fix cron expression overflowing — changed cron expression chip from shrink-0 to max-w-[60%] truncate with tooltip; added min-w-0 to <Link>, <Card>, <CardContent>, and schedule row container
• PR #282 – responsive fixes — migrated arbitrary pixel values to Tailwind spacing scale; added container-query (@container/@md:) support to parent layouts