From 3601d442db32d3f98f7b050365c11ea8ef9bc4ae Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Sat, 19 Dec 2020 12:57:17 +0900
Subject: [PATCH] fix(frontend): adjust padding of search box so placeholder
 text fits on mobile

this only fixes English. Other languages placeholders may or may not fit into the space

fixes #393
---
 src/components/Layout/LanguagePicker/index.tsx | 2 +-
 src/components/Layout/SearchInput/index.tsx    | 2 +-
 src/components/Layout/index.tsx                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index 13f66de8e..2c82397d6 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -58,7 +58,7 @@ const LanguagePicker: React.FC = () => {
   useClickOutside(dropdownRef, () => setDropdownOpen(false));
 
   return (
-    <div className="ml-3 relative">
+    <div className="relative">
       <div>
         <button
           className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx
index e485fa5a6..60e9f62af 100644
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@@ -27,7 +27,7 @@ const SearchInput: React.FC = () => {
           </div>
           <input
             id="search_field"
-            className="block w-full h-full pl-8 pr-3 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            className="block w-full h-full pl-8 pr-1 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 5d4b36c7f..846ade333 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -44,7 +44,7 @@ const Layout: React.FC = ({ children }) => {
           </button>
           <div className="flex-1 px-4 flex justify-between">
             <SearchInput />
-            <div className="ml-4 flex items-center md:ml-6">
+            <div className="flex items-center md:ml-6">
               <LanguagePicker />
               <UserDropdown />
             </div>