[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)](#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":"[email protected]"},"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](#180093 (comment))
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](#180093 (comment))
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](#180093 (comment))
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 <[email protected]>

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>
     ) : (