Fix android datepicker height (#7804)

* fix datepicker height

* fix suffixtext clipping

2 files changed, 11 insertions, 22 deletions

diff --git a/src/components/forms/DateField/index.shared.tsx b/src/components/forms/DateField/index.shared.tsx
index 7b03ba901..b0522175c 100644
--- a/src/components/forms/DateField/index.shared.tsx
+++ b/src/components/forms/DateField/index.shared.tsx
@@ -1,7 +1,7 @@
 import {Pressable, View} from 'react-native'
 import {useLingui} from '@lingui/react'
 
-import {android, atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, native, useTheme, web} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
@@ -60,16 +60,16 @@ export function DateFieldButton({
         onBlur={onBlur}
         style={[
           {
-            paddingTop: 12,
-            paddingBottom: 12,
             paddingLeft: 14,
             paddingRight: 14,
             borderColor: 'transparent',
             borderWidth: 2,
           },
-          android({
-            minHeight: 57.5,
+          native({
+            paddingTop: 10,
+            paddingBottom: 10,
           }),
+          web(a.py_md),
           a.flex_row,
           a.flex_1,
           a.w_full,
diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
index d28700df9..e5fb33849 100644
--- a/src/components/forms/TextField.tsx
+++ b/src/components/forms/TextField.tsx
@@ -15,6 +15,7 @@ import {
   android,
   applyFonts,
   atoms as a,
+  ios,
   TextStyleProp,
   useAlf,
   useTheme,
@@ -189,13 +190,13 @@ export function createInput(Component: typeof TextInput) {
       a.px_xs,
       {
         // paddingVertical doesn't work w/multiline - esb
-        paddingTop: 12,
-        paddingBottom: 13,
         lineHeight: a.text_md.fontSize * 1.1875,
         textAlignVertical: rest.multiline ? 'top' : undefined,
         minHeight: rest.multiline ? 80 : undefined,
         minWidth: 0,
       },
+      ios({paddingTop: 12, paddingBottom: 13}),
+      android(a.py_sm),
       // fix for autofill styles covering border
       web({
         paddingTop: 10,
@@ -203,10 +204,6 @@ export function createInput(Component: typeof TextInput) {
         marginTop: 2,
         marginBottom: 2,
       }),
-      android({
-        paddingTop: 8,
-        paddingBottom: 8,
-      }),
       style,
     ])
 
@@ -355,17 +352,9 @@ export function SuffixText({
         a.pr_sm,
         a.text_md,
         t.atoms.text_contrast_medium,
-        {
-          pointerEvents: 'none',
-        },
-        web({
-          marginTop: -2,
-        }),
-        ctx.hovered || ctx.focused
-          ? {
-              color: t.palette.contrast_800,
-            }
-          : {},
+        a.pointer_events_none,
+        web([{marginTop: -2}, a.leading_snug]),
+        (ctx.hovered || ctx.focused) && {color: t.palette.contrast_800},
         style,
       ]}>
       {children}