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

style: fix mobile zoom on input focus/blur

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -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", throttle(updateHeaderHeight, 500));
-   }
+      window.addEventListener("resize", resize);
+
+      return () => {
+         window.removeEventListener("resize", resize);
+      };
+   }, []);
 
    return (
       <div ref={scrollRef} style={{ height: `${height - offset}px` }} {...props}>

app/src/ui/main.css

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

app/src/ui/routes/media/media.settings.tsx

@@ -139,7 +139,7 @@ function Adapters() {
             <span className="font-bold">Media Adapter:</span>
             {ctx.selected === null && <span className="opacity-70"> (Choose one)</span>}
          </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) => (
                <Button
                   key={i}
@@ -165,7 +165,7 @@ function Adapters() {
          </div>
          {ctx.selected !== null && (
             <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!)}
                </Formy.Label>
                <FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>

app/src/ui/styles.css

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