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

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 && (