fix: update UI components and improve keyboard handling

- Modified the FollowFeed component to remove unnecessary wrapper classes for better layout management.
- Enhanced the EditProfileScreen by wrapping the main view in a KeyboardAvoidingView to improve keyboard interaction.
- Added keyboard handling to the EditEmailScreen for better user experience.

Signed-off-by: Innei <tukon479@gmail.com>

.cursor/rules/color.mdc

@@ -1,6 +1,6 @@
 ---
 description: 
-globs: 
+globs: apps/desktop/**/*,packages/internal/components/**/*
 alwaysApply: false
 ---
 # UIKit Colors for Tailwind CSS

apps/mobile/src/modules/feed/FollowFeed.tsx

@@ -212,7 +212,7 @@ function FollowImpl(props: { feedId: string }) {
       {/* Group 2 */}
       <GroupedInsetListCard className="gap-y-4 p-4">
         <FormProvider form={form}>
-          <View className="-mx-2.5">
+          <View>
             <Controller
               name="title"
               control={form.control}
@@ -223,13 +223,12 @@ function FollowImpl(props: { feedId: string }) {
                   onChangeText={onChange}
                   value={value}
                   ref={ref}
-                  wrapperClassName="ml-2.5"
                 />
               )}
             />
           </View>
 
-          <View className="-mx-2.5">
+          <View>
             <Controller
               name="category"
               control={form.control}
@@ -240,13 +239,12 @@ function FollowImpl(props: { feedId: string }) {
                   onChangeText={onChange}
                   value={value || ""}
                   ref={ref}
-                  wrapperClassName="ml-2.5"
                 />
               )}
             />
           </View>
 
-          <View className="-mx-1">
+          <View>
             <Controller
               name="isPrivate"
               control={form.control}
@@ -262,7 +260,7 @@ function FollowImpl(props: { feedId: string }) {
             />
           </View>
 
-          <View className="-mx-4">
+          <View className="-mx-3">
             <FormLabel className="mb-4 pl-4" label={t("subscription_form.view")} optional />
 
             <Controller

apps/mobile/src/modules/settings/routes/EditProfile.tsx

@@ -6,7 +6,14 @@ import { useMutation } from "@tanstack/react-query"
 import type { FC } from "react"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native"
+import {
+  KeyboardAvoidingView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native"
 import { KeyboardController } from "react-native-keyboard-controller"
 
 import { HeaderSubmitTextButton } from "@/src/components/layouts/header/HeaderElements"
@@ -61,27 +68,30 @@ export const EditProfileScreen = () => {
   }
 
   return (
-    <SafeNavigationScrollView
-      Header={
-        <NavigationBlurEffectHeaderView
-          headerRight={
-            <HeaderSubmitTextButton
-              label={t("words.save", { ns: "common" })}
-              isValid={Object.keys(dirtyFields).length > 0}
-              isLoading={isPending}
-              onPress={() => {
-                updateProfile()
-              }}
-            />
-          }
-          title={t("profile.edit_profile")}
-        />
-      }
-      className="bg-system-grouped-background"
-    >
-      <AvatarSection whoami={whoami} />
-      <ProfileForm whoami={whoami} dirtyFields={dirtyFields} setDirtyFields={setDirtyFields} />
-    </SafeNavigationScrollView>
+    <KeyboardAvoidingView behavior="padding" className="flex-1">
+      <SafeNavigationScrollView
+        keyboardShouldPersistTaps="handled"
+        Header={
+          <NavigationBlurEffectHeaderView
+            headerRight={
+              <HeaderSubmitTextButton
+                label={t("words.save", { ns: "common" })}
+                isValid={Object.keys(dirtyFields).length > 0}
+                isLoading={isPending}
+                onPress={() => {
+                  updateProfile()
+                }}
+              />
+            }
+            title={t("profile.edit_profile")}
+          />
+        }
+        className="bg-system-grouped-background"
+      >
+        <AvatarSection whoami={whoami} />
+        <ProfileForm whoami={whoami} dirtyFields={dirtyFields} setDirtyFields={setDirtyFields} />
+      </SafeNavigationScrollView>
+    </KeyboardAvoidingView>
   )
 }
 
@@ -208,6 +218,7 @@ const ProfileForm: FC<{
           <GroupedInsetListCard>
             <View className="flex-1">
               <TextInput
+                clearButtonMode="always"
                 className="text-label h-[100px] w-full flex-1 px-4 py-3"
                 value={dirtyFields.bio ?? whoami?.bio ?? ""}
                 hitSlop={10}

apps/mobile/src/screens/(modal)/EditEmailScreen.tsx

@@ -50,6 +50,7 @@ export const EditEmailScreen: NavigationControllerView = () => {
 
   return (
     <SafeNavigationScrollView
+      keyboardShouldPersistTaps="handled"
       Header={
         <NavigationBlurEffectHeaderView
           title={t("profile.edit_email")}