vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive design

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-04 11:23:55 +01:00
parent 736672007b
commit 6fe3779fcb
20 changed files with 428 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/workflows/[id].tsx
+23 -21
View File
@@ -383,56 +383,58 @@ export default function WorkflowEditorPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/workflows">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{workflow.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1>
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
}`}
>
{workflow.enabled ? (
<>
<Power className="h-3 w-3 mr-1" />
Active
<Power className="h-3 w-3 sm:mr-1" />
<span className="hidden sm:inline">Active</span>
</>
) : (
<>
<PowerOff className="h-3 w-3 mr-1" />
Disabled
<PowerOff className="h-3 w-3 sm:mr-1" />
<span className="hidden sm:inline">Disabled</span>
</>
)}
</span>
</div>
{workflow.description && <p className="text-neutral-500 mt-1">{workflow.description}</p>}
{workflow.description && <p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p>}
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)}>
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)} className="flex-1 sm:flex-none">
<Settings className="h-4 w-4" />
Settings
<span className="hidden sm:inline">Settings</span>
</Button>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Trash2 className="h-4 w-4" />
Delete
<span className="hidden sm:inline">Delete</span>
</Button>
<Button onClick={handleToggleEnabled}>
<Button onClick={handleToggleEnabled} className="flex-1 sm:flex-none">
{workflow.enabled ? (
<>
<PowerOff className="h-4 w-4" />
Disable
<span className="hidden sm:inline">Disable</span>
<span className="sm:hidden">Off</span>
</>
) : (
<>
<Power className="h-4 w-4" />
Enable
<span className="hidden sm:inline">Enable</span>
<span className="sm:hidden">On</span>
</>
)}
</Button>
@@ -1060,7 +1062,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Add Workflow Step</DialogTitle>
</DialogHeader>
@@ -1682,7 +1684,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Edit Step</DialogTitle>
<div className="flex items-center gap-2 mt-2">
apps/web/src/pages/workflows/index.tsx
+11 -10
View File
@@ -89,17 +89,18 @@ export default function WorkflowsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Automate your email campaigns with powerful workflows.{' '}
{data?.total ? `${data.total} total workflows` : ''}
</p>
</div>
<Button onClick={() => setShowCreateDialog(true)}>
<Button onClick={() => setShowCreateDialog(true)} className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Workflow
<span className="hidden sm:inline">Create Workflow</span>
<span className="sm:hidden">Create</span>
</Button>
</div>
@@ -358,7 +359,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Create New Workflow</DialogTitle>
</DialogHeader>
@@ -438,11 +439,11 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
<DialogFooter className="flex-col sm:flex-row gap-2">
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto">
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
{isSubmitting ? 'Creating...' : 'Create Workflow'}
</Button>
</DialogFooter>