From 9b9d98e9c6c2855db148a2d0574bb310490a8f9a Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Wed, 11 Sep 2024 18:57:58 +0800
Subject: [PATCH 01/21] fix: fix width

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../__snapshots__/feature_cards.test.tsx.snap | 64 +++++++------------
 .../feature_cards/feature_cards.test.tsx      |  3 +-
 .../feature_cards/feature_cards.tsx           | 55 ++++++----------
 3 files changed, 44 insertions(+), 78 deletions(-)

diff --git a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
index e5f9a1975d83..59d957733871 100644
--- a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
+++ b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
@@ -11,15 +11,15 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
         class="euiSpacer euiSpacer--m"
       />
       <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_0"
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_1"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -47,11 +47,12 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_2"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -79,11 +80,12 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_3"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -111,11 +113,12 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_4"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -142,17 +145,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_1"
-      >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_5"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -179,15 +178,6 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
       </div>
       <div
         class="euiSpacer euiSpacer--l"
@@ -203,15 +193,15 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
         class="euiSpacer euiSpacer--m"
       />
       <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_0"
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-1"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -239,11 +229,12 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-2"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -271,11 +262,12 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-3"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -303,11 +295,12 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-4"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -334,17 +327,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_1"
-      >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-5"
+            style="width: 200px;"
           >
             <div
               class="euiCard__content"
@@ -371,15 +360,6 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
       </div>
       <div
         class="euiSpacer euiSpacer--l"
diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx
index 95d1ba5a64f3..108db8c98861 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx
@@ -103,7 +103,7 @@ describe('<FeatureCards />', () => {
   });
 
   it('render with complex navLinks', () => {
-    const { container, getAllByTestId } = render(
+    const { container } = render(
       <FeatureCards
         pageDescription=""
         navLinks={navLinks}
@@ -113,7 +113,6 @@ describe('<FeatureCards />', () => {
       />
     );
     expect(container).toMatchSnapshot();
-    expect(getAllByTestId('landingPageRow_1').length).toEqual(2);
   });
 
   it('click item', () => {
diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
index d308f185d602..2d2a3756654f 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
@@ -30,26 +30,20 @@ export const FeatureCards = ({
   pageDescription,
   navigationUI: { HeaderControl },
 }: FeatureCardsProps) => {
-  const itemsPerRow = 4;
   const groupedCardForDisplay = useMemo(() => {
-    const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[][] }> = [];
+    const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[] }> = [];
     // The navLinks has already been sorted based on link / category's order,
     // so it is safe to group the links here.
     navLinks.forEach((link) => {
       let lastGroup = grouped.length ? grouped[grouped.length - 1] : undefined;
       if (!lastGroup || lastGroup.category?.id !== link.category?.id) {
-        lastGroup = { category: link.category, navLinks: [[]] };
+        lastGroup = { category: link.category, navLinks: [] };
         grouped.push(lastGroup);
       }
-      const lastRow = lastGroup.navLinks[lastGroup.navLinks.length - 1];
-      if (lastRow.length < itemsPerRow) {
-        lastRow.push(link);
-      } else {
-        lastGroup.navLinks.push([link]);
-      }
+      lastGroup.navLinks.push(link);
     });
     return grouped;
-  }, [itemsPerRow, navLinks]);
+  }, [navLinks]);
   if (!navLinks.length) {
     return null;
   }
@@ -72,30 +66,23 @@ export const FeatureCards = ({
               </EuiTitle>
             )}
             <EuiSpacer size="m" />
-            {group.navLinks.map((row, rowIndex) => {
-              return (
-                <EuiFlexGroup data-test-subj={`landingPageRow_${rowIndex}`} key={rowIndex}>
-                  {Array.from({ length: itemsPerRow }).map((item, itemIndexInRow) => {
-                    const link = row[itemIndexInRow];
-                    const content = link ? (
-                      <EuiCard
-                        data-test-subj={`landingPageFeature_${link.id}`}
-                        textAlign="left"
-                        title={link.title}
-                        description={link.description || link.title}
-                        onClick={() => navigateToApp(link.id)}
-                        titleSize="xs"
-                      />
-                    ) : null;
-                    return (
-                      <EuiFlexItem key={link?.id || itemIndexInRow} grow={1}>
-                        {content}
-                      </EuiFlexItem>
-                    );
-                  })}
-                </EuiFlexGroup>
-              );
-            })}
+            <EuiFlexGroup wrap>
+              {group.navLinks.map((link, index) => {
+                return (
+                  <EuiFlexItem key={link?.id || index} grow={false}>
+                    <EuiCard
+                      data-test-subj={`landingPageFeature_${link.id}`}
+                      textAlign="left"
+                      title={link.title}
+                      description={link.description || link.title}
+                      onClick={() => navigateToApp(link.id)}
+                      titleSize="xs"
+                      style={{ width: 200 }}
+                    />
+                  </EuiFlexItem>
+                );
+              })}
+            </EuiFlexGroup>
             <EuiSpacer />
           </div>
         ))}

From 638c902263090b5cb5a02044c8a54912949d9dcc Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Wed, 11 Sep 2024 19:09:43 +0800
Subject: [PATCH 02/21] feat: use workspace color

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../ui/header/collapsible_nav_group_enabled_top.scss   |  3 ---
 .../ui/header/collapsible_nav_group_enabled_top.tsx    | 10 ++++++++--
 2 files changed, 8 insertions(+), 5 deletions(-)
 delete mode 100644 src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
deleted file mode 100644
index 25f4385775ec..000000000000
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.leftNavTopIcon {
-  color: $euiColorMediumShade;
-}
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 3d1535992a3f..15a41c13d523 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -22,7 +22,13 @@ import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav
 import { ChromeNavLink } from '../../nav_links';
 import { ALL_USE_CASE_ID } from '../../../../../core/utils';
 import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
-import './collapsible_nav_group_enabled_top.scss';
+
+// Reference https://github.com/opensearch-project/oui/blob/main/src/services/color/is_valid_hex.ts
+const validateWorkspaceColor = (color?: string) =>
+  !!color && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
+
+const getValidWorkspaceColor = (color?: string) =>
+  validateWorkspaceColor(color) ? color : undefined;
 
 export interface CollapsibleNavTopProps {
   homeLink?: ChromeNavLink;
@@ -131,8 +137,8 @@ export const CollapsibleNavTop = ({
               <EuiIcon
                 type={icon}
                 size="l"
-                className="leftNavTopIcon"
                 data-test-subj={`collapsibleNavIcon-${icon}`}
+                color={getValidWorkspaceColor(currentWorkspace?.color)}
               />
             </EuiButtonEmpty>
           </EuiFlexItem>

From c70d8a919bd2f38ce468771480f42838cdd3db7a Mon Sep 17 00:00:00 2001
From: "opensearch-changeset-bot[bot]"
 <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Date: Wed, 11 Sep 2024 11:14:12 +0000
Subject: [PATCH 03/21] Changeset file for PR #8140 created/updated

---
 changelogs/fragments/8140.yml | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 changelogs/fragments/8140.yml

diff --git a/changelogs/fragments/8140.yml b/changelogs/fragments/8140.yml
new file mode 100644
index 000000000000..3efd2aff2257
--- /dev/null
+++ b/changelogs/fragments/8140.yml
@@ -0,0 +1,2 @@
+feat:
+- [navigation] Fit and finish issues collective for left nav and landing page ([#8140](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8140))
\ No newline at end of file

From 57fe9a41b0e4bc3bbf0bb4715842cdbc58880816 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Wed, 11 Sep 2024 19:50:47 +0800
Subject: [PATCH 04/21] feat: style fit and finish for left nav

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 ...ollapsible_nav_group_enabled.test.tsx.snap | 18 ++++++++++---
 .../collapsible_nav_groups.test.tsx.snap      |  9 +++++--
 .../header/collapsible_nav_group_enabled.scss | 25 +++++++++++++++++--
 .../header/collapsible_nav_group_enabled.tsx  |  1 +
 .../collapsible_nav_group_enabled_top.tsx     |  2 +-
 .../ui/header/collapsible_nav_groups.tsx      | 13 ++++++++--
 6 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index b3a010659c21..8977d03f7d98 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
+        style="padding-top: 0px;"
       >
         <div
           class="euiFlexItem"
@@ -51,6 +52,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                     >
                       <div
                         class="euiText euiText--extraSmall"
+                        style="font-size: 14px; line-height: 16px;"
                       >
                         link-in-all
                       </div>
@@ -59,7 +61,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                 </button>
               </div>
               <div
-                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems nav-link-item-category-item"
               >
                 <div
                   aria-label="Observability"
@@ -73,7 +75,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="Observability"
                     >
                       <div
-                        class="nav-link-item"
+                        class="nav-link-item nav-link-item-category-title"
                       >
                         Observability
                       </div>
@@ -101,6 +103,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                         >
                           <div
                             class="euiText euiText--extraSmall"
+                            style="font-size: 14px; line-height: 16px;"
                           >
                             link-in-observability
                           </div>
@@ -132,6 +135,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                             >
                               <div
                                 class="euiText euiText--extraSmall"
+                                style="font-size: 14px; line-height: 16px;"
                               >
                                 See all...
                               </div>
@@ -144,7 +148,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                 </div>
               </div>
               <div
-                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems nav-link-item-category-item"
               >
                 <div
                   aria-label="Essentials"
@@ -158,7 +162,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="Essentials"
                     >
                       <div
-                        class="nav-link-item"
+                        class="nav-link-item nav-link-item-category-title"
                       >
                         Essentials
                       </div>
@@ -186,6 +190,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                         >
                           <div
                             class="euiText euiText--extraSmall"
+                            style="font-size: 14px; line-height: 16px;"
                           >
                             link-in-essentials
                           </div>
@@ -217,6 +222,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                             >
                               <div
                                 class="euiText euiText--extraSmall"
+                                style="font-size: 14px; line-height: 16px;"
                               >
                                 See all...
                               </div>
@@ -289,6 +295,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
+        style="padding-top: 0px;"
       >
         <div
           class="euiFlexItem"
@@ -318,6 +325,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
                     >
                       <div
                         class="euiText euiText--extraSmall"
+                        style="font-size: 14px; line-height: 16px;"
                       >
                         link-in-essentials
                       </div>
@@ -362,6 +370,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
+        style="padding-top: 0px;"
       >
         <div
           class="euiFlexItem"
@@ -391,6 +400,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
                     >
                       <div
                         class="euiText euiText--extraSmall"
+                        style="font-size: 14px; line-height: 16px;"
                       >
                         link-in-essentials
                       </div>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 3d923a49dd80..097e41e560f3 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--extraSmall"
+                      style="font-size: 14px; line-height: 16px;"
                     >
                       pure link
                     </div>
@@ -77,6 +78,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                       >
                         <div
                           class="euiText euiText--extraSmall"
+                          style="font-size: 14px; line-height: 16px;"
                         >
                           subLink
                         </div>
@@ -89,7 +91,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
           </div>
         </div>
         <div
-          class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+          class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems nav-link-item-category-item"
         >
           <div
             aria-label="category-1"
@@ -103,7 +105,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                 title="category-1"
               >
                 <div
-                  class="nav-link-item"
+                  class="nav-link-item nav-link-item-category-title"
                 >
                   category-1
                 </div>
@@ -131,6 +133,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--extraSmall"
+                      style="font-size: 14px; line-height: 16px;"
                     >
                       link-in-category
                     </div>
@@ -161,6 +164,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                       >
                         <div
                           class="euiText euiText--extraSmall"
+                          style="font-size: 14px; line-height: 16px;"
                         >
                           sub-link-in-category
                         </div>
@@ -188,6 +192,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--extraSmall"
+                      style="font-size: 14px; line-height: 16px;"
                     >
                       link-in-category-2
                     </div>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index 27537d9af8eb..f709a7f3270f 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -1,15 +1,23 @@
 .context-nav-wrapper {
   border: none !important;
 
+  .leftNavGroupTitle {
+    padding: 0 $euiSizeS;
+    font-weight: 400;
+  }
+
   .nav-link-item {
-    padding: calc($euiSize / 4) $euiSize;
-    border-radius: $euiSize;
+    padding: $euiSizeS $euiSize;
+    border-radius: $euiSizeS;
+    font-size: 14px;
     box-shadow: none;
     margin-bottom: 0;
     margin-top: 0;
 
     .nav-link-item-btn {
       margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
 
       &::after {
         display: none;
@@ -17,6 +25,19 @@
     }
   }
 
+  .nav-link-item-category-item {
+    margin-top: $euiSizeL;
+
+    > * {
+      margin-bottom: 0;
+    }
+  }
+
+  .nav-link-item-category-title {
+    line-height: 16px;
+    padding: $euiSizeS $euiSize;
+  }
+
   .nav-link-parent-item-button {
     > span {
       flex-direction: row-reverse;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
index d08e2a413d42..e048ceff211b 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -324,6 +324,7 @@ export function CollapsibleNavGroupEnabled({
             paddingSize={!isNavOpen ? 's' : 'l'}
             hasShadow={false}
             className="eui-yScroll flex-1-container"
+            style={{ paddingTop: 0 }}
           >
             {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
               <>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 15a41c13d523..2b52979db9de 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -157,7 +157,7 @@ export const CollapsibleNavTop = ({
       {currentNavGroup?.title && (
         <>
           <EuiSpacer />
-          <EuiText>{currentNavGroup?.title}</EuiText>
+          <EuiText className="leftNavGroupTitle">{currentNavGroup?.title}</EuiText>
         </>
       )}
     </EuiPanel>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 53a75aeaaddd..431d9295dfae 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -58,7 +58,11 @@ export function NavGroups({
 
     return {
       id: `${link.id}-${link.title}`,
-      name: <EuiText size="xs">{link.title}</EuiText>,
+      name: (
+        <EuiText size="xs" style={{ fontSize: '14px', lineHeight: '16px' }}>
+          {link.title}
+        </EuiText>
+      ),
       onClick: euiListItem.onClick,
       href: euiListItem.href,
       emphasize: euiListItem.isActive,
@@ -128,9 +132,14 @@ export function NavGroups({
     if (navLink.itemType === LinkItemType.CATEGORY) {
       return {
         id: navLink.category?.id ?? '',
-        name: <div className="nav-link-item">{navLink.category?.label ?? ''}</div>,
+        name: (
+          <div className="nav-link-item nav-link-item-category-title">
+            {navLink.category?.label ?? ''}
+          </div>
+        ),
         items: navLink.links?.map((link) => createSideNavItem(link, level + 1)),
         'aria-label': navLink.category?.label,
+        className: 'nav-link-item-category-item',
       };
     }
 

From 5d12a8f3fd9eb86c3f262634f8d4f16c5856cca1 Mon Sep 17 00:00:00 2001
From: "opensearch-changeset-bot[bot]"
 <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:56:37 +0000
Subject: [PATCH 05/21] Changeset file for PR #8140 created/updated

---
 changelogs/fragments/8140.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelogs/fragments/8140.yml b/changelogs/fragments/8140.yml
index 3efd2aff2257..10b904e18356 100644
--- a/changelogs/fragments/8140.yml
+++ b/changelogs/fragments/8140.yml
@@ -1,2 +1,2 @@
 feat:
-- [navigation] Fit and finish issues collective for left nav and landing page ([#8140](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8140))
\ No newline at end of file
+- [navigation] Adjust the appearances of the left navigation menu and the landing page ([#8140](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8140))
\ No newline at end of file

From 901a4f18d15c33a01808165df8993d3d29299ca0 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Fri, 13 Sep 2024 18:12:55 +0800
Subject: [PATCH 06/21] feat: update code

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../ui/header/collapsible_nav_group_enabled_top.tsx      | 9 +--------
 .../public/components/feature_cards/feature_cards.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 2b52979db9de..03a04e4076e7 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -23,13 +23,6 @@ import { ChromeNavLink } from '../../nav_links';
 import { ALL_USE_CASE_ID } from '../../../../../core/utils';
 import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
 
-// Reference https://github.com/opensearch-project/oui/blob/main/src/services/color/is_valid_hex.ts
-const validateWorkspaceColor = (color?: string) =>
-  !!color && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
-
-const getValidWorkspaceColor = (color?: string) =>
-  validateWorkspaceColor(color) ? color : undefined;
-
 export interface CollapsibleNavTopProps {
   homeLink?: ChromeNavLink;
   navGroupsMap: Record<string, NavGroupItemInMap>;
@@ -138,7 +131,7 @@ export const CollapsibleNavTop = ({
                 type={icon}
                 size="l"
                 data-test-subj={`collapsibleNavIcon-${icon}`}
-                color={getValidWorkspaceColor(currentWorkspace?.color)}
+                color={currentWorkspace?.color}
               />
             </EuiButtonEmpty>
           </EuiFlexItem>
diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
index 2d2a3756654f..4ffdd917b2c3 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
@@ -74,10 +74,10 @@ export const FeatureCards = ({
                       data-test-subj={`landingPageFeature_${link.id}`}
                       textAlign="left"
                       title={link.title}
-                      description={link.description || link.title}
+                      description={link.description || ''}
                       onClick={() => navigateToApp(link.id)}
                       titleSize="xs"
-                      style={{ width: 200 }}
+                      style={{ width: 240 }}
                     />
                   </EuiFlexItem>
                 );

From 8219107d89fadbc652a3a0cf4573f75155734491 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Sat, 14 Sep 2024 17:32:17 +0800
Subject: [PATCH 07/21] feat: update style

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../chrome/ui/header/collapsible_nav_group_enabled.scss      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index f709a7f3270f..ee313efaeb53 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -16,8 +16,7 @@
 
     .nav-link-item-btn {
       margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
+      padding: 0;
 
       &::after {
         display: none;
@@ -35,7 +34,7 @@
 
   .nav-link-item-category-title {
     line-height: 16px;
-    padding: $euiSizeS $euiSize;
+    padding: $euiSizeS;
   }
 
   .nav-link-parent-item-button {

From 1da3a34e063137895403768c1e6b9ce0b52d745f Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Sat, 14 Sep 2024 17:47:01 +0800
Subject: [PATCH 08/21] feat: update padding

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../public/chrome/ui/header/collapsible_nav_group_enabled.scss   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index ee313efaeb53..158a87cd4a06 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -2,7 +2,6 @@
   border: none !important;
 
   .leftNavGroupTitle {
-    padding: 0 $euiSizeS;
     font-weight: 400;
   }
 

From b74973a6a3ead877fcc1faa0059ce4d6cdda73a1 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Fri, 20 Sep 2024 16:48:57 +0800
Subject: [PATCH 09/21] feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../chrome/ui/header/collapsible_nav_group_enabled.scss      | 5 +++--
 src/core/public/chrome/ui/header/collapsible_nav_groups.tsx  | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index 158a87cd4a06..5b7a489e12ac 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -3,6 +3,7 @@
 
   .leftNavGroupTitle {
     font-weight: 400;
+    font-size: 18px;
   }
 
   .nav-link-item {
@@ -42,7 +43,7 @@
 
       > * {
         margin-right: $euiSizeS;
-        margin-left: 2px;
+        margin-left: 0;
       }
     }
   }
@@ -56,7 +57,7 @@
   }
 
   .nav-nested-item {
-    margin-bottom: 4px;
+    margin-left: -10px;
 
     &::after {
       height: unset;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 431d9295dfae..25d93bb46a30 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -59,7 +59,7 @@ export function NavGroups({
     return {
       id: `${link.id}-${link.title}`,
       name: (
-        <EuiText size="xs" style={{ fontSize: '14px', lineHeight: '16px' }}>
+        <EuiText size="xs" style={{ fontSize: '14px', lineHeight: '16px', fontWeight: 400 }}>
           {link.title}
         </EuiText>
       ),

From b0380546daaeeb177648f381d2d64946d7c196ba Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Fri, 20 Sep 2024 18:26:49 +0800
Subject: [PATCH 10/21] feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../collapsible_nav_group_enabled.test.tsx.snap    | 14 +++++++-------
 .../collapsible_nav_groups.test.tsx.snap           | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index 8977d03f7d98..481d1d300788 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                     >
                       <div
                         class="euiText euiText--extraSmall"
-                        style="font-size: 14px; line-height: 16px;"
+                        style="font-size: 14px; line-height: 16px; font-weight: 400;"
                       >
                         link-in-all
                       </div>
@@ -103,7 +103,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                         >
                           <div
                             class="euiText euiText--extraSmall"
-                            style="font-size: 14px; line-height: 16px;"
+                            style="font-size: 14px; line-height: 16px; font-weight: 400;"
                           >
                             link-in-observability
                           </div>
@@ -135,7 +135,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                             >
                               <div
                                 class="euiText euiText--extraSmall"
-                                style="font-size: 14px; line-height: 16px;"
+                                style="font-size: 14px; line-height: 16px; font-weight: 400;"
                               >
                                 See all...
                               </div>
@@ -190,7 +190,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                         >
                           <div
                             class="euiText euiText--extraSmall"
-                            style="font-size: 14px; line-height: 16px;"
+                            style="font-size: 14px; line-height: 16px; font-weight: 400;"
                           >
                             link-in-essentials
                           </div>
@@ -222,7 +222,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                             >
                               <div
                                 class="euiText euiText--extraSmall"
-                                style="font-size: 14px; line-height: 16px;"
+                                style="font-size: 14px; line-height: 16px; font-weight: 400;"
                               >
                                 See all...
                               </div>
@@ -325,7 +325,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
                     >
                       <div
                         class="euiText euiText--extraSmall"
-                        style="font-size: 14px; line-height: 16px;"
+                        style="font-size: 14px; line-height: 16px; font-weight: 400;"
                       >
                         link-in-essentials
                       </div>
@@ -400,7 +400,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
                     >
                       <div
                         class="euiText euiText--extraSmall"
-                        style="font-size: 14px; line-height: 16px;"
+                        style="font-size: 14px; line-height: 16px; font-weight: 400;"
                       >
                         link-in-essentials
                       </div>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 097e41e560f3..541622ed47ed 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--extraSmall"
-                      style="font-size: 14px; line-height: 16px;"
+                      style="font-size: 14px; line-height: 16px; font-weight: 400;"
                     >
                       pure link
                     </div>
@@ -78,7 +78,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                       >
                         <div
                           class="euiText euiText--extraSmall"
-                          style="font-size: 14px; line-height: 16px;"
+                          style="font-size: 14px; line-height: 16px; font-weight: 400;"
                         >
                           subLink
                         </div>
@@ -133,7 +133,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--extraSmall"
-                      style="font-size: 14px; line-height: 16px;"
+                      style="font-size: 14px; line-height: 16px; font-weight: 400;"
                     >
                       link-in-category
                     </div>
@@ -164,7 +164,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                       >
                         <div
                           class="euiText euiText--extraSmall"
-                          style="font-size: 14px; line-height: 16px;"
+                          style="font-size: 14px; line-height: 16px; font-weight: 400;"
                         >
                           sub-link-in-category
                         </div>
@@ -192,7 +192,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--extraSmall"
-                      style="font-size: 14px; line-height: 16px;"
+                      style="font-size: 14px; line-height: 16px; font-weight: 400;"
                     >
                       link-in-category-2
                     </div>

From 565035985f7619aad9e94de33e5cc61cd77bb543 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 11:28:03 +0800
Subject: [PATCH 11/21] feat: update style

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../chrome/ui/header/collapsible_nav_group_enabled.scss    | 7 +------
 .../chrome/ui/header/collapsible_nav_group_enabled_top.tsx | 6 ++++--
 .../public/chrome/ui/header/collapsible_nav_groups.tsx     | 6 +++---
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index 5b7a489e12ac..7b44e4f7623a 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -1,13 +1,8 @@
 .context-nav-wrapper {
   border: none !important;
 
-  .leftNavGroupTitle {
-    font-weight: 400;
-    font-size: 18px;
-  }
-
   .nav-link-item {
-    padding: $euiSizeS $euiSize;
+    padding: $euiSizeXS $euiSize;
     border-radius: $euiSizeS;
     font-size: 14px;
     box-shadow: none;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 03a04e4076e7..50daaa00ea32 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -14,7 +14,7 @@ import {
   EuiIcon,
   EuiPanel,
   EuiSpacer,
-  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
@@ -150,7 +150,9 @@ export const CollapsibleNavTop = ({
       {currentNavGroup?.title && (
         <>
           <EuiSpacer />
-          <EuiText className="leftNavGroupTitle">{currentNavGroup?.title}</EuiText>
+          <EuiTitle size="s">
+            <h3>{currentNavGroup?.title}</h3>
+          </EuiTitle>
         </>
       )}
     </EuiPanel>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 25d93bb46a30..622655f50407 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -4,7 +4,7 @@
  */
 
 import './collapsible_nav_group_enabled.scss';
-import { EuiFlexItem, EuiSideNavItemType, EuiSideNav, EuiText } from '@elastic/eui';
+import { EuiFlexItem, EuiSideNavItemType, EuiSideNav, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 import classNames from 'classnames';
@@ -59,8 +59,8 @@ export function NavGroups({
     return {
       id: `${link.id}-${link.title}`,
       name: (
-        <EuiText size="xs" style={{ fontSize: '14px', lineHeight: '16px', fontWeight: 400 }}>
-          {link.title}
+        <EuiText size="s">
+          <h4 style={{ fontWeight: 400 }}>{link.title}</h4>
         </EuiText>
       ),
       onClick: euiListItem.onClick,

From 24b913b4716f1a2fffb17f349d33d7e218ae3779 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 11:29:48 +0800
Subject: [PATCH 12/21] feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../public/components/feature_cards/feature_cards.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
index 4ffdd917b2c3..4c28ea9036d4 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
@@ -77,7 +77,7 @@ export const FeatureCards = ({
                       description={link.description || ''}
                       onClick={() => navigateToApp(link.id)}
                       titleSize="xs"
-                      style={{ width: 240 }}
+                      style={{ maxWidth: 240 }}
                     />
                   </EuiFlexItem>
                 );

From bc62ba0307566c81e1b2fadaecd40618a91238dd Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 11:30:53 +0800
Subject: [PATCH 13/21] feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 ...ollapsible_nav_group_enabled.test.tsx.snap | 63 ++++++++++++-------
 .../collapsible_nav_groups.test.tsx.snap      | 45 ++++++++-----
 2 files changed, 72 insertions(+), 36 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index 481d1d300788..4f290cee2a76 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -51,10 +51,13 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="link-in-all"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
-                        style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                        class="euiText euiText--small"
                       >
-                        link-in-all
+                        <h4
+                          style="font-weight: 400;"
+                        >
+                          link-in-all
+                        </h4>
                       </div>
                     </span>
                   </span>
@@ -102,10 +105,13 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-observability"
                         >
                           <div
-                            class="euiText euiText--extraSmall"
-                            style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                            class="euiText euiText--small"
                           >
-                            link-in-observability
+                            <h4
+                              style="font-weight: 400;"
+                            >
+                              link-in-observability
+                            </h4>
                           </div>
                         </span>
                       </span>
@@ -134,10 +140,13 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--extraSmall"
-                                style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                                class="euiText euiText--small"
                               >
-                                See all...
+                                <h4
+                                  style="font-weight: 400;"
+                                >
+                                  See all...
+                                </h4>
                               </div>
                             </div>
                           </div>
@@ -189,10 +198,13 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-essentials"
                         >
                           <div
-                            class="euiText euiText--extraSmall"
-                            style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                            class="euiText euiText--small"
                           >
-                            link-in-essentials
+                            <h4
+                              style="font-weight: 400;"
+                            >
+                              link-in-essentials
+                            </h4>
                           </div>
                         </span>
                       </span>
@@ -221,10 +233,13 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--extraSmall"
-                                style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                                class="euiText euiText--small"
                               >
-                                See all...
+                                <h4
+                                  style="font-weight: 400;"
+                                >
+                                  See all...
+                                </h4>
                               </div>
                             </div>
                           </div>
@@ -324,10 +339,13 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
-                        style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                        class="euiText euiText--small"
                       >
-                        link-in-essentials
+                        <h4
+                          style="font-weight: 400;"
+                        >
+                          link-in-essentials
+                        </h4>
                       </div>
                     </span>
                   </span>
@@ -399,10 +417,13 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
-                        style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                        class="euiText euiText--small"
                       >
-                        link-in-essentials
+                        <h4
+                          style="font-weight: 400;"
+                        >
+                          link-in-essentials
+                        </h4>
                       </div>
                     </span>
                   </span>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 541622ed47ed..9aace0d6dae6 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -46,10 +46,13 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="pure link"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
-                      style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                      class="euiText euiText--small"
                     >
-                      pure link
+                      <h4
+                        style="font-weight: 400;"
+                      >
+                        pure link
+                      </h4>
                     </div>
                   </span>
                   <span
@@ -77,10 +80,13 @@ exports[`<NavGroups /> should render correctly 1`] = `
                         title="subLink"
                       >
                         <div
-                          class="euiText euiText--extraSmall"
-                          style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                          class="euiText euiText--small"
                         >
-                          subLink
+                          <h4
+                            style="font-weight: 400;"
+                          >
+                            subLink
+                          </h4>
                         </div>
                       </span>
                     </span>
@@ -132,10 +138,13 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="link-in-category"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
-                      style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                      class="euiText euiText--small"
                     >
-                      link-in-category
+                      <h4
+                        style="font-weight: 400;"
+                      >
+                        link-in-category
+                      </h4>
                     </div>
                   </span>
                   <span
@@ -163,10 +172,13 @@ exports[`<NavGroups /> should render correctly 1`] = `
                         title="sub-link-in-category"
                       >
                         <div
-                          class="euiText euiText--extraSmall"
-                          style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                          class="euiText euiText--small"
                         >
-                          sub-link-in-category
+                          <h4
+                            style="font-weight: 400;"
+                          >
+                            sub-link-in-category
+                          </h4>
                         </div>
                       </span>
                     </span>
@@ -191,10 +203,13 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="link-in-category-2"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
-                      style="font-size: 14px; line-height: 16px; font-weight: 400;"
+                      class="euiText euiText--small"
                     >
-                      link-in-category-2
+                      <h4
+                        style="font-weight: 400;"
+                      >
+                        link-in-category-2
+                      </h4>
                     </div>
                   </span>
                 </span>

From 14e96bdef9daa97cd2d9be422bec4ea760b6977e Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 11:49:24 +0800
Subject: [PATCH 14/21] feat: update style

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 ...ollapsible_nav_group_enabled.test.tsx.snap | 56 +++++++------------
 .../header/collapsible_nav_group_enabled.scss |  1 -
 .../collapsible_nav_group_enabled_top.tsx     |  6 +-
 .../ui/header/collapsible_nav_groups.tsx      |  4 +-
 4 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index 4f290cee2a76..60d70bbf7595 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -51,13 +51,11 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="link-in-all"
                     >
                       <div
-                        class="euiText euiText--small"
+                        class="euiText euiText--extraSmall"
                       >
-                        <h4
-                          style="font-weight: 400;"
-                        >
+                        <h3>
                           link-in-all
-                        </h4>
+                        </h3>
                       </div>
                     </span>
                   </span>
@@ -105,13 +103,11 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-observability"
                         >
                           <div
-                            class="euiText euiText--small"
+                            class="euiText euiText--extraSmall"
                           >
-                            <h4
-                              style="font-weight: 400;"
-                            >
+                            <h3>
                               link-in-observability
-                            </h4>
+                            </h3>
                           </div>
                         </span>
                       </span>
@@ -140,13 +136,11 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--small"
+                                class="euiText euiText--extraSmall"
                               >
-                                <h4
-                                  style="font-weight: 400;"
-                                >
+                                <h3>
                                   See all...
-                                </h4>
+                                </h3>
                               </div>
                             </div>
                           </div>
@@ -198,13 +192,11 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-essentials"
                         >
                           <div
-                            class="euiText euiText--small"
+                            class="euiText euiText--extraSmall"
                           >
-                            <h4
-                              style="font-weight: 400;"
-                            >
+                            <h3>
                               link-in-essentials
-                            </h4>
+                            </h3>
                           </div>
                         </span>
                       </span>
@@ -233,13 +225,11 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--small"
+                                class="euiText euiText--extraSmall"
                               >
-                                <h4
-                                  style="font-weight: 400;"
-                                >
+                                <h3>
                                   See all...
-                                </h4>
+                                </h3>
                               </div>
                             </div>
                           </div>
@@ -339,13 +329,11 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--small"
+                        class="euiText euiText--extraSmall"
                       >
-                        <h4
-                          style="font-weight: 400;"
-                        >
+                        <h3>
                           link-in-essentials
-                        </h4>
+                        </h3>
                       </div>
                     </span>
                   </span>
@@ -417,13 +405,11 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--small"
+                        class="euiText euiText--extraSmall"
                       >
-                        <h4
-                          style="font-weight: 400;"
-                        >
+                        <h3>
                           link-in-essentials
-                        </h4>
+                        </h3>
                       </div>
                     </span>
                   </span>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index 7b44e4f7623a..adc479a31267 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -4,7 +4,6 @@
   .nav-link-item {
     padding: $euiSizeXS $euiSize;
     border-radius: $euiSizeS;
-    font-size: 14px;
     box-shadow: none;
     margin-bottom: 0;
     margin-top: 0;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 50daaa00ea32..7ec738874686 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -14,7 +14,7 @@ import {
   EuiIcon,
   EuiPanel,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
@@ -150,9 +150,9 @@ export const CollapsibleNavTop = ({
       {currentNavGroup?.title && (
         <>
           <EuiSpacer />
-          <EuiTitle size="s">
+          <EuiText size="s">
             <h3>{currentNavGroup?.title}</h3>
-          </EuiTitle>
+          </EuiText>
         </>
       )}
     </EuiPanel>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 622655f50407..9485aff7b22c 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -59,8 +59,8 @@ export function NavGroups({
     return {
       id: `${link.id}-${link.title}`,
       name: (
-        <EuiText size="s">
-          <h4 style={{ fontWeight: 400 }}>{link.title}</h4>
+        <EuiText size="xs">
+          <h3>{link.title}</h3>
         </EuiText>
       ),
       onClick: euiListItem.onClick,

From e83f647b2516064f1da519600e3730697848a97b Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 12:16:32 +0800
Subject: [PATCH 15/21] feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../collapsible_nav_groups.test.tsx.snap      | 45 +++++++------------
 .../ui/header/collapsible_nav_groups.tsx      |  9 ++--
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 9aace0d6dae6..3f8e9076c726 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -46,13 +46,10 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="pure link"
                   >
                     <div
-                      class="euiText euiText--small"
+                      class="euiText euiText--small euiTitle euiTitle--xsmall"
+                      style="font-weight: 400;"
                     >
-                      <h4
-                        style="font-weight: 400;"
-                      >
-                        pure link
-                      </h4>
+                      pure link
                     </div>
                   </span>
                   <span
@@ -80,13 +77,10 @@ exports[`<NavGroups /> should render correctly 1`] = `
                         title="subLink"
                       >
                         <div
-                          class="euiText euiText--small"
+                          class="euiText euiText--small euiTitle euiTitle--xsmall"
+                          style="font-weight: 400;"
                         >
-                          <h4
-                            style="font-weight: 400;"
-                          >
-                            subLink
-                          </h4>
+                          subLink
                         </div>
                       </span>
                     </span>
@@ -138,13 +132,10 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="link-in-category"
                   >
                     <div
-                      class="euiText euiText--small"
+                      class="euiText euiText--small euiTitle euiTitle--xsmall"
+                      style="font-weight: 400;"
                     >
-                      <h4
-                        style="font-weight: 400;"
-                      >
-                        link-in-category
-                      </h4>
+                      link-in-category
                     </div>
                   </span>
                   <span
@@ -172,13 +163,10 @@ exports[`<NavGroups /> should render correctly 1`] = `
                         title="sub-link-in-category"
                       >
                         <div
-                          class="euiText euiText--small"
+                          class="euiText euiText--small euiTitle euiTitle--xsmall"
+                          style="font-weight: 400;"
                         >
-                          <h4
-                            style="font-weight: 400;"
-                          >
-                            sub-link-in-category
-                          </h4>
+                          sub-link-in-category
                         </div>
                       </span>
                     </span>
@@ -203,13 +191,10 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="link-in-category-2"
                   >
                     <div
-                      class="euiText euiText--small"
+                      class="euiText euiText--small euiTitle euiTitle--xsmall"
+                      style="font-weight: 400;"
                     >
-                      <h4
-                        style="font-weight: 400;"
-                      >
-                        link-in-category-2
-                      </h4>
+                      link-in-category-2
                     </div>
                   </span>
                 </span>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 9485aff7b22c..b1d723b95883 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -59,9 +59,12 @@ export function NavGroups({
     return {
       id: `${link.id}-${link.title}`,
       name: (
-        <EuiText size="xs">
-          <h3>{link.title}</h3>
-        </EuiText>
+        <EuiTitle size="xs">
+          {/* the inline style is required because 1. fontWeight is used  */}
+          <EuiText size="s" style={{ letterSpacing: 0 }}>
+            {link.title}
+          </EuiText>
+        </EuiTitle>
       ),
       onClick: euiListItem.onClick,
       href: euiListItem.href,

From f8219c188f193494fb3700ef0cd4233375e6a070 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 14:14:14 +0800
Subject: [PATCH 16/21] feat: update snapshot

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 ...ollapsible_nav_group_enabled.test.tsx.snap |  49 +++----
 .../collapsible_nav_groups.test.tsx.snap      |  10 +-
 .../__snapshots__/feature_cards.test.tsx.snap | 130 ++++--------------
 3 files changed, 56 insertions(+), 133 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index 60d70bbf7595..db4ee41b2090 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -51,11 +51,10 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="link-in-all"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiText euiText--small euiTitle euiTitle--xsmall"
+                        style="letter-spacing: 0;"
                       >
-                        <h3>
-                          link-in-all
-                        </h3>
+                        link-in-all
                       </div>
                     </span>
                   </span>
@@ -103,11 +102,10 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-observability"
                         >
                           <div
-                            class="euiText euiText--extraSmall"
+                            class="euiText euiText--small euiTitle euiTitle--xsmall"
+                            style="letter-spacing: 0;"
                           >
-                            <h3>
-                              link-in-observability
-                            </h3>
+                            link-in-observability
                           </div>
                         </span>
                       </span>
@@ -136,11 +134,10 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--extraSmall"
+                                class="euiText euiText--small euiTitle euiTitle--xsmall"
+                                style="letter-spacing: 0;"
                               >
-                                <h3>
-                                  See all...
-                                </h3>
+                                See all...
                               </div>
                             </div>
                           </div>
@@ -192,11 +189,10 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-essentials"
                         >
                           <div
-                            class="euiText euiText--extraSmall"
+                            class="euiText euiText--small euiTitle euiTitle--xsmall"
+                            style="letter-spacing: 0;"
                           >
-                            <h3>
-                              link-in-essentials
-                            </h3>
+                            link-in-essentials
                           </div>
                         </span>
                       </span>
@@ -225,11 +221,10 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--extraSmall"
+                                class="euiText euiText--small euiTitle euiTitle--xsmall"
+                                style="letter-spacing: 0;"
                               >
-                                <h3>
-                                  See all...
-                                </h3>
+                                See all...
                               </div>
                             </div>
                           </div>
@@ -329,11 +324,10 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiText euiText--small euiTitle euiTitle--xsmall"
+                        style="letter-spacing: 0;"
                       >
-                        <h3>
-                          link-in-essentials
-                        </h3>
+                        link-in-essentials
                       </div>
                     </span>
                   </span>
@@ -405,11 +399,10 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiText euiText--small euiTitle euiTitle--xsmall"
+                        style="letter-spacing: 0;"
                       >
-                        <h3>
-                          link-in-essentials
-                        </h3>
+                        link-in-essentials
                       </div>
                     </span>
                   </span>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 3f8e9076c726..e77414b2af98 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--small euiTitle euiTitle--xsmall"
-                      style="font-weight: 400;"
+                      style="letter-spacing: 0;"
                     >
                       pure link
                     </div>
@@ -78,7 +78,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                       >
                         <div
                           class="euiText euiText--small euiTitle euiTitle--xsmall"
-                          style="font-weight: 400;"
+                          style="letter-spacing: 0;"
                         >
                           subLink
                         </div>
@@ -133,7 +133,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--small euiTitle euiTitle--xsmall"
-                      style="font-weight: 400;"
+                      style="letter-spacing: 0;"
                     >
                       link-in-category
                     </div>
@@ -164,7 +164,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                       >
                         <div
                           class="euiText euiText--small euiTitle euiTitle--xsmall"
-                          style="font-weight: 400;"
+                          style="letter-spacing: 0;"
                         >
                           sub-link-in-category
                         </div>
@@ -192,7 +192,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                   >
                     <div
                       class="euiText euiText--small euiTitle euiTitle--xsmall"
-                      style="font-weight: 400;"
+                      style="letter-spacing: 0;"
                     >
                       link-in-category-2
                     </div>
diff --git a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
index 59d957733871..1a1c2249537a 100644
--- a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
+++ b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_1"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -29,20 +29,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title1
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title1
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -52,7 +45,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_2"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -62,20 +55,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title2
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title2
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -85,7 +71,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_3"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -95,20 +81,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title3
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title3
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -118,7 +97,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_4"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -128,20 +107,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title4
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title4
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -151,7 +123,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_5"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -161,20 +133,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title5
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title5
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -201,7 +166,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-1"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -211,20 +176,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title1
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title1
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -234,7 +192,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-2"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -244,20 +202,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title2
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title2
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -267,7 +218,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-3"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -277,20 +228,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title3
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title3
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -300,7 +244,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-4"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -310,20 +254,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title4
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title4
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
@@ -333,7 +270,7 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-5"
-            style="width: 200px;"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -343,20 +280,13 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title5
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title5
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>

From 8b5186bb87d9502cb343976fae06412fac7989cf Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 17:49:31 +0800
Subject: [PATCH 17/21] feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 src/core/public/chrome/ui/header/collapsible_nav_groups.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index b1d723b95883..f6ddc68aad7b 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -60,7 +60,7 @@ export function NavGroups({
       id: `${link.id}-${link.title}`,
       name: (
         <EuiTitle size="xs">
-          {/* the inline style is required because 1. fontWeight is used  */}
+          {/* the inline style is required to overwrite the letterspacing style EuiText applies */}
           <EuiText size="s" style={{ letterSpacing: 0 }}>
             {link.title}
           </EuiText>

From 9a8bc173d8a2fa8a215fa32073cc1d48d91895c5 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 18:23:46 +0800
Subject: [PATCH 18/21] feat: revert the customized style on nested items

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../collapsible_nav_groups.test.tsx.snap      |  4 +--
 .../header/collapsible_nav_group_enabled.scss | 30 ++++---------------
 .../ui/header/collapsible_nav_groups.tsx      |  1 -
 3 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index e77414b2af98..69a9f8158e35 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
             >
               <button
                 aria-label="pure link"
-                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn nav-link-parent-item-button"
+                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn"
                 data-test-subj="collapsibleNavAppLink-pure"
                 type="button"
               >
@@ -120,7 +120,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
             >
               <button
                 aria-label="link-in-category"
-                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn nav-link-parent-item-button"
+                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn"
                 data-test-subj="collapsibleNavAppLink-link-in-category"
                 type="button"
               >
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index adc479a31267..9daee8cb6e12 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -2,7 +2,7 @@
   border: none !important;
 
   .nav-link-item {
-    padding: $euiSizeXS $euiSize;
+    padding: $euiSizeXS $euiSizeS;
     border-radius: $euiSizeS;
     box-shadow: none;
     margin-bottom: 0;
@@ -10,11 +10,6 @@
 
     .nav-link-item-btn {
       margin-bottom: 0;
-      padding: 0;
-
-      &::after {
-        display: none;
-      }
     }
   }
 
@@ -31,17 +26,6 @@
     padding: $euiSizeS;
   }
 
-  .nav-link-parent-item-button {
-    > span {
-      flex-direction: row-reverse;
-
-      > * {
-        margin-right: $euiSizeS;
-        margin-left: 0;
-      }
-    }
-  }
-
   .nav-link-fake-item {
     margin-top: 0;
   }
@@ -51,15 +35,11 @@
   }
 
   .nav-nested-item {
-    margin-left: -10px;
+    padding: $euiSizeS 0;
 
-    &::after {
-      height: unset;
-    }
-
-    .nav-link-item-btn {
-      padding-left: 0;
-      padding-right: 0;
+    // The height is used to comply with the extra padding
+    &:last-of-type::after {
+      height: 50%;
     }
   }
 
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index f6ddc68aad7b..a493df312541 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -110,7 +110,6 @@ export function NavGroups({
         href: undefined,
         onClick: undefined,
         className: classNames(props.className, 'nav-link-parent-item'),
-        buttonClassName: classNames(props.buttonClassName, 'nav-link-parent-item-button'),
         items: navLink.links.map((subNavLink) =>
           createSideNavItem(subNavLink, level + 1, 'nav-nested-item')
         ),

From b1ccd5c444ebf563947ad758a42d91075ea7335b Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Wed, 25 Sep 2024 01:17:27 +0800
Subject: [PATCH 19/21] feat: update mobile break points

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 src/core/public/chrome/ui/header/collapsible_nav_groups.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index a493df312541..c924ae422cf8 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -154,7 +154,7 @@ export function NavGroups({
 
   return (
     <EuiFlexItem style={style}>
-      <EuiSideNav items={sideNavItems} isOpenOnMobile />
+      <EuiSideNav items={sideNavItems} isOpenOnMobile mobileBreakpoints={[]} />
       {suffix}
     </EuiFlexItem>
   );

From 7d9aa81f2c4ad27b0565921ed34db586a4d078ee Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Thu, 26 Sep 2024 13:32:48 +0800
Subject: [PATCH 20/21] fix: snapshot

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 ...ollapsible_nav_group_enabled.test.tsx.snap |  6 ++---
 .../collapsible_nav_groups.test.tsx.snap      |  2 +-
 .../header/collapsible_nav_group_enabled.tsx  | 22 +++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index db4ee41b2090..dbe7ac3f0d96 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
             class="euiSideNav euiSideNav-isOpenMobile"
           >
             <div
-              class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+              class="euiSideNav__content"
               id="euiSideNavContent_generated-id"
             >
               <div
@@ -304,7 +304,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
             class="euiSideNav euiSideNav-isOpenMobile"
           >
             <div
-              class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+              class="euiSideNav__content"
               id="euiSideNavContent_generated-id"
             >
               <div
@@ -379,7 +379,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
             class="euiSideNav euiSideNav-isOpenMobile"
           >
             <div
-              class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+              class="euiSideNav__content"
               id="euiSideNavContent_generated-id"
             >
               <div
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 69a9f8158e35..c428f7f774b8 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
       class="euiSideNav euiSideNav-isOpenMobile"
     >
       <div
-        class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+        class="euiSideNav__content"
         id="euiSideNavContent_generated-id"
       >
         <div
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
index e048ceff211b..913a3bf811ab 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -370,17 +370,17 @@ export function CollapsibleNavGroupEnabled({
   return (
     <>
       <EuiHideFor sizes={['xs', 's', 'm']}>{rendeLeftNav()}</EuiHideFor>
-      <EuiShowFor sizes={['xs', 's', 'm']}>
-        {isNavOpen
-          ? rendeLeftNav({
-              type: 'overlay',
-              size: undefined,
-              outsideClickCloses: true,
-              paddingSize: undefined,
-              ownFocus: true,
-            })
-          : null}
-      </EuiShowFor>
+      {isNavOpen ? (
+        <EuiShowFor sizes={['xs', 's', 'm']}>
+          {rendeLeftNav({
+            type: 'overlay',
+            size: undefined,
+            outsideClickCloses: true,
+            paddingSize: undefined,
+            ownFocus: true,
+          })}
+        </EuiShowFor>
+      ) : null}
     </>
   );
 }

From 43d47b494dfd1f53cf4a546c0b9b52363297c657 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Thu, 26 Sep 2024 13:46:42 +0800
Subject: [PATCH 21/21] feat: optimize style

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../ui/header/collapsible_nav_group_enabled.scss      |  3 +--
 .../chrome/ui/header/collapsible_nav_groups.tsx       | 11 ++++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index 9daee8cb6e12..48eab41e7cf1 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -22,8 +22,7 @@
   }
 
   .nav-link-item-category-title {
-    line-height: 16px;
-    padding: $euiSizeS;
+    padding: 0;
   }
 
   .nav-link-fake-item {
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index c924ae422cf8..603cfce6e299 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -60,9 +60,8 @@ export function NavGroups({
       id: `${link.id}-${link.title}`,
       name: (
         <EuiTitle size="xs">
-          {/* the inline style is required to overwrite the letterspacing style EuiText applies */}
-          <EuiText size="s" style={{ letterSpacing: 0 }}>
-            {link.title}
+          <EuiText size="s">
+            <h4>{link.title}</h4>
           </EuiText>
         </EuiTitle>
       ),
@@ -135,8 +134,10 @@ export function NavGroups({
       return {
         id: navLink.category?.id ?? '',
         name: (
-          <div className="nav-link-item nav-link-item-category-title">
-            {navLink.category?.label ?? ''}
+          <div className="nav-link-item">
+            <h3 className="euiCollapsibleNavGroup__heading nav-link-item-category-title">
+              {navLink.category?.label ?? ''}
+            </h3>
           </div>
         ),
         items: navLink.links?.map((link) => createSideNavItem(link, level + 1)),