apps/pwa/src/components/CredentialSheet.tsx

@@ -153,6 +153,7 @@ export function CredentialSheet({
   const heading = headingFor(mode);
   const isPending = credentialMutation.isPending;
   const saveDisabled = isPending || password.trim().length === 0 || email.trim().length === 0;
+  const phone = window.matchMedia('(max-width: 767px)').matches;
 
   return (
     <>
@@ -173,20 +174,37 @@ export function CredentialSheet({
         role="dialog"
         aria-modal="true"
         aria-label={heading}
-        style={{
+        style={
-          position: 'fixed',
+          phone
-          bottom: 0,
+            ? {
-          left: 0,
+                position: 'fixed',
-          right: 0,
+                bottom: 0,
-          background: 'var(--color-surface)',
+                left: 0,
-          borderRadius: '12px 12px 0 0',
+                right: 0,
-          boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
+                background: 'var(--color-surface)',
-          padding: 'var(--space-6, 24px)',
+                borderRadius: '12px 12px 0 0',
-          zIndex: 301,
+                boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
-          fontFamily: 'var(--font-family-base)',
+                padding: 'var(--space-6, 24px)',
-          maxWidth: '480px',
+                zIndex: 301,
-          margin: '0 auto',
+                fontFamily: 'var(--font-family-base)',
-        }}
+              }
+            : {
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                maxWidth: '480px',
+                width: 'calc(100% - var(--space-8, 32px))',
+                maxHeight: 'calc(100dvh - var(--space-8, 32px))',
+                overflowY: 'auto',
+                background: 'var(--color-surface)',
+                borderRadius: '12px',
+                boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
+                padding: 'var(--space-6, 24px)',
+                zIndex: 301,
+                fontFamily: 'var(--font-family-base)',
+              }
+        }
       >
         {/* Heading */}
         <h2