From abebc323db6afd76fdbcf3781571ac134e09ad37 Mon Sep 17 00:00:00 2001 From: Melanie Seltzer Date: Mon, 6 Jan 2020 22:36:22 -0800 Subject: Fix text overflow issue with ellipsis (#30) --- src/components/repository-grid/grid-item/styles.css | 13 ++++++++++++- src/components/repository-list/list-item/styles.css | 11 +++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/repository-grid/grid-item/styles.css b/src/components/repository-grid/grid-item/styles.css index 0799ace..1db6c42 100644 --- a/src/components/repository-grid/grid-item/styles.css +++ b/src/components/repository-grid/grid-item/styles.css @@ -29,6 +29,7 @@ font-weight: 600; color: #6c7583; font-size: 14px; + width: 80%; } .grid-item-container .author-details a { @@ -71,14 +72,24 @@ } .grid-item-container .repo-name { + display: block; font-weight: 700; - word-wrap: break-all; + word-break: break-word; + width: 100%; +} + +.grid-item-container .repo-name, +.grid-item-container .author-details h5 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .grid-item-container .repo-body p { font-size: 14px; margin-bottom: 0; color: #6e7583; + word-break: break-word; } .grid-item-container .repo-footer { diff --git a/src/components/repository-list/list-item/styles.css b/src/components/repository-list/list-item/styles.css index 6174875..8facc40 100644 --- a/src/components/repository-list/list-item/styles.css +++ b/src/components/repository-list/list-item/styles.css @@ -9,6 +9,16 @@ margin-bottom: 4px; font-size: 20px; font-weight: 700; + word-break: break-word; +} + +@media (min-width: 768px) { + .list-item-container .repo-header h3 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 80%; + } } .list-item-container .repo-header h3 .text-normal { @@ -31,6 +41,7 @@ margin-bottom: 0; display: block; max-width: 80%; + word-break: break-all; } .list-item-container .repo-footer svg { -- cgit v1.2.3