From 3f48ca401dc3a03f31ea67389797b6d353efafff Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 7 Mar 2022 09:09:30 +0100
Subject: [PATCH] Fixed responsive table headers

---
 src/domains/ManageDomains.tsx        |  2 +-
 src/servers/ManageServers.tsx        |  2 +-
 src/short-urls/ShortUrlsTable.tsx    |  2 +-
 src/tags/TagsTable.tsx               |  2 +-
 src/utils/table/ResponsiveTable.scss | 14 ++++++++++++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/domains/ManageDomains.tsx b/src/domains/ManageDomains.tsx
index d266b119..6f855cd0 100644
--- a/src/domains/ManageDomains.tsx
+++ b/src/domains/ManageDomains.tsx
@@ -45,7 +45,7 @@ export const ManageDomains: FC<ManageDomainsProps> = (
 
     return (
       <SimpleCard>
-        <table className="table table-hover mb-0">
+        <table className="table table-hover responsive-table mb-0">
           <thead className="responsive-table__header">
             <tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
           </thead>
diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx
index 75afda13..18c08141 100644
--- a/src/servers/ManageServers.tsx
+++ b/src/servers/ManageServers.tsx
@@ -58,7 +58,7 @@ export const ManageServers = (
       </Row>
 
       <SimpleCard>
-        <table className="table table-hover mb-0">
+        <table className="table table-hover responsive-table mb-0">
           <thead className="responsive-table__header">
             <tr>
               {hasAutoConnect && <th style={{ width: '50px' }} />}
diff --git a/src/short-urls/ShortUrlsTable.tsx b/src/short-urls/ShortUrlsTable.tsx
index ed560f19..daeff009 100644
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@@ -28,7 +28,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   const { error, loading, shortUrls } = shortUrlsList;
   const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
   const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
-  const tableClasses = classNames('table table-hover', className);
+  const tableClasses = classNames('table table-hover responsive-table', className);
   const supportsTitle = supportsShortUrlTitle(selectedServer);
 
   const renderShortUrls = () => {
diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx
index 48f261a1..eab4686d 100644
--- a/src/tags/TagsTable.tsx
+++ b/src/tags/TagsTable.tsx
@@ -38,7 +38,7 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
 
   return (
     <SimpleCard key={page} bodyClassName={showPaginator ? 'pb-1' : ''}>
-      <table className="table table-hover mb-0">
+      <table className="table table-hover responsive-table mb-0">
         <thead className="responsive-table__header">
           <tr>
             <th className="tags-table__header-cell" onClick={orderByColumn('tag')}>
diff --git a/src/utils/table/ResponsiveTable.scss b/src/utils/table/ResponsiveTable.scss
index 40b6da02..89b67a14 100644
--- a/src/utils/table/ResponsiveTable.scss
+++ b/src/utils/table/ResponsiveTable.scss
@@ -6,11 +6,18 @@
   }
 }
 
+.responsive-table.table > :not(:first-child) {
+  @media (max-width: $responsiveTableBreakpoint) {
+    border: none;
+  }
+}
+
 .responsive-table__row {
   @media (max-width: $responsiveTableBreakpoint) {
     display: block;
     margin-bottom: 10px;
     border-bottom: 1px solid var(--border-color);
+    border-top: 2px solid var(--border-color);
     position: relative;
   }
 }
@@ -40,3 +47,10 @@
     }
   }
 }
+
+.responsive-table__cell.responsive-table__cell .btn-sm {
+  @media (max-width: $responsiveTableBreakpoint) {
+    padding: 0.1rem 0.4rem;
+    margin-top: 0.16rem;
+  }
+}