From a97d74db945b3ef3a6f434c214e99e08b94d04e4 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <vaggelisyfantis@gmail.com>
Date: Wed, 20 Dec 2023 23:46:51 +0200
Subject: [PATCH] fix(clerk-js): Fix Phone input styling (#2424)

---
 .changeset/few-beers-wink.md                                | 2 ++
 packages/clerk-js/src/ui/elements/Card/CardContent.tsx      | 1 -
 packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx | 2 +-
 packages/clerk-js/src/ui/elements/Select.tsx                | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/few-beers-wink.md

diff --git a/.changeset/few-beers-wink.md b/.changeset/few-beers-wink.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/few-beers-wink.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index 8f4aae3585a..1b57608fe91 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -25,7 +25,6 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       sx={[
         t => ({
           backgroundColor: t.colors.$colorBackground,
-          overflow: 'hidden',
           willChange: 'transform, opacity, height',
           transitionProperty: t.transitionProperty.$common,
           transitionDuration: '200ms',
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
index 9dfa491c98f..818d52ee159 100644
--- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -189,7 +189,7 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
       />
       <Text
         as='div'
-        sx={{ width: '100%' }}
+        sx={{ width: '100%', textAlign: 'left' }}
       >
         {country.name}
       </Text>
diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/clerk-js/src/ui/elements/Select.tsx
index 7c8f91bc498..b20cd4e6ab2 100644
--- a/packages/clerk-js/src/ui/elements/Select.tsx
+++ b/packages/clerk-js/src/ui/elements/Select.tsx
@@ -190,7 +190,7 @@ const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
           t => ({
             border: 'none',
             borderRadius: t.radii.$md,
-            backgroundColor: t.colors.$blackAlpha200,
+            backgroundColor: t.colors.$blackAlpha50,
             padding: t.space.$2,
           }),
           sx,