From 8d2e1ad7c2c024affe67ef6db36fc64180e81171 Mon Sep 17 00:00:00 2001
From: Yuliia Pominchuk <yuliia.pominchuk@n8n.io>
Date: Wed, 5 Aug 2026 14:36:04 +0200
Subject: [PATCH] fix(editor): Fix the catalog card chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three problems, one of them a real bug.

The icon buttons carried `type="tertiary"`, but `N8nIconButton` takes `variant`
— `type` fell through to the DOM as an HTML attribute and the buttons rendered
in the default solid style. All three actions therefore looked equally primary,
and a disabled schedule button looked no different from an enabled one. They are
`variant="ghost"` now, so only Run reads as the primary action.

The footer put the badges and the buttons on one row. A card is ~280px and the
badges alone can fill it, so the buttons were pushed past the card's edge — and
because a grid item defaults to `min-width: auto`, a nowrap badge wider than its
track dragged the whole card out of its column. The two now stack, and the card
may shrink.

The next-run badge showed seconds, which are always `00` for a schedule that
fires on the minute.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/features/catalog/CatalogView.vue      | 141 +++++++++++-------
 1 file changed, 83 insertions(+), 58 deletions(-)

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) => {
 					</N8nText>
 
 					<template #footer>
-						<div :class="$style.meta">
-							<N8nBadge theme="tertiary">
-								<N8nIcon
-									:icon="entry.trigger === 'manual-trigger' ? 'mouse-pointer' : 'workflow'"
-									size="xsmall"
-									:class="$style.badgeIcon"
-								/>
-								{{ triggerLabel(entry) }}
-							</N8nBadge>
-							<N8nBadge theme="default">{{ inputsLabel(entry) }}</N8nBadge>
-							<N8nBadge
-								v-if="ownSchedule(entry).state !== 'none'"
-								:theme="ownSchedule(entry).state === 'scheduled' ? 'success' : 'warning'"
-								data-test-id="catalog-own-schedule"
-							>
-								<N8nIcon icon="calendar" size="xsmall" :class="$style.badgeIcon" />
-								{{ ownScheduleLabel(entry) }}
-							</N8nBadge>
-						</div>
-
-						<div :class="$style.actions">
-							<N8nTooltip :content="i18n.baseText('catalog.card.history')">
-								<N8nIconButton
-									icon="history"
-									type="tertiary"
-									size="small"
-									:aria-label="i18n.baseText('catalog.card.history')"
-									data-test-id="catalog-history-button"
-									@click="openExecutions(entry)"
-								/>
-							</N8nTooltip>
-							<N8nTooltip :content="scheduleAction(entry).label">
-								<!-- Wrapped so the tooltip still fires when the button is disabled. -->
-								<span>
-									<N8nIconButton
-										icon="calendar"
-										type="tertiary"
-										size="small"
-										:disabled="scheduleAction(entry).disabled"
-										:aria-label="scheduleAction(entry).label"
-										data-test-id="catalog-schedule-button"
-										@click="
-											scheduling = { entry, subscription: scheduleAction(entry).subscription }
-										"
+						<!--
+							Stacked rather than side by side: a card is ~280px, and the badges
+							alone can fill that, so competing for one row is what pushed the
+							buttons off the card.
+						-->
+						<div :class="$style.footer">
+							<div :class="$style.meta">
+								<N8nBadge theme="tertiary">
+									<N8nIcon
+										:icon="entry.trigger === 'manual-trigger' ? 'mouse-pointer' : 'workflow'"
+										size="xsmall"
+										:class="$style.badgeIcon"
 									/>
-								</span>
-							</N8nTooltip>
-							<N8nButton
-								size="small"
-								icon="play"
-								:label="i18n.baseText('catalog.run')"
-								:loading="runningId === entry.id"
-								:disabled="runningId !== null && runningId !== entry.id"
-								data-test-id="catalog-run-button"
-								@click="onRunClick(entry)"
-							/>
+									{{ triggerLabel(entry) }}
+								</N8nBadge>
+								<N8nBadge theme="default">{{ inputsLabel(entry) }}</N8nBadge>
+								<N8nBadge
+									v-if="ownSchedule(entry).state !== 'none'"
+									:theme="ownSchedule(entry).state === 'scheduled' ? 'success' : 'warning'"
+									data-test-id="catalog-own-schedule"
+								>
+									<N8nIcon icon="calendar" size="xsmall" :class="$style.badgeIcon" />
+									{{ ownScheduleLabel(entry) }}
+								</N8nBadge>
+							</div>
+
+							<div :class="$style.actions">
+								<N8nTooltip :content="i18n.baseText('catalog.card.history')">
+									<N8nIconButton
+										icon="history"
+										variant="ghost"
+										size="small"
+										:aria-label="i18n.baseText('catalog.card.history')"
+										data-test-id="catalog-history-button"
+										@click="openExecutions(entry)"
+									/>
+								</N8nTooltip>
+								<N8nTooltip :content="scheduleAction(entry).label">
+									<!-- Wrapped so the tooltip still fires when the button is disabled. -->
+									<span>
+										<N8nIconButton
+											icon="calendar"
+											variant="ghost"
+											size="small"
+											:disabled="scheduleAction(entry).disabled"
+											:aria-label="scheduleAction(entry).label"
+											data-test-id="catalog-schedule-button"
+											@click="
+												scheduling = { entry, subscription: scheduleAction(entry).subscription }
+											"
+										/>
+									</span>
+								</N8nTooltip>
+								<N8nButton
+									size="small"
+									icon="play"
+									:label="i18n.baseText('catalog.run')"
+									:loading="runningId === entry.id"
+									:disabled="runningId !== null && runningId !== entry.id"
+									data-test-id="catalog-run-button"
+									@click="onRunClick(entry)"
+								/>
+							</div>
 						</div>
 					</template>
 				</N8nCard>
@@ -395,7 +406,7 @@ const removeSchedule = async (subscription: CatalogSubscription) => {
 							<N8nTooltip :content="i18n.baseText('catalog.schedules.edit')">
 								<N8nIconButton
 									icon="pen"
-									type="tertiary"
+									variant="ghost"
 									size="small"
 									:aria-label="i18n.baseText('catalog.schedules.edit')"
 									data-test-id="catalog-subscription-edit"
@@ -405,7 +416,7 @@ const removeSchedule = async (subscription: CatalogSubscription) => {
 							<N8nTooltip :content="i18n.baseText('catalog.schedules.remove')">
 								<N8nIconButton
 									icon="trash-2"
-									type="tertiary"
+									variant="ghost"
 									size="small"
 									:aria-label="i18n.baseText('catalog.schedules.remove')"
 									data-test-id="catalog-subscription-remove"
@@ -465,6 +476,17 @@ 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);
 }