From a22274f382fc9cbead29945bce4782de3bfbecb2 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 30 Dec 2020 20:05:04 +0100
Subject: [PATCH 1/2] Increased breakpoint in which short URLs table collapses

---
 src/short-urls/ShortUrlsList.tsx         | 2 +-
 src/short-urls/ShortUrlsTable.scss       | 2 +-
 src/short-urls/helpers/ShortUrlsRow.scss | 9 +++++----
 src/utils/base.scss                      | 1 +
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx
index c92ec4c1..971cc128 100644
--- a/src/short-urls/ShortUrlsList.tsx
+++ b/src/short-urls/ShortUrlsList.tsx
@@ -78,7 +78,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
 
   return (
     <>
-      <div className="d-block d-md-none mb-3">
+      <div className="d-block d-lg-none mb-3">
         <SortingDropdown
           items={SORTABLE_FIELDS}
           orderField={order.orderField}
diff --git a/src/short-urls/ShortUrlsTable.scss b/src/short-urls/ShortUrlsTable.scss
index 8a0b38c6..0cf48290 100644
--- a/src/short-urls/ShortUrlsTable.scss
+++ b/src/short-urls/ShortUrlsTable.scss
@@ -1,7 +1,7 @@
 @import '../utils/base';
 
 .short-urls-table__header {
-  @media (max-width: $smMax) {
+  @media (max-width: $responsiveTableBreakpoint) {
     display: none;
   }
 }
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
index 914826ee..6cf6ee42 100644
--- a/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -2,7 +2,7 @@
 @import '../../utils/mixins/vertical-align';
 
 .short-urls-row {
-  @media (max-width: $smMax) {
+  @media (max-width: $responsiveTableBreakpoint) {
     display: block;
     margin-bottom: 10px;
     border-bottom: 1px solid $lightGrey;
@@ -13,7 +13,7 @@
 .short-urls-row__cell.short-urls-row__cell {
   vertical-align: middle !important;
 
-  @media (max-width: $smMax) {
+  @media (max-width: $responsiveTableBreakpoint) {
     display: block;
     width: 100%;
     position: relative;
@@ -22,7 +22,7 @@
 
     &:before {
       content: attr(data-th);
-      font-weight: bold;
+      font-weight: 700;
     }
 
     &:last-child {
@@ -55,9 +55,10 @@
 
 .short-urls-row__copy-hint {
   @include vertical-align(translateX(10px));
+
   box-shadow: 0 3px 15px rgba(0, 0, 0, .25);
 
-  @media (max-width: $smMax) {
+  @media (max-width: $responsiveTableBreakpoint) {
     @include vertical-align(translateX(calc(-100% - 20px)));
   }
 }
diff --git a/src/utils/base.scss b/src/utils/base.scss
index e87c9d0b..8b70dc17 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -7,6 +7,7 @@ $mdMax: 991px;
 $lgMin: 992px;
 $lgMax: 1199px;
 $xlgMin: 1200px;
+$responsiveTableBreakpoint: $mdMax;
 
 // Colors
 $mainColor: #4696e5;

From 01a18f2342c89e95e480dec95c70be90cdc296d3 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 30 Dec 2020 20:05:53 +0100
Subject: [PATCH 2/2] Updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe234844..6b931691 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#364](https://github.com/shlinkio/shlink-web-client/issues/364) Fixed all dropdowns so that they are consistently styled.
 * [#366](https://github.com/shlinkio/shlink-web-client/issues/366) Fixed text in visits menu jumping to next line in some tablet resolutions.
 * [#367](https://github.com/shlinkio/shlink-web-client/issues/367) Removed conflicting overflow in visits table for mobile devices.
+* [#365](https://github.com/shlinkio/shlink-web-client/issues/365) Fixed weird rendering of short URLs list in tablets.
 
 
 ## [3.0.0] - 2020-12-22