[headerLinks] horizontally center mobileList button

[paulinashakirova]

Summary

Hi, folks! 👋🏻
As part of Papercuts project, I've been working on the [Dashboard] Center Save top nav button for small viewport Kibana issue. While working on this, I noticed that in the HeaderLinks pop-up on mobile, the Save button is left-aligned in different areas across Kibana.

For example, in Analytics Dashboards:

This made me think that perhaps we could make the button span the entire width of the modal, like so:

What do you think? I'd love to hear your thoughts, as it's possible this is intentional and designed to be this way. 😁

In this PR, I am sharing the lines of code I added as a reference, but there may be other ways to implement this.

General checklist

• Browser QA
  • [x ] Checked in both light and dark modes
  • [x ] Checked in mobile
  • [x ] Checked in Chrome, Safari, and Firefox

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8122/
• Storybook: https://eui.elastic.co/pr_8122/storybook
• New docs: https://eui.elastic.co/pr_8122/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: db9ba71

cc @paulinashakirova

[mgadewoll]

@paulinashakirova Thanks for reaching out and looking into this!

While your solution does work, I'd think it's not quite what we'd want here.
The list container is just that, a container. And EuiHeaderLinks have a specific styling on mobile to ensure full width. This means that the items take care of their positioning, not the container, because in theory there might be a use case for non fullwidth content potentially.

But I think this could be solved on Kibana side. I see that filled buttons are added separately here so they don't have the mobile full width as they are not EuiHeaderLinks. But EuiButton has a fullWidth prop that could be added here 🙂

[paulinashakirova]

Hi @mgadewoll! 👋🏻
Thank you so much for replying and sharing your knowledge.
I will fix it on Kibana's side then.
Have a great day! 😊