Added responsiveness to manage domains table

src/domains/DomainRow.tsx

@@ -36,15 +36,19 @@ export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, def
   const domainId = `domainEdit${authority.replace('.', '')}`;
 
   return (
-    <tr>
+    <tr className="responsive-table__row">
-      <td>{isDefault ? <DefaultDomain /> : ''}</td>
+      <td className="responsive-table__cell" data-th="Is default domain">{isDefault ? <DefaultDomain /> : ''}</td>
-      <th>{authority}</th>
+      <th className="responsive-table__cell" data-th="Domain">{authority}</th>
-      <td>{redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}</td>
+      <td className="responsive-table__cell" data-th="Base path redirect">
-      <td>{redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}</td>
+        {redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}
-      <td>
+      </td>
+      <td className="responsive-table__cell" data-th="Regular 404 redirect">
+        {redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}
+      </td>
+      <td className="responsive-table__cell" data-th="Invalid short URL redirect">
         {redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
       </td>
-      <td className="text-right">
+      <td className="responsive-table__cell text-right">
         <span id={domainId}>
           <Button outline size="sm" disabled={isDefault} onClick={isDefault ? undefined : toggle}>
             <FontAwesomeIcon icon={isDefault ? forbiddenIcon : editIcon} />

src/domains/ManageDomains.tsx

@@ -43,7 +43,7 @@ export const ManageDomains: FC<ManageDomainsProps> = (
     return (
       <SimpleCard>
         <table className="table table-hover mb-0">
-          <thead>
+          <thead className="responsive-table__header">
             <tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
           </thead>
           <tbody>

src/index.scss

@@ -4,6 +4,7 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tag-autocomplete.scss';
 @import './theme/theme';
+@import './utils/table/ResponsiveTable';
 
 * {
   outline: none !important;

src/short-urls/ShortUrlsTable.scss

@@ -1,11 +1,3 @@
-@import '../utils/base';
-
-.short-urls-table__header {
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: none;
-  }
-}
-
 .short-urls-table__header-cell--with-action {
   cursor: pointer;
 }

src/short-urls/ShortUrlsTable.tsx

@@ -60,7 +60,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
 
   return (
     <table className={tableClasses}>
-      <thead className="short-urls-table__header">
+      <thead className="responsive-table__header short-urls-table__header">
         <tr>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
             Created at

src/short-urls/helpers/ShortUrlsRow.scss

@@ -1,39 +1,8 @@
 @import '../../utils/base';
 @import '../../utils/mixins/vertical-align';
 
-.short-urls-row {
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: block;
-    margin-bottom: 10px;
-    border-bottom: 1px solid var(--border-color);
-    position: relative;
-  }
-}
-
 .short-urls-row__cell.short-urls-row__cell {
   vertical-align: middle !important;
-
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: block;
-    width: 100%;
-    position: relative;
-    padding: .5rem;
-    font-size: .9rem;
-
-    &:before {
-      content: attr(data-th);
-      font-weight: 700;
-    }
-
-    &:last-child {
-      position: absolute;
-      top: 3.5px;
-      right: .5rem;
-      width: auto;
-      padding: 0;
-      border: none;
-    }
-  }
 }
 
 .short-urls-row__cell--break {

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -51,11 +51,11 @@ const ShortUrlsRow = (
   }, [ shortUrl.visitsCount ]);
 
   return (
-    <tr className="short-urls-row">
+    <tr className="responsive-table__row">
-      <td className="indivisible short-urls-row__cell" data-th="Created at: ">
+      <td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
         <Time date={shortUrl.dateCreated} />
       </td>
-      <td className="short-urls-row__cell" data-th="Short URL: ">
+      <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} />
           <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
@@ -64,16 +64,16 @@ const ShortUrlsRow = (
           </span>
         </span>
       </td>
-      <td className="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 && (
-        <td className="short-urls-row__cell short-urls-row__cell--break d-lg-none" data-th="Long URL: ">
+        <td className="short-urls-row__cell responsive-table__cell short-urls-row__cell--break d-lg-none" data-th="Long URL">
           <ExternalLink href={shortUrl.longUrl} />
         </td>
       )}
-      <td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</td>
-      <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
+      <td className="responsive-table__cell short-urls-row__cell text-lg-right" data-th="Visits">
         <ShortUrlVisitsCount
           visitsCount={shortUrl.visitsCount}
           shortUrl={shortUrl}
@@ -81,7 +81,7 @@ const ShortUrlsRow = (
           active={active}
         />
       </td>
-      <td className="short-urls-row__cell">
+      <td className="responsive-table__cell short-urls-row__cell">
         <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
       </td>
     </tr>

src/utils/table/ResponsiveTable.scss

@@ -0,0 +1,42 @@
+@import '../../utils/base';
+
+.responsive-table__header {
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: none;
+  }
+}
+
+.responsive-table__row {
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: block;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+  }
+}
+
+.responsive-table__cell.responsive-table__cell {
+  vertical-align: middle !important;
+
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: block;
+    width: 100%;
+    position: relative;
+    padding: .5rem;
+    font-size: .9rem;
+
+    &[data-th]:before {
+      content: attr(data-th) ': ';
+      font-weight: 700;
+    }
+
+    &:last-child {
+      position: absolute;
+      top: 3.5px;
+      right: .5rem;
+      width: auto;
+      padding: 0;
+      border: none;
+    }
+  }
+}