Fixed broken short URLs table when creating short URL with too long slug

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 {

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));
 

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 = (
         <Time date={shortUrl.dateCreated} />
       </td>
       <td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
-        <span className="indivisible short-urls-row__cell--relative">
-          <ExternalLink href={shortUrl.shortUrl} />
+        <span className="short-urls-row__cell--relative short-urls-row__cell--indivisible">
+          <span className="short-urls-row__short-url-wrapper">
+            <ExternalLink href={shortUrl.shortUrl} />
+          </span>
           <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
           <span className="badge bg-warning text-black short-urls-row__copy-hint" hidden={!copiedToClipboard}>
             Copied short URL!
           </span>
         </span>
       </td>
-      <td className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break" data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}>
+      <td
+        className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break"
+        data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}
+      >
         <ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
       </td>
       {shortUrl.title && (

src/utils/helpers/hooks.ts

@@ -27,7 +27,7 @@ export const useTimeoutToggle = (
   return [flag, callback];
 };
 
-type ToggleResult = [ boolean, () => void, () => void, () => void ];
+type ToggleResult = [boolean, () => void, () => void, () => void];
 
 export const useToggle = (initialValue = false): ToggleResult => {
   const [flag, setFlag] = useState<boolean>(initialValue);

src/utils/mixins/text-ellipsis.scss

@@ -0,0 +1,5 @@
+@mixin text-ellipsis() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}