Attempt to fix iphone input text zoom
This commit is contained in:
@@ -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)",
|
||||||
|
|||||||
@@ -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", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user