@entropy-softworks/ui 2026.8.15 → 2026.8.18

package/src/components/dropdown-menu.tsx

@@ -15,7 +15,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border dark:border-neutral-800 bg-popover dark:bg-black p-1",
         className
       )}
       style={
@@ -50,8 +50,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex flex-row items-center rounded-sm px-2 py-1.5 web:cursor-pointer web:outline-none active:bg-accent",
-      "web:hover:bg-accent web:focus:bg-accent",
+      "relative flex flex-row items-center rounded-sm px-2 py-1.5 web:cursor-pointer web:outline-none active:bg-accent dark:active:bg-neutral-800",
+      "web:hover:bg-accent web:focus:bg-accent dark:web:hover:bg-neutral-800 dark:web:focus:bg-neutral-800",
       props.disabled && "opacity-50 web:pointer-events-none",
       className
     )}
@@ -91,7 +91,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", className)}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground dark:text-white", className)}
     {...props}
   />
 ));
@@ -103,7 +103,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-border dark:bg-neutral-800", className)}
     {...props}
   />
 ));

package/src/components/entropy-mark.tsx

@@ -129,7 +129,7 @@ export function EntropyByline({
       {/* Flat at rest; press reveals the echo-cascade (the website's hover
           animation, touch-ported — see entropy-mark-animated.tsx). */}
       <EntropyMarkAnimated size={size} variant={variant} scheme={scheme} />
-      <Text className="font-mono text-xs text-muted-foreground">{label}</Text>
+      <Text className="font-mono text-xs text-muted-foreground dark:text-neutral-400">{label}</Text>
     </View>
   );
 }

package/src/components/error-boundary.tsx

@@ -53,9 +53,9 @@ export class ErrorBoundary extends React.Component<Props, State> {
       return (
         this.props.fallback ?? (
           <View className="flex-1 items-center justify-center p-8">
-            <Text className="mb-4 text-lg font-semibold text-foreground">Something went wrong</Text>
+            <Text className="mb-4 text-lg font-semibold text-foreground dark:text-white">Something went wrong</Text>
             <Button onPress={this.handleReset}>
-              <Text className="text-primary-foreground">Try Again</Text>
+              <Text className="text-primary-foreground dark:text-black">Try Again</Text>
             </Button>
           </View>
         )

package/src/components/pagination.tsx

@@ -116,7 +116,7 @@ export function Pagination({
             <DropdownMenuContent>
               {pageSizeOptions.map((size) => (
                 <DropdownMenuItem key={size} onPress={() => onPageSizeChange(size)}>
-                  <MutedText className="text-sm text-foreground">{`${size} / page`}</MutedText>
+                  <MutedText className="text-sm text-foreground dark:text-white">{`${size} / page`}</MutedText>
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>

package/src/components/password-generator.tsx

@@ -157,9 +157,9 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
 
   return (
     <>
-      <View className="mb-4 rounded-lg border border-border bg-card p-4 dark:bg-neutral-900/50">
+      <View className="mb-4 rounded-lg border border-border dark:border-neutral-800 bg-card p-4 dark:bg-neutral-900/50">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-sm font-medium text-muted-foreground">Generated Password</Text>
+          <Text className="text-sm font-medium text-muted-foreground dark:text-neutral-400">Generated Password</Text>
           <View className="flex-row items-center">
             <View
               className="h-2 w-2 rounded-full"
@@ -171,9 +171,9 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
           </View>
         </View>
 
-        <View className="mb-2 rounded-lg bg-background p-3">
+        <View className="mb-2 rounded-lg bg-background dark:bg-black p-3">
           <Text
-            className="font-mono text-base text-foreground"
+            className="font-mono text-base text-foreground dark:text-white"
             selectable
             numberOfLines={2}
             testID="generator-output"
@@ -187,7 +187,7 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
           {breach === "checking" ? (
             <>
               <ActivityIndicator size="small" color={isDark ? "#a3a3a3" : "#737373"} />
-              <Text className="text-xs text-muted-foreground">Checking breach database…</Text>
+              <Text className="text-xs text-muted-foreground dark:text-neutral-400">Checking breach database…</Text>
             </>
           ) : breach === "safe" ? (
             <>
@@ -203,7 +203,7 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
                 size={12}
                 color={isDark ? "#a3a3a3" : "#737373"}
               />
-              <Text className="text-xs text-muted-foreground">
+              <Text className="text-xs text-muted-foreground dark:text-neutral-400">
                 Couldn&apos;t check breaches (offline)
               </Text>
             </>
@@ -213,14 +213,14 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
         <View className="flex-row gap-2">
           <Pressable
             onPress={handleGenerate}
-            className="active:scale-98 flex-1 rounded-lg bg-primary px-4 py-3"
+            className="active:scale-98 flex-1 rounded-lg bg-primary dark:bg-white px-4 py-3"
             accessibilityRole="button"
             accessibilityLabel="Generate password"
             testID="generator-generate"
           >
             <View className="flex-row items-center justify-center">
               <Ionicons name="refresh" size={18} color={isDark ? "black" : "white"} />
-              <Text className="ml-2 font-semibold text-primary-foreground">Generate</Text>
+              <Text className="ml-2 font-semibold text-primary-foreground dark:text-black">Generate</Text>
             </View>
           </Pressable>
 
@@ -228,14 +228,14 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
             <Pressable
               onPress={handleCopy}
               disabled={!password}
-              className="active:scale-98 rounded-lg bg-secondary px-4 py-3"
+              className="active:scale-98 rounded-lg bg-secondary dark:bg-neutral-800 px-4 py-3"
               accessibilityRole="button"
               accessibilityLabel="Copy password"
               accessibilityState={{ disabled: !password }}
             >
               <View className="flex-row items-center justify-center">
                 <Ionicons name="copy-outline" size={18} color={isDark ? "white" : "black"} />
-                <Text className="ml-2 font-semibold text-foreground">Copy</Text>
+                <Text className="ml-2 font-semibold text-foreground dark:text-white">Copy</Text>
               </View>
             </Pressable>
           )}
@@ -244,27 +244,27 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
             <Pressable
               onPress={() => onSelect(password)}
               disabled={!password}
-              className="active:scale-98 rounded-lg bg-secondary px-4 py-3"
+              className="active:scale-98 rounded-lg bg-secondary dark:bg-neutral-800 px-4 py-3"
               accessibilityRole="button"
               accessibilityLabel="Use password"
               accessibilityState={{ disabled: !password }}
             >
               <View className="flex-row items-center justify-center">
                 <Ionicons name="checkmark" size={18} color={isDark ? "white" : "black"} />
-                <Text className="ml-2 font-semibold text-foreground">Use</Text>
+                <Text className="ml-2 font-semibold text-foreground dark:text-white">Use</Text>
               </View>
             </Pressable>
           )}
         </View>
       </View>
 
-      <View className="rounded-lg border border-border bg-card p-4 dark:bg-neutral-900/50">
-        <Text className="mb-4 text-base font-semibold text-foreground">Options</Text>
+      <View className="rounded-lg border border-border dark:border-neutral-800 bg-card p-4 dark:bg-neutral-900/50">
+        <Text className="mb-4 text-base font-semibold text-foreground dark:text-white">Options</Text>
 
         <View className="mb-5">
           <View className="mb-2 flex-row items-center justify-between">
-            <Text className="text-sm text-foreground">Password Length</Text>
-            <Text className="font-mono text-sm font-semibold text-primary">{length}</Text>
+            <Text className="text-sm text-foreground dark:text-white">Password Length</Text>
+            <Text className="font-mono text-sm font-semibold text-primary dark:text-white">{length}</Text>
           </View>
           <Slider
             value={length}
@@ -280,8 +280,8 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
             accessibilityRole="adjustable"
           />
           <View className="mt-1 flex-row justify-between">
-            <Text className="text-xs text-muted-foreground">8</Text>
-            <Text className="text-xs text-muted-foreground">128</Text>
+            <Text className="text-xs text-muted-foreground dark:text-neutral-400">8</Text>
+            <Text className="text-xs text-muted-foreground dark:text-neutral-400">128</Text>
           </View>
         </View>
 

package/src/components/pin-pad.tsx

@@ -107,9 +107,9 @@ export function PinPad({
             className={
               i < pin.length
                 ? error
-                  ? "h-3.5 w-3.5 rounded-full bg-destructive"
-                  : "h-3.5 w-3.5 rounded-full bg-primary"
-                : "h-3.5 w-3.5 rounded-full border-2 border-border"
+                  ? "h-3.5 w-3.5 rounded-full bg-destructive dark:bg-red-900"
+                  : "h-3.5 w-3.5 rounded-full bg-primary dark:bg-white"
+                : "h-3.5 w-3.5 rounded-full border-2 border-border dark:border-neutral-800"
             }
           />
         ))}
@@ -144,11 +144,13 @@ function Key({
   return (
     <Pressable
       onPress={onPress}
-      className="h-20 w-20 items-center justify-center rounded-full active:bg-secondary"
+      className="h-20 w-20 items-center justify-center rounded-full active:bg-secondary dark:active:bg-neutral-800"
       accessibilityRole="button"
       accessibilityLabel={label ?? "key"}
     >
-      {icon ?? <Text className="font-sans-medium text-2xl text-foreground">{label}</Text>}
+      {icon ?? (
+        <Text className="font-sans-medium text-2xl text-foreground dark:text-white">{label}</Text>
+      )}
     </Pressable>
   );
 }

package/src/components/popover.tsx

@@ -23,7 +23,7 @@ const PopoverContent = React.forwardRef<
         align={align}
         side={side}
         className={cn(
-          "z-50 w-72 rounded-lg border border-border p-4",
+          "z-50 w-72 rounded-lg border border-border dark:border-neutral-800 p-4",
           isDark ? "bg-neutral-900" : "bg-white",
           Platform.OS === "web" && "shadow-lg",
           className

package/src/components/settings-row.tsx

@@ -72,7 +72,7 @@ export function SettingsRow({
         <Text
           className={cn(
             "text-sm font-medium",
-            destructive ? "text-destructive" : "text-foreground"
+            destructive ? "text-destructive dark:text-red-900" : "text-foreground"
           )}
         >
           {label}
@@ -113,7 +113,7 @@ export function SettingsSection({ title, destructive, children }: SettingsSectio
       <Text
         className={cn(
           "mb-2 text-xs font-semibold tracking-wider",
-          destructive ? "text-destructive" : "text-muted-foreground"
+          destructive ? "text-destructive dark:text-red-900" : "text-muted-foreground dark:text-neutral-400"
         )}
       >
         {title}

package/src/hooks/useAutoLock.ts

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { AppState as RNAppState, Platform } from "react-native";
 
 const DEFAULT_IDLE_LOCK_MS = 10 * 60 * 1000;
@@ -18,14 +18,37 @@ export interface UseAutoLockOptions {
   idleLockMs?: number;
 }
 
+export interface UseAutoLockResult {
+  /**
+   * Call on any real user interaction to reset the idle clock. Required
+   * on native: unlike web (which listens on `window` for
+   * mousemove/touchstart/scroll/keydown directly), RN has no global
+   * "any touch happened anywhere" event — a touch inside a `Pressable`,
+   * `ScrollView`, etc. never reaches `window`, because there is no
+   * `window` to reach. Without a caller wiring this up (e.g. a capture-
+   * phase `onStartShouldSetResponderCapture` at the app root, returning
+   * `false` so it never actually claims the touch), the idle timer is
+   * armed once at mount and never reset — the session locks exactly
+   * `idleLockMs` after mount/foreground REGARDLESS of how actively the
+   * app is being used. Confirmed for real: a vault mid-active-use lost
+   * its key mid-session, and every item silently failed to decrypt
+   * (`Promise.allSettled` in the caller's list-fetch treats a decrypt
+   * failure as "drop this item", not "the vault relocked"), which reads
+   * to the user as vault items simply vanishing — no error, no visible
+   * cause, on 2026-08-17.
+   */
+  notifyActivity: () => void;
+}
+
 /**
  * Auto-lock a session after a period of inactivity. Generic over the
  * lock predicate — vault wires `KeyManager.isUnlocked` / `KeyManager.lock`,
  * other apps wire their own state. Web uses an idle-timer only; native
  * additionally locks immediately when the app goes to the background.
  */
-export function useAutoLock(options: UseAutoLockOptions): void {
+export function useAutoLock(options: UseAutoLockOptions): UseAutoLockResult {
   const { isUnlocked, onLock, isEnabled, idleLockMs = DEFAULT_IDLE_LOCK_MS } = options;
+  const onActivityRef = useRef<() => void>(() => {});
 
   useEffect(() => {
     let idleTimer: ReturnType<typeof setTimeout> | null = null;
@@ -64,6 +87,7 @@ export function useAutoLock(options: UseAutoLockOptions): void {
       lastActivityAt = Date.now();
       armIdleTimer();
     };
+    onActivityRef.current = onActivity;
 
     // On web, RN Web's AppState mirrors document visibility — tab-hidden
     // becomes 'background', which would otherwise fire an immediate lock.
@@ -107,4 +131,10 @@ export function useAutoLock(options: UseAutoLockOptions): void {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  const notifyActivity = useCallback(() => {
+    onActivityRef.current();
+  }, []);
+
+  return { notifyActivity };
 }

package/src/screens/auth/AccountPickerScreen.tsx

@@ -47,7 +47,7 @@ export function AccountPickerScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"

package/src/screens/auth/AuthScreen.tsx

@@ -666,7 +666,7 @@ export function AuthScreen({
                               </>
                             )}
                           </CardContent>
-                          <CardFooter className="flex-col gap-3 border-t-0 pt-0">
+                          <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
                             {forgotSent ? (
                               <Button
                                 className="w-full"
@@ -908,7 +908,7 @@ export function AuthScreen({
                               )}
                             </CardContent>
 
-                            <CardFooter className="flex-col gap-3 border-t-0 pt-0">
+                            <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
                               <FormError message={firstError} />
 
                               <Button

package/src/screens/auth/ConsentScreen.tsx

@@ -51,7 +51,7 @@ export function ConsentScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -85,11 +85,11 @@ export function ConsentScreen({
               ))
             )}
             {error ? (
-              <Text className="text-sm text-destructive">{error}</Text>
+              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : null}
           </CardContent>
 
-          <CardFooter className="flex-col gap-3 border-t-0">
+          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
             <Button
               className="w-full"
               telemetryId="auth.consent.allow"

package/src/screens/auth/ErrorScreen.tsx

@@ -43,7 +43,7 @@ export function ErrorScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -63,7 +63,7 @@ export function ErrorScreen({
           ) : null}
 
           {onRetry || onHome ? (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               {onRetry ? (
                 <Button
                   className="w-full"

package/src/screens/auth/ExpiredLinkScreen.tsx

@@ -40,7 +40,7 @@ export function ExpiredLinkScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -54,7 +54,7 @@ export function ExpiredLinkScreen({
           </CardHeader>
 
           {onRequestNew || onHome ? (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               {onRequestNew ? (
                 <Button
                   className="w-full"

package/src/screens/auth/ForgotPasswordScreen.tsx

@@ -70,7 +70,7 @@ export function ForgotPasswordScreen() {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -119,7 +119,7 @@ export function ForgotPasswordScreen() {
                 />
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.forgot_password.submit"
@@ -145,7 +145,7 @@ export function ForgotPasswordScreen() {
               </CardFooter>
             </>
           ) : (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               <Button
                 className="w-full"
                 telemetryId="auth.forgot_password.push_2"

package/src/screens/auth/ImportDataScreen.tsx

@@ -55,7 +55,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
 
   if (renderImport) {
     return (
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <StatusBar style={isDark ? "light" : "dark"} />
         {renderImport({ onComplete: completeAndNavigate, onSkip: completeAndNavigate })}
       </SafeAreaView>
@@ -63,7 +63,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"

package/src/screens/auth/LoginScreen.tsx

@@ -269,7 +269,7 @@ export function LoginScreen({
 
   return (
     <>
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <StatusBar style={isDark ? "light" : "dark"} />
         <ScrollView
           className="flex-1"
@@ -387,7 +387,7 @@ export function LoginScreen({
                   </View>
                 </CardContent>
 
-                <CardFooter className="flex-col gap-3 border-t-0">
+                <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                   <MutedText className="text-center text-sm">
                     Don&apos;t have an account?{" "}
                     <Text

package/src/screens/auth/MfaEnrollScreen.tsx

@@ -160,7 +160,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -189,7 +189,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 <CardContent className="gap-3">{authenticatorAppPromo}</CardContent>
               ) : null}
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.mfa_enroll.start_setup"
@@ -293,7 +293,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 </View>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.mfa_enroll.verify_code"

package/src/screens/auth/PasskeyEnrollScreen.tsx

@@ -39,7 +39,7 @@ export function PasskeyEnrollScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -58,7 +58,7 @@ export function PasskeyEnrollScreen({
 
           <CardContent className="gap-2">
             {error ? (
-              <Text className="text-sm text-destructive">{error}</Text>
+              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : (
               <MutedText className="text-sm">
                 You can always add or remove passkeys later in your account
@@ -67,7 +67,7 @@ export function PasskeyEnrollScreen({
             )}
           </CardContent>
 
-          <CardFooter className="flex-col gap-3 border-t-0">
+          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
             <Button
               className="w-full"
               telemetryId="auth.passkey_enroll.enroll"

package/src/screens/auth/RegisterScreen.tsx

@@ -210,7 +210,7 @@ export function RegisterScreen({
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -381,7 +381,7 @@ export function RegisterScreen({
                   </ShakeField>
                 </CardContent>
 
-                <CardFooter className="flex-col gap-3 border-t-0">
+                <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                   <MutedText className="text-center text-sm">
                     Already have an account?{" "}
                     <Text

package/src/screens/auth/ResetPasswordScreen.tsx

@@ -219,7 +219,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -267,7 +267,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 </ShakeField>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <FormError message={firstError} />
 
                 <Button
@@ -345,7 +345,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 </ShakeField>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <FormError message={firstError} />
 
                 <Button