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

@@ -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"

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}

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>