From 0caee51d6bc58ea1e699e4ce72c77f9f47cbf374 Mon Sep 17 00:00:00 2001
From: Paulina Shakirova <paulina.shakirova@elastic.co>
Date: Wed, 20 Nov 2024 14:56:41 +0100
Subject: [PATCH] fix: make panel top nav menu item button full width on mobile
 (#200823)

## Summary

This PR solves [[Dashboard] Center Save top nav button for small
viewport](https://github.com/elastic/kibana/issues/180093#top) issue.

![Screenshot 2024-11-19 at 23 02
16](https://github.com/user-attachments/assets/ac643c61-62d5-4512-af35-33c396f6aba1)

![Screenshot 2024-11-19 at 23 01
31](https://github.com/user-attachments/assets/4d2021fb-a08b-4626-a203-07b52f3cbe55)

The change only affects the mobile menu.

(cherry picked from commit 971c1f3c350cd36c6e21441deb5b473f839963cd)
---
 .../navigation/public/top_nav_menu/top_nav_menu_item.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
index 16017fda0ffbc..84232d47fd337 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
@@ -80,7 +80,12 @@ export function TopNavMenuItem(props: TopNavMenuData & { isMobileMenu?: boolean
       </EuiToolTip>
     ) : props.emphasize ? (
       // fill is not compatible with EuiHeaderLink
-      <EuiButton size="s" {...commonButtonProps} fill={props.fill ?? true}>
+      <EuiButton
+        size="s"
+        fullWidth={props.isMobileMenu}
+        {...commonButtonProps}
+        fill={props.fill ?? true}
+      >
         {getButtonContainer()}
       </EuiButton>
     ) : (