From 8ee74b7d246f076b834dad82b05605229665e8c5 Mon Sep 17 00:00:00 2001
From: Vinh <vinh@vinh.tech>
Date: Fri, 8 Nov 2019 03:32:49 +0700
Subject: [PATCH] [CORL-743] Fix sort menu on small screens (#2698)

* fix: sort menu on small screens

* chore: add comments
---
 .../stream/tabs/Comments/Stream/SortMenu.css   | 18 ++++++++++++++----
 .../ui/components/SelectField/SelectField.css  |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/Stream/SortMenu.css b/src/core/client/stream/tabs/Comments/Stream/SortMenu.css
index b03b85eba..c4dc47ec5 100644
--- a/src/core/client/stream/tabs/Comments/Stream/SortMenu.css
+++ b/src/core/client/stream/tabs/Comments/Stream/SortMenu.css
@@ -1,8 +1,18 @@
 .mobileSelect {
-  padding: 11px;
-  width: 0px;
-  font-size: 0;
+  /* This adds left padding to Chrome on windows.. */
+  padding: 3px;
+  font-size: 16px;
+  line-height: 0;
+  height: 24px;
+  width: 24px;
+  /* Make the native select invisible */
+  opacity: 0;
 }
 .mobileAfterWrapper {
-  right: 5px;
+  height: 24px;
+  width: 24px;
+  right: 0px;
+  border: 1px solid var(--palette-text-primary);
+  box-sizing: border-box;
+  border-radius: var(--round-corners);
 }
diff --git a/src/core/client/ui/components/SelectField/SelectField.css b/src/core/client/ui/components/SelectField/SelectField.css
index 1677159cf..8b6d2514f 100644
--- a/src/core/client/ui/components/SelectField/SelectField.css
+++ b/src/core/client/ui/components/SelectField/SelectField.css
@@ -26,6 +26,7 @@
   outline: none;
   color: var(--palette-text-primary);
   width: 100%;
+  font-family: system-ui !important;
 
   &::-moz-focus-inner {
     border: 0;