chore(ui): Add ios-support conditions for inputs to prevent zoom (#4111)

clerk · Sep 6, 2024 · 3c22b10 · 3c22b10
1 parent 126f8da
commit 3c22b10
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/.changeset/gold-crabs-scream.md b/.changeset/gold-crabs-scream.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/phone-number-field.tsx b/packages/ui/src/common/phone-number-field.tsx
@@ -171,7 +171,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                   // - To create the overlapping border/shadow effect"
                   //   - `ring` – "focus ring"
                   //   - `ring-offset` - border
-                  '[--phone-number-field-py:theme(spacing[1.5])]',
+                  'supports-ios:[--phone-number-field-py:theme(spacing.1)] [--phone-number-field-py:theme(spacing[1.5])]',
                   '[--phone-number-field-px:theme(spacing.3)]',
                   'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
                   'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
@@ -237,7 +237,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                           <Command.Input
                             ref={commandInputRef}
                             placeholder='Search country or code'
-                            className='leading-small bg-gray-2 placeholder:text-gray-9 text-gray-12 border-gray-4 w-full rounded-[calc(theme(borderRadius.md)-2px)] border px-2 py-1.5 text-base outline-none'
+                            className='leading-small bg-gray-2 placeholder:text-gray-9 text-gray-12 border-gray-4 supports-ios:py-1 supports-ios:text-[length:1rem] w-full rounded-[calc(theme(borderRadius.md)-2px)] border px-2 py-1.5 text-base outline-none'
                           />
                         </div>
                         <Command.List
@@ -277,7 +277,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                   type='button'
                   // Prevent tab stop
                   tabIndex={-1}
-                  className='grid cursor-text place-content-center bg-white px-1 text-base'
+                  className='supports-ios:text-[length:1rem] grid cursor-text place-content-center bg-white px-1 text-base'
                   onClick={() => inputRef.current?.focus()}
                   disabled={props.disabled}
                 >
@@ -296,7 +296,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                   onPaste={handlePaste}
                   onChange={handlePhoneNumberChange}
                   {...props}
-                  className='w-full rounded-r-md bg-white py-[--phone-number-field-py] pr-[--phone-number-field-px] text-base outline-none'
+                  className='supports-ios:text-[length:1rem] w-full rounded-r-md bg-white py-[--phone-number-field-py] pr-[--phone-number-field-px] text-base outline-none'
                   data-field-input
                 />
               </div>

diff --git a/packages/ui/src/primitives/field.tsx b/packages/ui/src/primitives/field.tsx
@@ -18,7 +18,7 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
       className={cx(
         '[--field-input-height:1.875rem]',
         '[--field-input-px:theme(spacing.3)]',
-        '[--field-input-py:theme(spacing[1.5])]',
+        'supports-ios:[--field-input-py:theme(spacing.1)] [--field-input-py:theme(spacing[1.5])]',
         '[--field-input-group-end-size:--field-input-height]',
         'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
         'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
@@ -175,6 +175,7 @@ export const Input = React.forwardRef(function FieldInput(
         'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
         'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
         'disabled:cursor-not-allowed disabled:opacity-50',
+        'supports-ios:text-[length:1rem] supports-ios:min-h-[1.875rem]',
         // variant
         {
           default: 'w-full justify-start',

diff --git a/packages/ui/src/tailwind.config.ts b/packages/ui/src/tailwind.config.ts
@@ -115,7 +115,7 @@ const config = {
     },
   },
   plugins: [
-    plugin(function ({ addBase, theme }) {
+    plugin(function ({ addBase, addVariant, theme }) {
       /**
        * Extends Tailwind's built-in `addBase` function by scoping styles to
        * only affect components within the `@clerk/ui` package.
@@ -469,6 +469,11 @@ const config = {
           fontFamily: 'var(--cl-font-family)',
         },
       });
+
+      /**
+       * Conditionally apply CSS to ios devices
+       */
+      addVariant('supports-ios', '@supports (-webkit-touch-callout: none)');
     }),
   ],
 } satisfies Config;

diff --git a/packages/ui/theme-builder/app/theme-builder.tsx b/packages/ui/theme-builder/app/theme-builder.tsx
@@ -151,7 +151,7 @@ export function ThemeBuilder({ children }: { children: React.ReactNode }) {
             </div>
           </header>
 
-          <aside className='relative isolate flex h-full w-[17rem] flex-col justify-between gap-8 overflow-y-auto border-e bg-white p-4'>
+          <aside className='relative isolate hidden h-full w-[17rem] flex-col justify-between gap-8 overflow-y-auto border-e bg-white p-4 sm:flex'>
             <div className='space-y-4'>
               <AppearanceOptions />
               {appearance === 'light' ? (
@@ -265,7 +265,7 @@ export function ThemeBuilder({ children }: { children: React.ReactNode }) {
           </aside>
 
           <figure
-            className={cx('relative isolate grid items-center overflow-y-auto p-8', {
+            className={cx('relative isolate grid items-center overflow-y-auto p-8 max-sm:[grid-column:1/-1]', {
               'bg-white': appearance === 'light',
               'dark bg-neutral-950': appearance === 'dark',
             })}