diff --git a/packages/frontend/editor-ui/src/features/catalog/CatalogView.vue b/packages/frontend/editor-ui/src/features/catalog/CatalogView.vue index cd0f5b8e9bd..bb3192ba2b7 100644 --- a/packages/frontend/editor-ui/src/features/catalog/CatalogView.vue +++ b/packages/frontend/editor-ui/src/features/catalog/CatalogView.vue @@ -161,10 +161,14 @@ const scheduleAction = (entry: CatalogEntry) => { }; }; +/** + * To the minute, not the second. A schedule fires on the minute, so the seconds + * are always `00` — three characters of noise on a badge that has to fit a card. + */ const displayTime = (value: string | null) => { if (!value) return ''; const { date, time } = convertToDisplayDate(value); - return `${date} ${time}`; + return `${date} ${time.slice(0, 'HH:MM'.length)}`; }; /** @@ -291,62 +295,69 @@ const removeSchedule = async (subscription: CatalogSubscription) => { @@ -395,7 +406,7 @@ const removeSchedule = async (subscription: CatalogSubscription) => { { { align-items: stretch; gap: var(--spacing--2xs); + // A grid item defaults to min-width: auto, so a nowrap badge wider than the + // track pushes the card past its column instead of letting the text clip. + min-width: 0; +} + +.footer { + display: flex; + flex-direction: column; + gap: var(--spacing--2xs); + width: 100%; + min-width: 0; } .name { @@ -499,6 +521,9 @@ const removeSchedule = async (subscription: CatalogSubscription) => { .actions { display: flex; align-items: center; + // Right-aligned so the primary action sits where the eye lands last, and the + // two icon buttons read as secondary to it. + justify-content: flex-end; gap: var(--spacing--4xs); }