fix: Remove country name from country picker

Author: Ehesp

packages/firebaseui-react/src/components/country-selector.tsx

@@ -18,24 +18,28 @@ export function CountrySelector({
     <div className={cn("fui-country-selector", className)}>
       <div className="fui-country-selector__wrapper">
         <span className="fui-country-selector__flag">{value.emoji}</span>
-        <select
-          value={value.code}
-          onChange={(e) => {
-            const country = countryData.find((c) => c.code === e.target.value);
-            if (country) {
-              onChange(country);
-            }
-          }}
-        >
-          {countryData.map((country) => (
-            <option
-              key={`${country.code}-${country.dialCode}`}
-              value={country.code}
-            >
-              {country.dialCode} ({country.name})
-            </option>
-          ))}
-        </select>
+        <div className="fui-country-selector__select-wrapper">
+          <span className="fui-country-selector__dial-code">{value.dialCode}</span>
+          <select
+            className="fui-country-selector__select"
+            value={value.code}
+            onChange={(e) => {
+              const country = countryData.find((c) => c.code === e.target.value);
+              if (country) {
+                onChange(country);
+              }
+            }}
+          >
+            {countryData.map((country) => (
+              <option
+                key={`${country.code}-${country.dialCode}`}
+                value={country.code}
+              >
+                {country.dialCode} ({country.name})
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
     </div>
   );

packages/firebaseui-styles/src/base.css

@@ -126,7 +126,7 @@
   }
 
   .fui-country-selector {
-    @apply relative inline-block min-w-[120px];
+    @apply relative inline-block w-[80px];
   }
 
   .fui-country-selector__wrapper {
@@ -138,6 +138,10 @@
   }
 
   .fui-country-selector select {
-    @apply w-full pl-8 pr-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent appearance-none cursor-pointer;
+    @apply w-full pl-8 pr-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent appearance-none cursor-pointer text-transparent;
+  }
+
+  .fui-country-selector__dial-code {
+    @apply absolute left-8 top-1/2 -translate-y-1/2 text-sm pointer-events-none text-text;
   }
 }