diff --git a/frontend/editor/src/core/ui/OptionCard.css b/frontend/editor/src/core/ui/OptionCard.css index b686c8550e..4119292826 100644 --- a/frontend/editor/src/core/ui/OptionCard.css +++ b/frontend/editor/src/core/ui/OptionCard.css @@ -7,8 +7,16 @@ height: 100%; } +/* Icon and title share a row. */ +.sui-option-card__head { + display: flex; + align-items: center; + gap: 0.625rem; +} + .sui-option-card__icon { display: inline-flex; + flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; diff --git a/frontend/editor/src/core/ui/OptionCard.tsx b/frontend/editor/src/core/ui/OptionCard.tsx index 9cc607897f..821b5212bd 100644 --- a/frontend/editor/src/core/ui/OptionCard.tsx +++ b/frontend/editor/src/core/ui/OptionCard.tsx @@ -70,10 +70,12 @@ export function OptionCard({ onKeyDown={interactive ? onKeyDown : undefined} aria-disabled={disabled || undefined} > - - {icon} - -

{title}

+
+ + {icon} + +

{title}

+
{description &&

{description}

} {(disabled ? note : cta) && ( {disabled ? note : cta} diff --git a/frontend/editor/src/portal/views/Pipelines.tsx b/frontend/editor/src/portal/views/Pipelines.tsx index d9eba16c05..a10dbef373 100644 --- a/frontend/editor/src/portal/views/Pipelines.tsx +++ b/frontend/editor/src/portal/views/Pipelines.tsx @@ -299,7 +299,7 @@ export function Pipelines() {

{t("portal.pipelines.templates.title")}

- + {galleryEntries.map((entry) => (