diff --git a/CHANGELOG.md b/CHANGELOG.md index 25bd720e..7d04a56f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), * [#729](https://github.com/shlinkio/shlink-web-client/issues/729) Fixed wrong stats displayed in tags after renaming. * [#737](https://github.com/shlinkio/shlink-web-client/issues/737) Fixed incorrect contrast in warning messages when using dark theme. * [#726](https://github.com/shlinkio/shlink-web-client/issues/726) Fixed delete server and delete short URL modals getting removed from the DOM before finishing close transition. +* [#749](https://github.com/shlinkio/shlink-web-client/issues/749) Fixed broken short URLs table when some short URL has a too long custom slug. ## [3.7.3] - 2022-09-13 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/DeleteShortUrlModal.tsx b/src/short-urls/helpers/DeleteShortUrlModal.tsx index 37582b95..e62a946e 100644 --- a/src/short-urls/helpers/DeleteShortUrlModal.tsx +++ b/src/short-urls/helpers/DeleteShortUrlModal.tsx @@ -15,6 +15,8 @@ interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps { resetDeleteShortUrl: () => void; } +const DELETION_PATTERN = 'delete'; + export const DeleteShortUrlModal = ({ shortUrl, toggle, @@ -41,12 +43,12 @@ export const DeleteShortUrlModal = ({

Caution! You are about to delete a short URL.

This action cannot be undone. Once you have deleted it, all the visits stats will be lost.

-

Write {shortUrl.shortCode} to confirm deletion.

+

Write {DELETION_PATTERN} to confirm deletion.

setInputValue(e.target.value)} /> @@ -62,7 +64,7 @@ export const DeleteShortUrlModal = ({ 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 = (