Merge pull request #453 from rjgoldsborough/long-version-breaks-columns-451

breaking long words in the crates list

Author: alexcrichton

app/styles/home.scss

@@ -111,6 +111,12 @@
         @include justify-content(space-between);
         @include align-items(center);
 
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         img { vertical-align: middle; }
     }
     li a:hover { background-color: darken($main-bg-dark, 5%); }
@@ -123,4 +129,10 @@
     }
 }
 
-#home-crates > div { @include flex(1); }
+#home-crates > div {
+    @include flex(1);
+
+    // flexbox trick to help truncate text and prevent overflow
+    // https://css-tricks.com/flexbox-truncated-text/
+    min-width: 0;
+}

app/templates/components/crate-list.hbs

@@ -2,7 +2,7 @@
     {{#each crates as |crate|}}
         <li>
             {{#link-to 'crate' crate class='name'}}
-                {{ crate.name }} ({{ crate.max_version }})
+                <span>{{ crate.name }} ({{ crate.max_version }})</span>
                 <img class="right-arrow" src="/assets/right-arrow.png"/>
             {{/link-to}}
         </li>