Merge pull request #246 from bknd-io/fix/mobile-input-zoom

style: fix mobile zoom on input focus/blur
This commit is contained in:
dswbx
2025-09-03 17:03:14 +02:00
committed by GitHub
4 changed files with 19 additions and 8 deletions

View File

@@ -397,11 +397,16 @@ export function MaxHeightContainer(props: ComponentPropsWithoutRef<"div">) {
} }
} }
useEffect(updateHeaderHeight, []); useEffect(() => {
updateHeaderHeight();
const resize = throttle(updateHeaderHeight, 500);
if (typeof window !== "undefined") { window.addEventListener("resize", resize);
window.addEventListener("resize", throttle(updateHeaderHeight, 500));
} return () => {
window.removeEventListener("resize", resize);
};
}, []);
return ( return (
<div ref={scrollRef} style={{ height: `${height - offset}px` }} {...props}> <div ref={scrollRef} style={{ height: `${height - offset}px` }} {...props}>

View File

@@ -122,3 +122,7 @@ body,
@utility debug-blue { @utility debug-blue {
@apply border-blue-500 border; @apply border-blue-500 border;
} }
@utility w-min-content {
width: min-content;
width: -webkit-min-content;
}

View File

@@ -139,7 +139,7 @@ function Adapters() {
<span className="font-bold">Media Adapter:</span> <span className="font-bold">Media Adapter:</span>
{ctx.selected === null && <span className="opacity-70"> (Choose one)</span>} {ctx.selected === null && <span className="opacity-70"> (Choose one)</span>}
</Formy.Label> </Formy.Label>
<div className="flex flex-row gap-1 mb-2"> <div className="grid grid-cols-2 md:flex flex-row gap-1 mb-2 flex-wrap">
{ctx.schemas?.map((schema: any, i) => ( {ctx.schemas?.map((schema: any, i) => (
<Button <Button
key={i} key={i}
@@ -165,7 +165,7 @@ function Adapters() {
</div> </div>
{ctx.selected !== null && ( {ctx.selected !== null && (
<Formy.Group as="fieldset" error={ctx.errors.length > 0}> <Formy.Group as="fieldset" error={ctx.errors.length > 0}>
<Formy.Label as="legend" className="font-mono px-2"> <Formy.Label as="legend" className="font-mono px-2 w-min-content">
{autoFormatString(ctx.selectedSchema!.title!)} {autoFormatString(ctx.selectedSchema!.title!)}
</Formy.Label> </Formy.Label>
<FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}> <FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>

View File

@@ -8,8 +8,10 @@ html.fixed,
html.fixed body { html.fixed body {
top: 0; top: 0;
left: 0; left: 0;
height: 100%; right: 0;
width: 100%; bottom: 0;
height: 100dvh;
width: 100dvw;
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
overscroll-behavior-x: contain; overscroll-behavior-x: contain;