diff options
| author | Melanie Seltzer <melleh11@gmail.com> | 2020-01-06 22:36:22 -0800 |
|---|---|---|
| committer | Kamran Ahmed <kamranahmed.se@gmail.com> | 2020-01-07 10:36:22 +0400 |
| commit | abebc323db6afd76fdbcf3781571ac134e09ad37 (patch) | |
| tree | 50376f6b734d2779e6c01053b4401805eeec5295 | |
| parent | Bump mixin-deep from 1.3.1 to 1.3.2 (#38) (diff) | |
| download | githunt-abebc323db6afd76fdbcf3781571ac134e09ad37.tar.gz | |
Fix text overflow issue with ellipsis (#30)
| -rw-r--r-- | src/components/repository-grid/grid-item/styles.css | 13 | ||||
| -rw-r--r-- | src/components/repository-list/list-item/styles.css | 11 |
2 files changed, 23 insertions, 1 deletions
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 { |