diff --git a/src/app/components/OAuthConfirmModal.tsx b/src/app/components/OAuthConfirmModal.tsx
index cc07b2b..d7a2294 100644
--- a/src/app/components/OAuthConfirmModal.tsx
+++ b/src/app/components/OAuthConfirmModal.tsx
@@ -83,15 +83,13 @@ export function OAuthConfirmModal({
               top: '50%',
               left: '50%',
               transform: 'translate(-50%, -50%)',
-              width: 'calc(100% - 32px)',
-              maxWidth: '420px',
-              maxHeight: 'calc(100vh - 48px)',
+              width: 'min(calc(100vw - 32px), 420px)',
+              maxHeight: 'calc(100dvh - 48px)',
               overflowY: 'auto',
               background: '#FFFFFF',
               borderRadius: '16px',
               boxShadow: '0 20px 60px rgba(0, 0, 0, 0.2)',
               zIndex: 1001,
-              margin: '0 16px',
             }}
           >
             {/* Header */}
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
index 2d3d45d..ecd5d19 100644
--- a/src/styles/responsive.css
+++ b/src/styles/responsive.css
@@ -521,3 +521,45 @@
     min-width: 100px !important;
   }
 }
+
+/* ===============================================
+   MODAL MOBILE RESPONSIVE FIXES
+   =============================================== */
+
+/* Ensure all fixed position modals are properly centered on mobile */
+@media (max-width: 767px) {
+  /* Generic modal centering fix */
+  [style*="position: fixed"][style*="transform: translate(-50%, -50%)"] {
+    width: calc(100vw - 32px) !important;
+    max-width: 420px !important;
+    max-height: calc(100dvh - 48px) !important;
+    margin: 0 !important;
+  }
+
+  /* Login page on mobile - stack columns */
+  .login-page-grid {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 32px !important;
+  }
+
+  /* Ensure modal backdrop covers entire viewport including PWA status bar */
+  .modal-backdrop {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+  }
+}
+
+/* PWA specific modal fixes */
+@media (display-mode: standalone) {
+  /* Ensure modals account for PWA safe areas */
+  [style*="position: fixed"][style*="top: '50%'"] {
+    top: max(50%, env(safe-area-inset-top, 0px)) !important;
+  }
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 2f978e6..e0f228e 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -369,6 +369,159 @@
    PROSE EDITOR STYLES
    ============================================ */
 
+/* Base prose styling for document preview */
+.prose {
+  color: var(--color-text-primary);
+  max-width: 65ch;
+  line-height: 1.75;
+}
+
+.prose-lg {
+  font-size: 1.125rem;
+  line-height: 1.8;
+}
+
+.prose h1 {
+  font-size: 2.25rem;
+  font-weight: 800;
+  margin-top: 0;
+  margin-bottom: 0.8em;
+  line-height: 1.1;
+  color: var(--color-text-primary);
+}
+
+.prose h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.4;
+  color: var(--color-text-primary);
+}
+
+.prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  color: inherit;
+}
+
+.prose a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.prose strong {
+  font-weight: 600;
+  color: inherit;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+.prose ul {
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  color: inherit;
+}
+
+.prose blockquote {
+  font-style: italic;
+  border-left: 4px solid var(--color-primary);
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+  color: var(--color-text-secondary);
+}
+
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-primary-bg);
+  padding: 0.2em 0.4em;
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
+}
+
+.prose pre {
+  overflow-x: auto;
+  background: #1e293b;
+  border-radius: var(--radius-lg);
+  padding: 1rem;
+  margin-top: 1.7em;
+  margin-bottom: 1.7em;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  color: #e2e8f0;
+  font-size: 0.875em;
+}
+
+.prose img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+  border-radius: var(--radius-lg);
+  max-width: 100%;
+  height: auto;
+}
+
+.prose hr {
+  border-color: var(--color-border);
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.prose table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  border-collapse: collapse;
+}
+
+.prose th {
+  font-weight: 600;
+  padding: 0.75em 1em;
+  border-bottom: 2px solid var(--color-border);
+  color: var(--color-text-primary);
+}
+
+.prose td {
+  padding: 0.75em 1em;
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* max-w-none utility */
+.max-w-none {
+  max-width: none;
+}
+
 .ProseMirror,
 .rich-text-editor-content {
   color: var(--color-text-primary);