From b1113f4633791dd28fbe84f6c3fa7bbeb0712664 Mon Sep 17 00:00:00 2001
From: Qxisylolo <qianxisy@amazon.com>
Date: Tue, 24 Dec 2024 16:07:51 +0800
Subject: [PATCH] [Workspace]Fix the UI of recent assets in the header (#8156)

* resolve conflicts

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/ fix the_UI_of_recent_assets, delete comments

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/ fix the recent title size

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/the_UI_of_recent_assets, use icon button

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/the_UI_of_recent_assets, a small fix

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* remove comment

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* new resolve conflicts

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* Changeset file for PR #8156 created/updated

---------

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8156.yml                 |  2 ++
 .../public/chrome/ui/header/recent_items.tsx  | 23 +++++++++----------
 2 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 changelogs/fragments/8156.yml

diff --git a/changelogs/fragments/8156.yml b/changelogs/fragments/8156.yml
new file mode 100644
index 000000000000..c7b035ce443b
--- /dev/null
+++ b/changelogs/fragments/8156.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix the UI of recent assets in the header ([#8156](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8156))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
index 298bf51d2bc6..76dc3bcb3410 100644
--- a/src/core/public/chrome/ui/header/recent_items.tsx
+++ b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -135,18 +135,15 @@ export const RecentItems = ({
       ownFocus={false}
       panelPaddingSize="s"
       button={
-        <EuiButtonEmpty
-          data-test-subj="preferencesSettingButton"
-          flush="left"
+        <EuiButtonIcon
           color="primary"
+          size="xs"
           onClick={() => {
             setIsPreferencesPopoverOpen((IsPreferencesPopoverOpe) => !IsPreferencesPopoverOpe);
           }}
-        >
-          {i18n.translate('core.header.recent.preferences', {
-            defaultMessage: 'Preferences',
-          })}
-        </EuiButtonEmpty>
+          iconType="managementApp"
+          data-test-subj="preferencesSettingButton"
+        />
       }
       isOpen={isPreferencesPopoverOpen}
       anchorPosition="downLeft"
@@ -273,12 +270,13 @@ export const RecentItems = ({
       panelPaddingSize="m"
     >
       {renderBreadcrumbs}
-      <EuiSpacer size="s" />
+      <EuiSpacer size="m" />
       <EuiPanel
         hasShadow={false}
         hasBorder={false}
         paddingSize="none"
-        style={{ maxHeight: '35vh', overflow: 'auto' }}
+        style={{ maxHeight: '35vh' }}
+        className="euiYScrollWithShadows"
       >
         <EuiTitle size="xxs">
           <h4>
@@ -309,8 +307,9 @@ export const RecentItems = ({
                     <EuiIcon
                       style={{ marginRight: widthForRightMargin }}
                       type={item.meta.icon || 'apps'}
+                      color="text"
                     />
-                    {item.label}
+                    {item.label + ' '}
                     {item.workspaceName ? (
                       <EuiTextColor color="subdued">({item.workspaceName})</EuiTextColor>
                     ) : null}
@@ -328,7 +327,7 @@ export const RecentItems = ({
             })}
           </EuiText>
         )}
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
       </EuiPanel>
       {preferencePopover}
     </EuiPopover>