fix(clerk-js): Fix Phone input styling (#2424)

clerk · Dec 20, 2023 · a97d74d · a97d74d
1 parent 2504eb3
commit a97d74d
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git a/.changeset/few-beers-wink.md 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
@@ -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
@@ -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
@@ -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,