<p></p>
<p dir="auto">When the screen is too narrow to display the 'compact-nav' list of menus (namely: logo+primary-nav+compact-secondary-nav+(user_menu or login_menu)), we switch to the 'small-nav' setup, with just the logo and the "burger" menu button.</p>
<p dir="auto">However, this breakpoint depends on the calculated width of the menu items, not the width of the screen. It means that some features, like the edit button and the export button, are disabled based on the length of certain strings, rather than the screen width. Even in English, this means it depends on the length of the user's display name:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/257792766-0f73ef45-668f-4001-b4d3-c5ec805c2320.png"><img src="https://user-images.githubusercontent.com/360803/257792766-0f73ef45-668f-4001-b4d3-c5ec805c2320.png" alt="Screenshot from 2023-08-02 11-43-24" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/257792768-95b9a745-c585-4943-9a05-5733cedf444c.png"><img src="https://user-images.githubusercontent.com/360803/257792768-95b9a745-c585-4943-9a05-5733cedf444c.png" alt="Screenshot from 2023-08-02 11-44-15" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/257792769-4446cd51-e72a-4793-aa9f-a3ac8d8e84b5.png"><img src="https://user-images.githubusercontent.com/360803/257792769-4446cd51-e72a-4793-aa9f-a3ac8d8e84b5.png" alt="Screenshot from 2023-08-02 11-44-27" style="max-width: 100%;"></a></p>
<p dir="auto">I think it's reasonable to show the edit button, even in the 'small-nav' menu, for a screen width of over 1100 pixels!</p>
<p dir="auto">Even without the silly name, the point still stands, particularly for languages where the four labels (edit, history, export, more) might be significantly different widths from in English. And it will also impact English, if we ever add or remove buttons from the primary menu.</p>
<p dir="auto">We should decide what minimum width is appropriate for each tool, and hide (or disable) the buttons based on the screen width, instead of the menu width.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/4130">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLOQZPOOVFML6G6LJRLXTIYH3ANCNFSM6AAAAAA3BDFMAM">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIUZFVFVYACKF3WUGDXTIYH3A5CNFSM6AAAAAA3BDFMAOWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHG2QGU24.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/4130</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/4130",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/4130",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>