diff --git a/src/index.scss b/src/index.scss index 3c8e2ba6..6092dc3f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -3,7 +3,8 @@ @import './utils/base'; @import 'node_modules/bootstrap/scss/bootstrap.scss'; @import './common/react-tag-autocomplete.scss'; -@import 'utils/theme/theme'; +@import './utils/theme/theme'; +@import './utils/mixins/text-ellipsis'; @import './utils/table/ResponsiveTable'; @import './utils/StickyCardPaginator'; @@ -222,9 +223,7 @@ hr { } .text-ellipsis { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + @include text-ellipsis(); } .progress-bar { diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss index 92410c15..4666be1a 100644 --- a/src/short-urls/helpers/ShortUrlsRow.scss +++ b/src/short-urls/helpers/ShortUrlsRow.scss @@ -1,4 +1,5 @@ @import '../../utils/base'; +@import '../../utils/mixins/text-ellipsis'; @import '../../utils/mixins/vertical-align'; .short-urls-row__cell.short-urls-row__cell { @@ -13,6 +14,26 @@ position: relative; } +.short-urls-row__cell--indivisible { + @media (min-width: $lgMin) { + white-space: nowrap; + } +} + +.short-urls-row__short-url-wrapper { + @media (max-width: $mdMax) { + word-break: break-all; + } + + @media (min-width: $lgMin) { + @include text-ellipsis(); + + vertical-align: bottom; + display: inline-block; + max-width: 18rem; + } +} + .short-urls-row__copy-hint { @include vertical-align(translateX(10px)); diff --git a/src/short-urls/helpers/ShortUrlsRow.tsx b/src/short-urls/helpers/ShortUrlsRow.tsx index de75968e..1b7fafb1 100644 --- a/src/short-urls/helpers/ShortUrlsRow.tsx +++ b/src/short-urls/helpers/ShortUrlsRow.tsx @@ -43,11 +43,8 @@ export const ShortUrlsRow = ( }; useEffect(() => { - if (isFirstRun.current) { - isFirstRun.current = false; - } else { - setActive(); - } + !isFirstRun.current && setActive(); + isFirstRun.current = false; }, [shortUrl.visitsCount]); return ( @@ -56,15 +53,20 @@ export const ShortUrlsRow = (