Attempt to fix iphone input text zoom

This commit is contained in:
adilallo
2026-05-24 17:13:02 -06:00
parent e7c17b8651
commit bd536a407f
3 changed files with 6 additions and 2 deletions
+1 -1
View File
@@ -692,7 +692,7 @@ function CreateFlowLayoutContent({
}`.trim()} }`.trim()}
/> />
<main <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} {children}
</main> </main>
@@ -73,7 +73,9 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
const sizeStyles = const sizeStyles =
inputSize === "small" 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", label: "text-[12px] leading-[16px] font-medium",
container: "gap-[6px]", container: "gap-[6px]",
radius: "var(--measures-radius-200,8px)", radius: "var(--measures-radius-200,8px)",
+2
View File
@@ -44,6 +44,8 @@ describe("TextInput (size tests)", () => {
const { container } = render(<TextInput label="Test" inputSize="small" />); const { container } = render(<TextInput label="Test" inputSize="small" />);
const input = container.querySelector("input"); const input = container.querySelector("input");
expect(input).toHaveClass("h-[32px]"); 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", () => { it("forwards maxLength to the native input", () => {