<p>Proof of concept attempt at a fix for this, truncating the text with ... and adding a tooltip:</p>
<div class="highlight highlight-patch"><pre><span class="gh">diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js</span>
<span class="gh">index 273ce58..627362e 100644</span>
<span class="gd">--- a/app/assets/javascripts/index.js</span>
<span class="gi">+++ b/app/assets/javascripts/index.js</span>
<span class="gu">@@ -256,6 +256,15 @@ $(document).ready(function () {</span>
};
page.load = function(path, id) {
<span class="gi">+ $(".browse-tag-k, .browse-tag-v").filter(function () {</span>
<span class="gi">+ return $(this)[0].scrollWidth > $(this).outerWidth();</span>
<span class="gi">+ }).each(function () {</span>
<span class="gi">+ $(this).tooltip({</span>
<span class="gi">+ placement: "bottom",</span>
<span class="gi">+ title: $(this).text()</span>
<span class="gi">+ });</span>
<span class="gi">+ });</span>
<span class="gi">+</span>
map.addObject({type: type, id: parseInt(id)});
};
<span class="gh">diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss</span>
<span class="gh">index d16cf12..a9b3227 100644</span>
<span class="gd">--- a/app/assets/stylesheets/common.css.scss</span>
<span class="gi">+++ b/app/assets/stylesheets/common.css.scss</span>
<span class="gu">@@ -1084,6 +1084,8 @@ header .search_form {</span>
width: 50%;
float: left;
padding: 6px 10px;
<span class="gi">+ overflow: hidden;</span>
<span class="gi">+ text-overflow: ellipsis;</span>
}
.browse-tag-k {
</pre></div>
<p>It needs some work on the tooltip styling though, as the current style doesn't show up well against the white background of the sidebar.</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br>Reply to this email directly or <a href='https://github.com/openstreetmap/openstreetmap-website/issues/561#issuecomment-29641446'>view it on GitHub</a>.<img src='https://github.com/notifications/beacon/uTRSc6ihLa7Shf84BpiOprB5q9vV7Zxm2LwfcgHvjC5D2qpYav7hvFWD-cs1CIUS.gif' height='1' width='1'></p>