From 0ed1c3ca8394c84efce43a7773172ea815b49358 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Jul 2022 12:26:07 -0500
Subject: [PATCH] Improve display of PhoneInput

---
 .../components/ui/phone-input/country-code-dropdown.tsx       | 4 ++--
 app/soapbox/components/ui/phone-input/phone-input.tsx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index 699237fe5..3e0e7c778 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
@@ -20,13 +20,13 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
   };
 
   const menu: Menu = COUNTRY_CODES.map(code => ({
-    text: <>{code}</>,
+    text: <>+{code}</>,
     action: handleMenuItem(code),
   }));
 
   return (
     <DropdownMenu items={menu}>
-      <button className='p-4'>{countryCode}</button>
+      <button className='px-4'>+{countryCode}</button>
     </DropdownMenu>
   );
 };
diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
index 7b0f0a658..2b140fc62 100644
--- a/app/soapbox/components/ui/phone-input/phone-input.tsx
+++ b/app/soapbox/components/ui/phone-input/phone-input.tsx
@@ -34,7 +34,7 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
   };
 
   return (
-    <HStack>
+    <HStack alignItems='center'>
       <CountryCodeDropdown
         countryCode={countryCode}
         onChange={handleCountryChange}