From 74aad4f8293e73bf0a67183ec5597777be5043c7 Mon Sep 17 00:00:00 2001
From: Rachel Shen <rshen@elastic.co>
Date: Wed, 7 Feb 2024 08:56:25 -0700
Subject: [PATCH] [Onboarding] guide card css changes (#176338)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Closes #168401
This PR supports two line titles in guide cards when the guide complete
badge appears it isn't cut by the border of the card.

<img width="1613" alt="Screenshot 2024-02-06 at 1 50 27 PM"
src="https://github.com/elastic/kibana/assets/20343860/6fac3a2e-a174-4b6c-b38e-1f396fa3ba21">
<img width="479" alt="Screenshot 2024-02-06 at 1 50 42 PM"
src="https://github.com/elastic/kibana/assets/20343860/8ac146fb-a763-4651-9588-a6246933631a">
---
 .../landing_page/guide/guide_card.tsx         | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/kbn-guided-onboarding/src/components/landing_page/guide/guide_card.tsx b/packages/kbn-guided-onboarding/src/components/landing_page/guide/guide_card.tsx
index 1194fc5a8d259..a9ea5fbab5b6e 100644
--- a/packages/kbn-guided-onboarding/src/components/landing_page/guide/guide_card.tsx
+++ b/packages/kbn-guided-onboarding/src/components/landing_page/guide/guide_card.tsx
@@ -8,14 +8,7 @@
 
 import React, { Fragment, useCallback, useState } from 'react';
 
-import {
-  EuiCard,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiTextColor,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiCard, EuiFlexGroup, EuiIcon, EuiTextColor, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { css } from '@emotion/react';
@@ -138,7 +131,7 @@ export const GuideCard = ({
 
   const cardCss = css`
     position: relative;
-    height: 125px;
+    height: 150px;
     width: 380px;
     .euiCard__top {
       margin-block-end: 8px;
@@ -149,7 +142,7 @@ export const GuideCard = ({
     }
     @media (min-width: 768px) and (max-width: 1210px) {
       max-width: 230px;
-      height: 175px;
+      height: 200px;
       justify-content: center;
     }
   `;
@@ -175,16 +168,12 @@ export const GuideCard = ({
           )}
           {isComplete && (
             <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="center">
-              <EuiFlexItem grow={false}>
-                <EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <small>
-                  {i18n.translate('guidedOnboardingPackage.gettingStarted.cards.completeLabel', {
-                    defaultMessage: 'Guide complete',
-                  })}
-                </small>
-              </EuiFlexItem>
+              <EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
+              <small>
+                {i18n.translate('guidedOnboardingPackage.gettingStarted.cards.completeLabel', {
+                  defaultMessage: 'Guide complete',
+                })}
+              </small>
             </EuiFlexGroup>
           )}
         </>