[Onboarding] guide card css changes (elastic#176338)

## Summary Closes elastic#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">
PhilippeOberti · Feb 7, 2024 · 74aad4f · 74aad4f
1 parent e9e7304
commit 74aad4f
Showing 1 changed file with 9 additions and 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
@@ -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>
           )}
         </>