From 14b98fd833e91c5eeb6fe6e8a2a18f414733b222 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 5 Aug 2018 10:08:17 +0200
Subject: [PATCH] Improved context menu in mobile devices

---
 src/short-urls/helpers/ShortUrlsRow.scss   | 4 ++++
 src/short-urls/helpers/ShortUrlsRowMenu.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
index 34ef0f5d..4f6037bc 100644
--- a/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -45,4 +45,8 @@
 .short-urls-row__copy-hint {
   @include vertical-align();
   right: 100%;
+
+  @media (max-width: $smMax) {
+    right: calc(100% + 10px);
+  }
 }
diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js
index 37e9ac9e..9e05c9a2 100644
--- a/src/short-urls/helpers/ShortUrlsRowMenu.js
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.js
@@ -24,7 +24,7 @@ export class ShortUrlsRowMenu extends React.Component {
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
-        <DropdownToggle color="white" size="sm" caret className="short-urls-row-menu__dropdown-toggle">
+        <DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
           &nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
         </DropdownToggle>
         <DropdownMenu>