[openstreetmap-website] Long tag keys and values overflow the tag table (#561)

[Tom Hughes]

Proof of concept attempt at a fix for this, truncating the text with ... and adding a tooltip:

```patch
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 273ce58..627362e 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -256,6 +256,15 @@ $(document).ready(function () {
     };
 
     page.load = function(path, id) {
+      $(".browse-tag-k, .browse-tag-v").filter(function () {
+        return $(this)[0].scrollWidth > $(this).outerWidth();
+      }).each(function () {
+        $(this).tooltip({
+          placement: "bottom",
+          title: $(this).text()
+        });
+      });
+
       map.addObject({type: type, id: parseInt(id)});
     };
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index d16cf12..a9b3227 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1084,6 +1084,8 @@ header .search_form {
       width: 50%;
       float: left;
       padding: 6px 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .browse-tag-k {
```

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.

---
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/561#issuecomment-29641446
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20131202/23a6934f/attachment-0001.html>