From 6e4e86f75c66eb463d4282ff59c296a39e4b9920 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 21 Nov 2024 02:56:01 +1100
Subject: [PATCH] [8.x] fix: make panel top nav menu item button full width on
 mobile (#200823) (#200927)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: make panel top nav menu item button full width on mobile
(#200823)](https://github.com/elastic/kibana/pull/200823)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Paulina
Shakirova","email":"paulina.shakirova@elastic.co"},"sourceCommit":{"committedDate":"2024-11-20T13:56:41Z","message":"fix:
make panel top nav menu item button full width on mobile (#200823)\n\n##
Summary\r\n\r\nThis PR solves [[Dashboard] Center Save top nav button
for
small\r\nviewport](https://github.com/elastic/kibana/issues/180093#top)
issue.\r\n\r\n![Screenshot 2024-11-19 at 23
02\r\n16](https://github.com/user-attachments/assets/ac643c61-62d5-4512-af35-33c396f6aba1)\r\n\r\n![Screenshot
2024-11-19 at 23
01\r\n31](https://github.com/user-attachments/assets/4d2021fb-a08b-4626-a203-07b52f3cbe55)\r\n\r\nThe
change only affects the mobile
menu.","sha":"971c1f3c350cd36c6e21441deb5b473f839963cd","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:SharedUX","backport:prev-minor","papercut","v8.17.0"],"title":"fix:
make panel top nav menu item button full width on
mobile","number":200823,"url":"https://github.com/elastic/kibana/pull/200823","mergeCommit":{"message":"fix:
make panel top nav menu item button full width on mobile (#200823)\n\n##
Summary\r\n\r\nThis PR solves [[Dashboard] Center Save top nav button
for
small\r\nviewport](https://github.com/elastic/kibana/issues/180093#top)
issue.\r\n\r\n![Screenshot 2024-11-19 at 23
02\r\n16](https://github.com/user-attachments/assets/ac643c61-62d5-4512-af35-33c396f6aba1)\r\n\r\n![Screenshot
2024-11-19 at 23
01\r\n31](https://github.com/user-attachments/assets/4d2021fb-a08b-4626-a203-07b52f3cbe55)\r\n\r\nThe
change only affects the mobile
menu.","sha":"971c1f3c350cd36c6e21441deb5b473f839963cd"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200823","number":200823,"mergeCommit":{"message":"fix:
make panel top nav menu item button full width on mobile (#200823)\n\n##
Summary\r\n\r\nThis PR solves [[Dashboard] Center Save top nav button
for
small\r\nviewport](https://github.com/elastic/kibana/issues/180093#top)
issue.\r\n\r\n![Screenshot 2024-11-19 at 23
02\r\n16](https://github.com/user-attachments/assets/ac643c61-62d5-4512-af35-33c396f6aba1)\r\n\r\n![Screenshot
2024-11-19 at 23
01\r\n31](https://github.com/user-attachments/assets/4d2021fb-a08b-4626-a203-07b52f3cbe55)\r\n\r\nThe
change only affects the mobile
menu.","sha":"971c1f3c350cd36c6e21441deb5b473f839963cd"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>
---
 .../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>
     ) : (