<p></p>
<p>The really annoying bit is the behaviour of the separator bars when it wraps, but it seems that is really hard to avoid... With a bit of effort I did manage to get this:</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/147741/130320857-14dcbf3f-b121-4aff-8aba-92ee435381b3.png"><img src="https://user-images.githubusercontent.com/147741/130320857-14dcbf3f-b121-4aff-8aba-92ee435381b3.png" alt="image" style="max-width:100%;"></a></p>
<p>That is based on <a href="https://stackoverflow.com/a/31732902/805631" rel="nofollow">https://stackoverflow.com/a/31732902/805631</a> and uses this modified CSS for the secondary menu:</p>
<div class="highlight highlight-source-css"><pre><span class="pl-ent">ul</span>.<span class="pl-c1">secondary-actions</span> {
  <span class="pl-c1">font-style</span><span class="pl-kos">:</span> normal;
  <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
  <span class="pl-c1">margin-left</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
  <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
  <span class="pl-ent">&</span>.<span class="pl-c1">pager</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> inline-block;
    <span class="pl-c1">margin-right</span><span class="pl-kos">:</span> <span class="pl-c1">60<span class="pl-smi">px</span></span>;
  }<span class="pl-ent"></span><span class="pl-c1"></span>
  <span class="pl-c1">></span> <span class="pl-ent">li</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> inline;
    <span class="pl-c1">list-style</span><span class="pl-kos">:</span> none;
    <span class="pl-c1">white-space</span><span class="pl-kos">:</span> nowrap;
    <span class="pl-ent">&</span>::<span class="pl-ent">before</span> {
      <span class="pl-c1">content</span><span class="pl-kos">:</span> <span class="pl-s">" "</span>
    }
    <span class="pl-ent">&</span>::<span class="pl-ent">after</span> {
      <span class="pl-c1">content</span><span class="pl-kos">:</span> <span class="pl-s">" "</span>;
      <span class="pl-c1">whote-space</span><span class="pl-kos">:</span> normal;
      <span class="pl-c1">word-spacing</span><span class="pl-kos">:</span> <span class="pl-c1">1<span class="pl-smi">em</span></span>;
      <span class="pl-c1">background-image</span><span class="pl-kos">:</span> <span class="pl-en">linear-gradient</span>(
        to right<span class="pl-kos">,</span>
        transparent <span class="pl-c1">0</span> <span class="pl-en">calc</span>(<span class="pl-c1">50<span class="pl-smi">%</span></span> <span class="pl-c1">-</span> <span class="pl-c1">0.5<span class="pl-smi">px</span></span>)<span class="pl-kos">,</span>
        $grey <span class="pl-c1">0</span> <span class="pl-en">calc</span>(<span class="pl-c1">50<span class="pl-smi">%</span></span> <span class="pl-c1">+</span> <span class="pl-c1">0.5<span class="pl-smi">px</span></span>)<span class="pl-kos">,</span>
        transparent <span class="pl-c1">0</span>
      );
    }
    <span class="pl-ent">&</span><span class="pl-kos">:</span><span class="pl-c1">first-child</span> {
      <span class="pl-c1">border-left</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
      <span class="pl-c1">padding-left</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
    }
    <span class="pl-ent">&</span><span class="pl-kos">:</span><span class="pl-c1">last-child</span> {
      <span class="pl-c1">margin-right</span><span class="pl-kos">:</span> <span class="pl-c1">0<span class="pl-smi">px</span></span>;
    }
  }
}</pre></div>
<p>There's a nasty catch though, which is that you've have any whitespace before the <code></li></code> in the HTML so the view has to be modified in a nasty way - if you do have whitespace then it collapses with the whitespace in the <code>::after</code> and you don't get the background image :-(</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3297#issuecomment-903105641">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKUQRK5HQ7LIJ5TIQDT56IERANCNFSM5CL6LPHA">unsubscribe</a>.<br />Triage notifications on the go with GitHub Mobile for <a href="https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675">iOS</a> or <a href="https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email">Android</a>.<img src="https://github.com/notifications/beacon/AAK2OLICSZ4E5ZG3EGDM72DT56IERA5CNFSM5CL6LPHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGXKEY2I.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3297#issuecomment-903105641",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3297#issuecomment-903105641",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>