diff --git a/web/components/monitors/MonitorForm.tsx b/web/components/monitors/MonitorForm.tsx
index 3530f01..6582516 100644
--- a/web/components/monitors/MonitorForm.tsx
+++ b/web/components/monitors/MonitorForm.tsx
@@ -73,7 +73,7 @@ export function MonitorForm({
 
       <div>
         <label className={labelClass}>Type</label>
-        <div className="grid grid-cols-4 gap-2">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
           {(["http", "tcp", "icmp", "tls"] as const).map((t) => (
             <button
               key={t}
@@ -95,7 +95,7 @@ export function MonitorForm({
             <label className={labelClass}>URL</label>
             <input className={inputClass} value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/health" required />
           </div>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div>
               <label className={labelClass}>Method</label>
               <select className={inputClass} value={method} onChange={(e) => setMethod(e.target.value)}>
@@ -120,7 +120,7 @@ export function MonitorForm({
       )}
 
       {(type === "tcp" || type === "tls" || type === "icmp") && (
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div>
             <label className={labelClass}>Host</label>
             <input className={inputClass} value={host} onChange={(e) => setHost(e.target.value)} placeholder="example.com" required />
@@ -141,7 +141,7 @@ export function MonitorForm({
         </div>
       )}
 
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div>
           <label className={labelClass}>Interval (seconds)</label>
           <input type="number" className={inputClass} value={intervalSec} onChange={(e) => setIntervalSec(Number(e.target.value))} min={10} />
diff --git a/web/components/ui/Card.tsx b/web/components/ui/Card.tsx
index b08375e..af4ccc4 100644
--- a/web/components/ui/Card.tsx
+++ b/web/components/ui/Card.tsx
@@ -24,7 +24,7 @@ export function Card({ className, padding = true, children, ...props }: CardProp
 
 export function CardHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={clsx("mb-4 flex items-center justify-between", className)} {...props}>
+    <div className={clsx("mb-4 flex flex-wrap items-center justify-between gap-2", className)} {...props}>
       {children}
     </div>
   );
diff --git a/web/components/ui/Modal.tsx b/web/components/ui/Modal.tsx
index d941b15..d41a686 100644
--- a/web/components/ui/Modal.tsx
+++ b/web/components/ui/Modal.tsx
@@ -25,10 +25,10 @@ export function Modal({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
       <div
-        className={`relative z-10 w-full ${wide ? "max-w-2xl" : "max-w-md"} max-h-[90vh] overflow-auto rounded border border-border bg-surface shadow-panel`}
+        className={`relative z-10 w-full ${wide ? "sm:max-w-2xl" : "sm:max-w-md"} max-h-[85dvh] overflow-auto rounded rounded-b-none border border-b-0 border-border bg-surface shadow-panel sm:rounded sm:border-b`}
         role="dialog"
         aria-modal="true"
       >
diff --git a/web/components/workflows/StepPickerModal.tsx b/web/components/workflows/StepPickerModal.tsx
index f06f9f7..44d0157 100644
--- a/web/components/workflows/StepPickerModal.tsx
+++ b/web/components/workflows/StepPickerModal.tsx
@@ -129,7 +129,7 @@ export function StepPickerModal({
         </div>
 
         {showAdhocCards && (
-          <div className="grid grid-cols-2 gap-2.5">
+          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
             <button
               onClick={onAddAdhoc}
               className="flex min-h-[74px] items-center justify-center gap-2 rounded border border-dashed border-border text-sm text-text-secondary hover:border-signal/55 hover:text-signal"
@@ -165,7 +165,7 @@ export function StepPickerModal({
                     {g.label}
                     <span className="h-px flex-1 bg-border" />
                   </div>
-                  <div className="grid grid-cols-2 gap-2.5">
+                  <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
                     {g.steps.map((s) => (
                       <StepCard key={s.step_id} step={s} onAdd={() => onSelect(s.step_id)} />
                     ))}