From bd536a407f332d8b00cc6d4aaf2807481ddd7a5e Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sun, 24 May 2026 17:13:02 -0600
Subject: [PATCH] Attempt to fix iphone input text zoom

---
 app/(app)/create/CreateFlowLayoutClient.tsx               | 2 +-
 app/components/controls/TextInput/TextInput.container.tsx | 4 +++-
 tests/components/TextInput.test.tsx                       | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
index 627d4ac..9fb3986 100644
--- a/app/(app)/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -692,7 +692,7 @@ function CreateFlowLayoutContent({
         }`.trim()}
       />
       <main
-        className={`flex min-h-0 flex-1 w-full ${mainContentClass} ${mainResponsiveLayout}`}
+        className={`flex min-h-0 min-w-0 flex-1 w-full max-w-full overflow-x-hidden ${mainContentClass} ${mainResponsiveLayout}`}
       >
         {children}
       </main>
diff --git a/app/components/controls/TextInput/TextInput.container.tsx b/app/components/controls/TextInput/TextInput.container.tsx
index 4800c2f..1f8008b 100644
--- a/app/components/controls/TextInput/TextInput.container.tsx
+++ b/app/components/controls/TextInput/TextInput.container.tsx
@@ -73,7 +73,9 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
     const sizeStyles =
       inputSize === "small"
         ? {
-            input: "h-[32px] px-[10px] py-[6px] text-[14px]",
+            // 16px on narrow viewports prevents iOS Safari focus zoom (causes horizontal scroll).
+            input:
+              "h-[32px] px-[10px] py-[6px] text-[16px] md:text-[14px]",
             label: "text-[12px] leading-[16px] font-medium",
             container: "gap-[6px]",
             radius: "var(--measures-radius-200,8px)",
diff --git a/tests/components/TextInput.test.tsx b/tests/components/TextInput.test.tsx
index 49ff900..7f2e588 100644
--- a/tests/components/TextInput.test.tsx
+++ b/tests/components/TextInput.test.tsx
@@ -44,6 +44,8 @@ describe("TextInput (size tests)", () => {
     const { container } = render(<TextInput label="Test" inputSize="small" />);
     const input = container.querySelector("input");
     expect(input).toHaveClass("h-[32px]");
+    expect(input?.className).toContain("text-[16px]");
+    expect(input?.className).toContain("md:text-[14px]");
   });
 
   it("forwards maxLength to the native input", () => {