<p></p>
<p dir="auto">If you really want to avoid depending on some specific minimal safe button width, a possible fix for that is to gradually decrease the label font size. That's more custom css however.</p>
<p dir="auto">You'd change font size here<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/blob/e9887f88edf37ec164bb4373f7bcb86262b781b6/app/assets/stylesheets/common.scss#L509">https://github.com/openstreetmap/openstreetmap-website/blob/e9887f88edf37ec164bb4373f7bcb86262b781b6/app/assets/stylesheets/common.scss#L509</a><br>
to something like</p>
<pre class="notranslate"><code class="notranslate">font-size: clamp(12px, calc(12px + 4/500 * (100vw - 268px)), 16px);
</code></pre>
<p dir="auto">which can be made more readable by declaring variables (4 is a difference between font sizes, 500+268 is the breakpoint for layers panel to go full screen width).</p>
<p dir="auto">Or do a less weird thing and put one custom width media query when the button becomes smaller than ~180px and make the font size smaller. That's about 420px. This is assuming that whoever made translations for layer names tried to make them fit in the original button size. Anyway the label font size now is quite large - 16px - which becomes noticeable once it moves under the OSM logo with font size 18px.</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/3629#issuecomment-1196115142">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPRDZA7SR7CT6B6RX3VWB4YJANCNFSM54W22P7Q">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJAW5344E5O7DNWFHTVWB4YJA5CNFSM54W22P72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOI5FUJRQ.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/3629/c1196115142</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/3629#issuecomment-1196115142",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3629#issuecomment-1196115142",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>