From 2bffeece66440b5b1ee4f9f6ceaf87aaabf03db3 Mon Sep 17 00:00:00 2001
From: Shannon Sands <shannon.sands.1979@gmail.com>
Date: Wed, 8 Jul 2026 13:31:20 +1000
Subject: [PATCH] Fix mobile channel setup modal

---
 web/src/pages/ChannelsPage.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/ChannelsPage.tsx b/web/src/pages/ChannelsPage.tsx
index 061468e15cab..625fd9bccf4b 100644
--- a/web/src/pages/ChannelsPage.tsx
+++ b/web/src/pages/ChannelsPage.tsx
@@ -336,7 +336,11 @@ export default function ChannelsPage() {
       {editing && (
         <div
           ref={editModalRef}
-          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 p-4"
+          className={cn(
+            "fixed inset-0 z-[100] flex min-h-dvh items-start justify-center overflow-y-auto bg-background/85 px-4",
+            "pb-[calc(1rem+env(safe-area-inset-bottom))] pt-[calc(1rem+env(safe-area-inset-top))]",
+            "sm:items-center sm:p-4",
+          )}
           onClick={(e) => e.target === e.currentTarget && setEditing(null)}
           role="dialog"
           aria-modal="true"
@@ -345,7 +349,7 @@ export default function ChannelsPage() {
           <div
             className={cn(
               themedBody,
-              "relative w-full max-w-lg border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]",
+              "relative flex max-h-[calc(100dvh-2rem)] w-full max-w-lg flex-col border border-border bg-card shadow-2xl sm:max-h-[90dvh]",
             )}
           >
             <Button
@@ -377,7 +381,7 @@ export default function ChannelsPage() {
               )}
             </header>
 
-            <div className="p-5 grid gap-4 overflow-y-auto">
+            <div className="grid gap-4 overflow-y-auto overscroll-contain p-4 sm:p-5">
               <p className="text-xs text-muted-foreground">
                 {editing.description}
               </p>
@@ -407,6 +411,7 @@ export default function ChannelsPage() {
                   <Input
                     id={`field-${field.key}`}
                     type={field.is_password ? "password" : "text"}
+                    className="text-base leading-6 sm:text-xs sm:leading-4"
                     placeholder={
                       field.is_set
                         ? field.redacted_value || "•••••• (set — leave blank to keep)"
@@ -433,12 +438,17 @@ export default function ChannelsPage() {
                 </div>
               ))}
 
-              <div className="flex justify-end gap-2 pt-1">
-                <Button ghost size="sm" onClick={() => setEditing(null)}>
+              <div className="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end">
+                <Button
+                  ghost
+                  size="sm"
+                  className="w-full sm:w-auto"
+                  onClick={() => setEditing(null)}
+                >
                   Cancel
                 </Button>
                 <Button
-                  className="uppercase"
+                  className="w-full uppercase sm:w-auto"
                   size="sm"
                   onClick={handleSave}
                   disabled={saving}