<p></p>
<p dir="auto">I wanted to get rid of <em>compact mode</em> and move the secondary menu items in/out of <em>More</em> depending on how much space is available. It was easier to do it together with the fixed breakpoint for small mode. See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2324414384" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4862" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4862/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/4862">#4862</a>.</p>
<p dir="auto"><a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/78ec3396-0059-401a-9cc7-9e5b1c4824f8">image.png (view on web)</a><br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/ddb1a1ec-5189-4737-8042-edbd378398eb">image.png (view on web)</a><br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/eeea8d1f-03e7-4d47-9d0b-ce0db9f297d1">image.png (view on web)</a></p>
<p dir="auto">This is how it looks if you get down to the 768px breakpoint:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/32940977-b34a-4467-a0c0-64f33ce9db00">image.png (view on web)</a></p>
<p dir="auto">Seems to work fine, but that's in English. Here's Bulgarian, and now things don't fit even with fully collapsed secondary menu items:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/3c56ff25-2c2e-4204-bf5e-2c6675e9bee6">image.png (view on web)</a></p>
<p dir="auto">Without the green <em>Export</em> button everything seems to fit fine:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/105e71b5-2444-46d3-bec7-fa682d173334">image.png (view on web)</a></p>
<hr>
<p dir="auto">One of the alternatives to moving <em>Export</em> from buttons to the secondary menu is to move <em>Export</em> dynamically to <em>More</em> if there's not enough space. <em>Traces</em>, <em>Diaries</em> etc will move between the secondary menu and <em>More</em>, <em>Export</em> will move between buttons and <em>More</em>. That'll be a little more javascript.</p>
<p dir="auto">But does <em>Export</em> deserve to be a button? Is it used often enough to justify this spot and then this moving behavior?</p>
<p dir="auto">One advantage could be that if <em>Export</em> is moved to <em>More</em> and there's still not enough space, it's possible to similarly move <em>History</em>. But I don't know if there's a locale that requires this.</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/pull/4854#issuecomment-2138459808">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPWXJXWOK4HMV3BJYDZEZXINAVCNFSM6AAAAABIOFSKC6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZYGQ2TSOBQHA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLKNCNWGLVDXZO3V7CLZEZXINA5CNFSM6AAAAABIOFSKC6WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTT7OZHKA.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/pull/4854/c2138459808</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/pull/4854#issuecomment-2138459808",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4854#issuecomment-2138459808",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>