From 396148ac5911c4d4def82589f3b203804608095d Mon Sep 17 00:00:00 2001
From: Jake Goldsborough <rjgoldsborough@gmail.com>
Date: Thu, 6 Oct 2016 10:23:24 -0700
Subject: [PATCH] making long lines on crates list truncated

---
 app/styles/home.scss                    | 14 +++++++++++++-
 app/templates/components/crate-list.hbs |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/styles/home.scss b/app/styles/home.scss
index 88e58396ae4..4512ac5b41d 100644
--- a/app/styles/home.scss
+++ b/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;
+}
diff --git a/app/templates/components/crate-list.hbs b/app/templates/components/crate-list.hbs
index 39f4e5d976e..2a5b10cb956 100644
--- a/app/templates/components/crate-list.hbs
+++ b/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>