Make multiline text inputs resizable

Fix multiline input padding for mobile

Remove duplicate resizable input css

src/components/forms/TextField.tsx

···
-import {createContext, useContext, useMemo, useRef} from 'react'
+import React, {createContext, useContext, useMemo, useRef} from 'react'
 import {
   type AccessibilityProps,
   StyleSheet,
···
 
 import {HITSLOP_20} from '#/lib/constants'
 import {mergeRefs} from '#/lib/merge-refs'
+import {isWeb} from '#/platform/detection'
 import {
   android,
   applyFonts,
···
     ],
   )
 
+  // Check if any child has multiline prop
+  const hasMultiline = useMemo(() => {
+    let found = false
+    React.Children.forEach(children, child => {
+      if (
+        React.isValidElement(child) &&
+        (child.props as {multiline?: boolean})?.multiline
+      ) {
+        found = true
+      }
+    })
+    return found
+  }, [children])
+
   return (
     <Context.Provider value={context}>
       <View
···
           a.align_center,
           a.relative,
           a.w_full,
-          a.px_md,
+          !(hasMultiline && isWeb) && a.px_md,
           style,
         ]}
         {...web({
···
         marginTop: 2,
         marginBottom: 2,
       }),
+      rest.multiline &&
+        web({
+          resize: 'vertical',
+          fieldSizing: 'content',
+          paddingLeft: 16,
+          paddingRight: 16,
+        }),
       style,
     ])
 

src/style.css

···
     opacity: 0;
   }
 }
-
-textarea {
-  resize: vertical !important;
-}