fix(mobile): responsive modals + landing preview overflow
- PrepareSessionModal: bottom-sheet on mobile, centered on desktop - IntakeFormModal: bottom-sheet on mobile, responsive padding - ShareTreeModal: bottom-sheet on mobile, full-width on small screens - Landing preview: hide URL bar and window controls on mobile (<900px) to prevent 189px horizontal overflow Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -112,7 +112,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
|
|||||||
if (!isOpen) return null
|
if (!isOpen) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
<div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
|
||||||
{/* Backdrop */}
|
{/* Backdrop */}
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 bg-black/80 backdrop-blur-xs"
|
className="absolute inset-0 bg-black/80 backdrop-blur-xs"
|
||||||
@@ -120,7 +120,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Modal */}
|
{/* Modal */}
|
||||||
<div className="relative w-full max-w-lg bg-card border border-border rounded-2xl shadow-lg">
|
<div className="relative w-full max-w-full rounded-t-2xl bg-card border border-border shadow-lg sm:max-w-lg sm:rounded-2xl">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between border-b border-border px-6 py-4">
|
<div className="flex items-center justify-between border-b border-border px-6 py-4">
|
||||||
<h2 className="text-lg font-semibold text-foreground">Share Tree</h2>
|
<h2 className="text-lg font-semibold text-foreground">Share Tree</h2>
|
||||||
|
|||||||
@@ -212,8 +212,8 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
|
<div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4 bg-black/60 backdrop-blur-xs">
|
||||||
<div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-background shadow-xl">
|
<div className="w-full max-w-full rounded-t-2xl border border-border bg-background shadow-xl sm:max-w-lg sm:rounded-2xl">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="border-b border-border px-6 py-4">
|
<div className="border-b border-border px-6 py-4">
|
||||||
<h2 className="text-lg font-semibold text-foreground">Project Information</h2>
|
<h2 className="text-lg font-semibold text-foreground">Project Information</h2>
|
||||||
@@ -224,7 +224,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
|
|||||||
|
|
||||||
{/* Form */}
|
{/* Form */}
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="max-h-[60vh] space-y-4 overflow-y-auto px-6 py-4">
|
<div className="max-h-[70vh] space-y-4 overflow-y-auto px-4 py-4 sm:max-h-[60vh] sm:px-6">
|
||||||
{Array.from(groups.entries()).map(([groupName, groupFields]) => (
|
{Array.from(groups.entries()).map(([groupName, groupFields]) => (
|
||||||
<div key={groupName}>
|
<div key={groupName}>
|
||||||
{groupName && (
|
{groupName && (
|
||||||
|
|||||||
@@ -88,9 +88,9 @@ export function PrepareSessionModal({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
<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-background/60 backdrop-blur-xs" onClick={onClose} />
|
<div className="absolute inset-0 bg-background/60 backdrop-blur-xs" onClick={onClose} />
|
||||||
<div className="relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl">
|
<div className="relative w-full max-w-full rounded-t-2xl border border-border bg-card shadow-2xl sm:max-w-lg sm:rounded-2xl">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between border-b border-border px-5 py-4">
|
<div className="flex items-center justify-between border-b border-border px-5 py-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
@@ -106,7 +106,7 @@ export function PrepareSessionModal({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Body */}
|
{/* Body */}
|
||||||
<div className="max-h-[60vh] overflow-y-auto p-5 space-y-5">
|
<div className="max-h-[70vh] overflow-y-auto p-4 space-y-5 sm:max-h-[60vh] sm:p-5">
|
||||||
{/* Flow name */}
|
{/* Flow name */}
|
||||||
<div className="rounded-lg bg-accent px-3 py-2">
|
<div className="rounded-lg bg-accent px-3 py-2">
|
||||||
<p className="text-xs text-muted-foreground">Flow</p>
|
<p className="text-xs text-muted-foreground">Flow</p>
|
||||||
|
|||||||
@@ -1513,6 +1513,18 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.landing-preview-url-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-preview-window-controls {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-preview-titlebar {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.landing-tree-branch {
|
.landing-tree-branch {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user