From 8b4bf0d94a29ea03183348ea0f3907d0d83e129e Mon Sep 17 00:00:00 2001
From: dswbx <dennis.senn@gmx.ch>
Date: Wed, 3 Sep 2025 08:28:27 +0200
Subject: [PATCH] style: fix mobile zoom on input focus/blur

---
 app/src/ui/layouts/AppShell/AppShell.tsx   | 13 +++++++++----
 app/src/ui/main.css                        |  4 ++++
 app/src/ui/routes/media/media.settings.tsx |  4 ++--
 app/src/ui/styles.css                      |  6 ++++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/src/ui/layouts/AppShell/AppShell.tsx b/app/src/ui/layouts/AppShell/AppShell.tsx
index b6f704a..ad89ce0 100644
--- a/app/src/ui/layouts/AppShell/AppShell.tsx
+++ b/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}>
diff --git a/app/src/ui/main.css b/app/src/ui/main.css
index 755af31..4d0f459 100644
--- a/app/src/ui/main.css
+++ b/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;
+}
diff --git a/app/src/ui/routes/media/media.settings.tsx b/app/src/ui/routes/media/media.settings.tsx
index 3a904e2..f995482 100644
--- a/app/src/ui/routes/media/media.settings.tsx
+++ b/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}>
diff --git a/app/src/ui/styles.css b/app/src/ui/styles.css
index 723e2dc..3b7b4ab 100644
--- a/app/src/ui/styles.css
+++ b/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;