From e664be1cfaab97c24800347e734dcfb5753427ee Mon Sep 17 00:00:00 2001
From: Takis Kakalis <80459599+Takaros999@users.noreply.github.com>
Date: Fri, 1 May 2026 12:48:27 -0700
Subject: [PATCH 1/2] Center mobile deeplink modal

---
 js/packages/react/src/styles/widgetStyles.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/packages/react/src/styles/widgetStyles.ts b/js/packages/react/src/styles/widgetStyles.ts
index df0ae3a5..45ef6d96 100644
--- a/js/packages/react/src/styles/widgetStyles.ts
+++ b/js/packages/react/src/styles/widgetStyles.ts
@@ -426,18 +426,18 @@ export const WIDGET_STYLES = `
   line-height: 1.56;
 }
 
-/* Responsive: mobile full-screen bottom-anchored */
+/* Responsive: mobile centered deeplink flow */
 @media (max-width: 1024px) {
   .idkit-backdrop {
-    align-items: flex-end;
-    padding: 0;
+    align-items: center;
+    padding: 16px;
   }
   .idkit-modal {
-    max-width: 100%;
-    min-height: auto;
+    max-width: 448px;
+    min-height: 35rem;
     max-height: 95vh;
-    border-radius: 24px 24px 0 0;
-    animation: idkit-slide-up 0.3s ease-out;
+    border-radius: 24px;
+    animation: idkit-scale-in 0.25s ease-out;
   }
 
   /* Hide desktop QR on mobile */

From 248d8ba00957110ed1b5cb38ed40dc5e219e61c2 Mon Sep 17 00:00:00 2001
From: Takis Kakalis <80459599+Takaros999@users.noreply.github.com>
Date: Fri, 1 May 2026 16:16:12 -0700
Subject: [PATCH 2/2] fix react mobile deeplink centering

---
 .../src/components/States/WorldIDState.tsx    |  1 +
 js/packages/react/src/styles/widgetStyles.ts  | 36 ++++++++++++-------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/js/packages/react/src/components/States/WorldIDState.tsx b/js/packages/react/src/components/States/WorldIDState.tsx
index c7ff871d..347fc649 100644
--- a/js/packages/react/src/components/States/WorldIDState.tsx
+++ b/js/packages/react/src/components/States/WorldIDState.tsx
@@ -20,6 +20,7 @@ export function WorldIDState({
 
   return (
     <div
+      className="idkit-worldid-state"
       style={{
         display: "flex",
         flexDirection: "column",
diff --git a/js/packages/react/src/styles/widgetStyles.ts b/js/packages/react/src/styles/widgetStyles.ts
index 45ef6d96..2d395c2d 100644
--- a/js/packages/react/src/styles/widgetStyles.ts
+++ b/js/packages/react/src/styles/widgetStyles.ts
@@ -175,6 +175,11 @@ export const WIDGET_STYLES = `
 }
 
 /* World ID State */
+.idkit-worldid-state {
+  width: 100%;
+  min-width: 0;
+}
+
 .idkit-worldid-icon {
   display: flex;
   align-items: center;
@@ -310,15 +315,18 @@ export const WIDGET_STYLES = `
 
 /* Mobile deep-link button */
 .idkit-deeplink-btn {
-  display: flex;
-  width: 100%;
+  box-sizing: border-box;
+  display: inline-flex;
+  width: auto;
+  max-width: 100%;
   align-items: center;
+  justify-content: center;
   gap: 8px;
   border-radius: 16px;
   border: 1px solid transparent;
   background: var(--idkit-btn-bg);
   color: var(--idkit-btn-text);
-  padding: 16px;
+  padding: 16px 32px;
   font-family: var(--idkit-font);
   font-size: 16px;
   font-weight: 500;
@@ -332,8 +340,8 @@ export const WIDGET_STYLES = `
   flex-shrink: 0;
 }
 .idkit-deeplink-btn span {
-  flex: 1;
-  text-align: center;
+  flex: 0 1 auto;
+  min-width: 0;
 }
 
 /* Loading spinner */
@@ -426,18 +434,18 @@ export const WIDGET_STYLES = `
   line-height: 1.56;
 }
 
-/* Responsive: mobile centered deeplink flow */
+/* Responsive: mobile full-screen bottom-anchored */
 @media (max-width: 1024px) {
   .idkit-backdrop {
-    align-items: center;
-    padding: 16px;
+    align-items: flex-end;
+    padding: 0;
   }
   .idkit-modal {
-    max-width: 448px;
-    min-height: 35rem;
+    max-width: 100%;
+    min-height: auto;
     max-height: 95vh;
-    border-radius: 24px;
-    animation: idkit-scale-in 0.25s ease-out;
+    border-radius: 24px 24px 0 0;
+    animation: idkit-slide-up 0.3s ease-out;
   }
 
   /* Hide desktop QR on mobile */
@@ -445,7 +453,9 @@ export const WIDGET_STYLES = `
     display: none;
   }
   .idkit-mobile-only {
-    display: block;
+    display: flex;
+    justify-content: center;
+    width: 100%;
   }
 }