From 6fe3779fcb435da24a84671e9d45e1ede4ad8348 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Thu, 4 Dec 2025 11:23:55 +0100
Subject: [PATCH] Responsive design

---
 apps/web/src/components/DashboardLayout.tsx   | 294 ++++++++++--------
 .../components/EmailEditor/EmailEditor.tsx    |  14 +-
 apps/web/src/pages/_document.tsx              |   3 +
 apps/web/src/pages/activity/index.tsx         |   4 +-
 apps/web/src/pages/analytics/index.tsx        |  10 +-
 apps/web/src/pages/auth/login.tsx             |   2 +-
 apps/web/src/pages/campaigns/[id].tsx         |  62 ++--
 apps/web/src/pages/campaigns/create.tsx       |  20 +-
 apps/web/src/pages/campaigns/index.tsx        |  15 +-
 apps/web/src/pages/contacts/[id].tsx          |  21 +-
 apps/web/src/pages/contacts/index.tsx         | 104 +++++--
 apps/web/src/pages/index.tsx                  |  10 +-
 apps/web/src/pages/segments/index.tsx         |  15 +-
 apps/web/src/pages/templates/[id].tsx         |  37 ++-
 apps/web/src/pages/templates/create.tsx       |  29 +-
 apps/web/src/pages/templates/index.tsx        |  15 +-
 apps/web/src/pages/workflows/[id].tsx         |  44 +--
 apps/web/src/pages/workflows/index.tsx        |  21 +-
 packages/ui/src/components/atoms/Dialog.tsx   |   6 +-
 packages/ui/src/components/atoms/Select.tsx   |   3 +-
 20 files changed, 428 insertions(+), 301 deletions(-)

diff --git a/apps/web/src/components/DashboardLayout.tsx b/apps/web/src/components/DashboardLayout.tsx
index 3c002f9..94e3299 100644
--- a/apps/web/src/components/DashboardLayout.tsx
+++ b/apps/web/src/components/DashboardLayout.tsx
@@ -10,11 +10,13 @@ import {
   LayoutDashboard,
   LogOut,
   Megaphone,
+  Menu,
   Plus,
   Settings,
   User,
   Users,
   Workflow,
+  X,
 } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -65,6 +67,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
   const {activeProject, availableProjects, setActiveProject} = useActiveProject();
   const [showProjectMenu, setShowProjectMenu] = useState(false);
   const [showUserMenu, setShowUserMenu] = useState(false);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
   const projectMenuRef = useRef<HTMLDivElement>(null);
   const userMenuRef = useRef<HTMLDivElement>(null);
 
@@ -128,142 +131,185 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
     void handleLogout();
   }, [handleLogout]);
 
+  // Sidebar content (reusable for both desktop and mobile)
+  const SidebarContent = () => (
+    <>
+      {/* Logo */}
+      <div className="h-16 flex items-center gap-2 px-6 border-b border-neutral-200">
+        <Image src="/assets/logo.png" alt="Plunk" width={28} height={28} className="rounded" />
+        <h1 className="text-xl font-bold text-neutral-900">Plunk</h1>
+      </div>
+
+      {/* Project Switcher */}
+      <div className="p-4 border-b border-neutral-200">
+        <div className="relative" ref={projectMenuRef}>
+          <button
+            onClick={handleToggleProjectMenu}
+            className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors"
+          >
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
+                {activeProject?.name.charAt(0).toUpperCase() || 'P'}
+              </div>
+              <span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
+            </div>
+            <ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
+          </button>
+
+          {/* Project Dropdown */}
+          {showProjectMenu && (
+            <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
+              {availableProjects.map(project => (
+                <button
+                  key={project.id}
+                  onClick={() => {
+                    setActiveProject(project);
+                    setShowProjectMenu(false);
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
+                >
+                  <div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
+                    {project.name.charAt(0).toUpperCase()}
+                  </div>
+                  <span className="text-neutral-900">{project.name}</span>
+                  {activeProject?.id === project.id && (
+                    <div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
+                  )}
+                </button>
+              ))}
+              <div className="border-t border-neutral-200 my-1" />
+              <Link
+                href="/projects/create"
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
+              >
+                <Plus className="h-4 w-4" />
+                <span>Create project</span>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 px-3 py-4 overflow-y-auto">
+        {navigation.map((section, sectionIndex) => (
+          <div key={sectionIndex} className={sectionIndex > 0 ? 'mt-6' : ''}>
+            {section.title && (
+              <p className="px-3 mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider">
+                {section.title}
+              </p>
+            )}
+            <div className="space-y-1">
+              {section.items.map(item => {
+                const isActive = router.pathname === item.href;
+                const Icon = item.icon;
+                return (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    onClick={() => setShowMobileMenu(false)}
+                    className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700  ${
+                      isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
+                    }`}
+                  >
+                    <Icon className="h-5 w-5" />
+                    {item.name}
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      {/* Settings & User Menu */}
+      <div className="border-t border-neutral-200 p-3 space-y-1">
+        <Link
+          href="/settings"
+          onClick={() => setShowMobileMenu(false)}
+          className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700  ${
+            router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
+          }`}
+        >
+          <Settings className="h-5 w-5" />
+          Settings
+        </Link>
+
+        <div className="relative" ref={userMenuRef}>
+          <button
+            onClick={handleToggleUserMenu}
+            className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
+          >
+            <User className="h-5 w-5" />
+            <span className="flex-1 text-left truncate">{user?.email}</span>
+            <ChevronDown className="h-4 w-4 text-neutral-500" />
+          </button>
+
+          {/* User Dropdown */}
+          {showUserMenu && (
+            <div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
+              <button
+                onClick={handleLogoutClick}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
+              >
+                <LogOut className="h-4 w-4" />
+                <span>Log out</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+
   return (
     <div className="flex h-screen bg-neutral-50">
-      {/* Sidebar */}
-      <div className="w-64 bg-white border-r border-neutral-200 flex flex-col">
-        {/* Logo */}
-        <div className="h-16 flex items-center gap-2 px-6 border-b border-neutral-200">
-          <Image src="/assets/logo.png" alt="Plunk" width={28} height={28} className="rounded" />
-          <h1 className="text-xl font-bold text-neutral-900">Plunk</h1>
+      {/* Desktop Sidebar - Hidden on mobile */}
+      <div className="hidden lg:flex w-64 bg-white border-r border-neutral-200 flex-col">
+        <SidebarContent />
+      </div>
+
+      {/* Mobile Sidebar Overlay */}
+      {showMobileMenu && (
+        <div
+          className="fixed inset-0 z-40 lg:hidden"
+          onClick={() => setShowMobileMenu(false)}
+        >
+          <div className="absolute inset-0 bg-black/50" />
         </div>
+      )}
 
-        {/* Project Switcher */}
-        <div className="p-4 border-b border-neutral-200">
-          <div className="relative" ref={projectMenuRef}>
-            <button
-              onClick={handleToggleProjectMenu}
-              className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors"
-            >
-              <div className="flex items-center gap-2 flex-1 min-w-0">
-                <div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
-                  {activeProject?.name.charAt(0).toUpperCase() || 'P'}
-                </div>
-                <span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
-              </div>
-              <ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
-            </button>
-
-            {/* Project Dropdown */}
-            {showProjectMenu && (
-              <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
-                {availableProjects.map(project => (
-                  <button
-                    key={project.id}
-                    onClick={() => {
-                      setActiveProject(project);
-                      setShowProjectMenu(false);
-                    }}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
-                  >
-                    <div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
-                      {project.name.charAt(0).toUpperCase()}
-                    </div>
-                    <span className="text-neutral-900">{project.name}</span>
-                    {activeProject?.id === project.id && (
-                      <div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
-                    )}
-                  </button>
-                ))}
-                <div className="border-t border-neutral-200 my-1" />
-                <Link
-                  href="/projects/create"
-                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
-                >
-                  <Plus className="h-4 w-4" />
-                  <span>Create project</span>
-                </Link>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Navigation */}
-        <nav className="flex-1 px-3 py-4 overflow-y-auto">
-          {navigation.map((section, sectionIndex) => (
-            <div key={sectionIndex} className={sectionIndex > 0 ? 'mt-6' : ''}>
-              {section.title && (
-                <p className="px-3 mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider">
-                  {section.title}
-                </p>
-              )}
-              <div className="space-y-1">
-                {section.items.map(item => {
-                  const isActive = router.pathname === item.href;
-                  const Icon = item.icon;
-                  return (
-                    <Link
-                      key={item.name}
-                      href={item.href}
-                      className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700  ${
-                        isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
-                      }`}
-                    >
-                      <Icon className="h-5 w-5" />
-                      {item.name}
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </nav>
-
-        {/* Settings & User Menu */}
-        <div className="border-t border-neutral-200 p-3 space-y-1">
-          <Link
-            href="/settings"
-            className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700  ${
-              router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
-            }`}
-          >
-            <Settings className="h-5 w-5" />
-            Settings
-          </Link>
-
-          <div className="relative" ref={userMenuRef}>
-            <button
-              onClick={handleToggleUserMenu}
-              className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
-            >
-              <User className="h-5 w-5" />
-              <span className="flex-1 text-left truncate">{user?.email}</span>
-              <ChevronDown className="h-4 w-4 text-neutral-500" />
-            </button>
-
-            {/* User Dropdown */}
-            {showUserMenu && (
-              <div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
-                <button
-                  onClick={handleLogoutClick}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
-                >
-                  <LogOut className="h-4 w-4" />
-                  <span>Log out</span>
-                </button>
-              </div>
-            )}
-          </div>
+      {/* Mobile Sidebar */}
+      <div
+        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white transform transition-transform duration-300 ease-in-out lg:hidden ${
+          showMobileMenu ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex flex-col h-full">
+          <SidebarContent />
         </div>
       </div>
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Header */}
+        {/* Mobile Header - Only visible on mobile */}
+        <div className="lg:hidden h-16 bg-white border-b border-neutral-200 flex items-center px-4">
+          <button
+            onClick={() => setShowMobileMenu(true)}
+            className="p-2 rounded-lg hover:bg-neutral-100 transition-colors"
+            aria-label="Open menu"
+          >
+            <Menu className="h-6 w-6 text-neutral-900" />
+          </button>
+          <div className="flex items-center gap-2 ml-4">
+            <Image src="/assets/logo.png" alt="Plunk" width={24} height={24} className="rounded" />
+            <h1 className="text-lg font-bold text-neutral-900">Plunk</h1>
+          </div>
+        </div>
 
         {/* Page Content */}
         <main className="flex-1 overflow-y-auto">
-          <div className="max-w-7xl mx-auto p-8">{children}</div>
+          <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">{children}</div>
         </main>
       </div>
     </div>
diff --git a/apps/web/src/components/EmailEditor/EmailEditor.tsx b/apps/web/src/components/EmailEditor/EmailEditor.tsx
index 72396d1..1fc4d7a 100644
--- a/apps/web/src/components/EmailEditor/EmailEditor.tsx
+++ b/apps/web/src/components/EmailEditor/EmailEditor.tsx
@@ -396,7 +396,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
   return (
     <div className="border border-neutral-200 rounded-lg bg-white">
       {/* Mode toggle */}
-      <div className="border-b border-neutral-200 bg-neutral-50 p-2 flex justify-between items-center">
+      <div className="border-b border-neutral-200 bg-neutral-50 p-2 flex flex-col sm:flex-row justify-between sm:items-center gap-2">
         <div className="flex gap-1">
           <Button
             type="button"
@@ -404,8 +404,8 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
             size="sm"
             onClick={() => mode === 'html' && handleModeToggle()}
           >
-            <Eye className="h-4 w-4 mr-2" />
-            Visual
+            <Eye className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">Visual</span>
           </Button>
           <Button
             type="button"
@@ -413,11 +413,11 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
             size="sm"
             onClick={() => mode === 'visual' && handleModeToggle()}
           >
-            <Code2 className="h-4 w-4 mr-2" />
-            HTML
+            <Code2 className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">HTML</span>
           </Button>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-1 sm:flex-none">
           <Label htmlFor="preview-contact" className="text-xs text-neutral-600 whitespace-nowrap">
             Preview as:
           </Label>
@@ -425,7 +425,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
             value={selectedContactId || 'none'}
             onValueChange={val => setSelectedContactId(val === 'none' ? '' : val)}
           >
-            <SelectTrigger id="preview-contact" className="h-8 w-[200px] text-xs">
+            <SelectTrigger id="preview-contact" className="h-8 w-full sm:w-[200px] text-xs">
               <SelectValue placeholder="Select contact..." />
             </SelectTrigger>
             <SelectContent>
diff --git a/apps/web/src/pages/_document.tsx b/apps/web/src/pages/_document.tsx
index be2ec70..c441687 100644
--- a/apps/web/src/pages/_document.tsx
+++ b/apps/web/src/pages/_document.tsx
@@ -4,6 +4,9 @@ function Document({locale}: {locale: string}) {
   return (
     <Html lang={locale}>
       <Head>
+        {/* Viewport */}
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+
         {/* Primary Meta Tags */}
         <meta name="title" content="Plunk | Email Platform Dashboard" />
         <meta
diff --git a/apps/web/src/pages/activity/index.tsx b/apps/web/src/pages/activity/index.tsx
index 30d5961..3af4ae2 100644
--- a/apps/web/src/pages/activity/index.tsx
+++ b/apps/web/src/pages/activity/index.tsx
@@ -78,8 +78,8 @@ export default function ActivityPage() {
         <div className="space-y-6">
         {/* Header */}
         <div>
-          <h1 className="text-3xl font-bold text-neutral-900">Activity</h1>
-          <p className="text-neutral-500 mt-2">
+          <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Activity</h1>
+          <p className="text-neutral-500 mt-2 text-sm sm:text-base">
             Real-time overview of events, emails, and workflow executions across your project.
           </p>
         </div>
diff --git a/apps/web/src/pages/analytics/index.tsx b/apps/web/src/pages/analytics/index.tsx
index bb7f16b..39423a1 100644
--- a/apps/web/src/pages/analytics/index.tsx
+++ b/apps/web/src/pages/analytics/index.tsx
@@ -211,16 +211,16 @@ export default function AnalyticsPage() {
       <DashboardLayout>
         <div className="space-y-6">
           {/* Header */}
-          <div className="flex items-start justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-neutral-900">Analytics</h1>
-              <p className="text-neutral-500 mt-2">
+          <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Analytics</h1>
+              <p className="text-neutral-500 mt-2 text-sm sm:text-base">
                 Comprehensive insights into your email performance, engagement metrics, and delivery statistics.
               </p>
             </div>
             <div className="flex gap-3">
               <Select value={dateRange} onValueChange={setDateRange}>
-                <SelectTrigger className="w-[180px]">
+                <SelectTrigger className="w-full sm:w-[180px]">
                   <SelectValue placeholder="Select period" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/apps/web/src/pages/auth/login.tsx b/apps/web/src/pages/auth/login.tsx
index edece06..4d5c9c8 100644
--- a/apps/web/src/pages/auth/login.tsx
+++ b/apps/web/src/pages/auth/login.tsx
@@ -294,7 +294,7 @@ export default function Login() {
           }
         }}
       >
-        <DialogContent className="max-w-md">
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Reset your password</DialogTitle>
             <DialogDescription>Enter your email to receive a password reset link.</DialogDescription>
diff --git a/apps/web/src/pages/campaigns/[id].tsx b/apps/web/src/pages/campaigns/[id].tsx
index 585157b..d7f6252 100644
--- a/apps/web/src/pages/campaigns/[id].tsx
+++ b/apps/web/src/pages/campaigns/[id].tsx
@@ -331,39 +331,42 @@ export default function CampaignDetailsPage() {
       <DashboardLayout>
         <form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
           {/* 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="/campaigns">
                 <Button type="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">{c.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">{c.name}</h1>
                   <Badge variant="secondary">Draft</Badge>
                 </div>
-                <p className="text-neutral-500 mt-1">Make changes to your campaign before sending</p>
+                <p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your campaign before sending</p>
               </div>
             </div>
-            <div className="flex items-center gap-3">
-              {!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>}
-              {hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>}
+            <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+              <div className="flex-1">
+                {!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>}
+                {hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>}
+              </div>
               <div className="flex gap-2">
-                <Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}>
+                <Button type="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 type="submit" disabled={!hasChanges || isSubmitting} variant="outline">
+                <Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline" className="flex-1 sm:flex-none">
                   <Save className="h-4 w-4" />
-                  {isSubmitting ? 'Saving...' : 'Save'}
+                  <span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save'}</span>
+                  <span className="sm:hidden">Save</span>
                 </Button>
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
-                    <Button type="button">
+                    <Button type="button" className="flex-1 sm:flex-none">
                       <Send className="h-4 w-4" />
-                      Send
-                      <ChevronDown className="h-4 w-4 ml-1" />
+                      <span className="hidden sm:inline">Send</span>
+                      <ChevronDown className="h-4 w-4 sm:ml-1" />
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
@@ -553,7 +556,7 @@ export default function CampaignDetailsPage() {
 
           {/* Test Email Dialog */}
           <Dialog open={isTestEmailDialogOpen} onOpenChange={setIsTestEmailDialogOpen}>
-            <DialogContent className="max-w-lg">
+            <DialogContent className="sm:max-w-lg">
               <DialogHeader>
                 <DialogTitle>Send Test Email</DialogTitle>
                 <DialogDescription>
@@ -604,7 +607,7 @@ export default function CampaignDetailsPage() {
 
           {/* Schedule Dialog */}
           <Dialog open={isScheduleDialogOpen} onOpenChange={setIsScheduleDialogOpen}>
-            <DialogContent className="max-w-lg">
+            <DialogContent className="sm:max-w-lg">
               <DialogHeader>
                 <DialogTitle>Schedule Campaign</DialogTitle>
                 <DialogDescription>
@@ -742,28 +745,31 @@ export default function CampaignDetailsPage() {
     <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="/campaigns">
               <Button variant="ghost" size="sm">
                 <ArrowLeft className="h-4 w-4" />
               </Button>
             </Link>
-            <div>
-              <div className="flex items-center gap-3 mb-2">
-                <h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 sm:gap-3 mb-2">
+                <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
                 {getStatusBadge(c.status)}
               </div>
-              {c.description && <p className="text-neutral-500">{c.description}</p>}
+              {c.description && <p className="text-neutral-500 text-sm sm:text-base">{c.description}</p>}
             </div>
           </div>
 
           {/* Actions */}
           {(c.status === CampaignStatus.SCHEDULED || c.status === CampaignStatus.SENDING) && (
-            <Button variant="destructive" onClick={() => setShowCancelDialog(true)}>
-              <XCircle className="h-4 w-4" />
-              Cancel Campaign
-            </Button>
+            <div className="flex justify-end">
+              <Button variant="destructive" onClick={() => setShowCancelDialog(true)} className="w-full sm:w-auto">
+                <XCircle className="h-4 w-4" />
+                <span className="hidden sm:inline">Cancel Campaign</span>
+                <span className="sm:hidden">Cancel</span>
+              </Button>
+            </div>
           )}
         </div>
 
diff --git a/apps/web/src/pages/campaigns/create.tsx b/apps/web/src/pages/campaigns/create.tsx
index 16bcf60..94f3b27 100644
--- a/apps/web/src/pages/campaigns/create.tsx
+++ b/apps/web/src/pages/campaigns/create.tsx
@@ -96,17 +96,15 @@ export default function CreateCampaignPage() {
     <DashboardLayout>
       <div className="space-y-6">
         {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Link href="/campaigns">
-              <Button variant="ghost" size="icon">
-                <ArrowLeft className="h-4 w-4" />
-              </Button>
-            </Link>
-            <div>
-              <h1 className="text-3xl font-bold text-neutral-900">Create Campaign</h1>
-              <p className="text-neutral-500 mt-1">Create a new email campaign to send to your contacts</p>
-            </div>
+        <div className="flex items-center gap-3 sm:gap-4">
+          <Link href="/campaigns">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          </Link>
+          <div className="flex-1 min-w-0">
+            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
+            <p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a new email campaign to send to your contacts</p>
           </div>
         </div>
 
diff --git a/apps/web/src/pages/campaigns/index.tsx b/apps/web/src/pages/campaigns/index.tsx
index 4713274..c39bd3a 100644
--- a/apps/web/src/pages/campaigns/index.tsx
+++ b/apps/web/src/pages/campaigns/index.tsx
@@ -109,17 +109,18 @@ export default function CampaignsPage() {
       <DashboardLayout>
         <div className="space-y-6">
           {/* Header */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-neutral-900">Campaigns</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">Campaigns</h1>
+              <p className="text-neutral-500 mt-2 text-sm sm:text-base">
                 Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
               </p>
             </div>
-            <Link href="/campaigns/create">
-              <Button>
+            <Link href="/campaigns/create" className="w-full sm:w-auto">
+              <Button className="w-full sm:w-auto">
                 <Plus className="h-4 w-4" />
-                Create Campaign
+                <span className="hidden sm:inline">Create Campaign</span>
+                <span className="sm:hidden">Create</span>
               </Button>
             </Link>
           </div>
diff --git a/apps/web/src/pages/contacts/[id].tsx b/apps/web/src/pages/contacts/[id].tsx
index d8a5254..b3ae5b5 100644
--- a/apps/web/src/pages/contacts/[id].tsx
+++ b/apps/web/src/pages/contacts/[id].tsx
@@ -129,18 +129,18 @@ export default function ContactDetailPage() {
     <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="/contacts">
               <Button variant="outline" size="sm">
                 <ArrowLeft className="h-4 w-4" />
               </Button>
             </Link>
-            <div>
-              <h1 className="text-3xl font-bold text-neutral-900">{contact.email}</h1>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1>
               <p className="text-neutral-500 mt-1">
                 <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 ${
                     contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                   }`}
                 >
@@ -149,10 +149,13 @@ export default function ContactDetailPage() {
               </p>
             </div>
           </div>
-          <Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
-            <Trash2 className="h-4 w-4" />
-            Delete Contact
-          </Button>
+          <div className="flex justify-end">
+            <Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="w-full sm:w-auto">
+              <Trash2 className="h-4 w-4" />
+              <span className="hidden sm:inline">Delete Contact</span>
+              <span className="sm:hidden">Delete</span>
+            </Button>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
diff --git a/apps/web/src/pages/contacts/index.tsx b/apps/web/src/pages/contacts/index.tsx
index d0c19f2..95bdbe5 100644
--- a/apps/web/src/pages/contacts/index.tsx
+++ b/apps/web/src/pages/contacts/index.tsx
@@ -133,23 +133,27 @@ export default function ContactsPage() {
       <DashboardLayout>
         <div className="space-y-6">
           {/* Header */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-neutral-900">Contacts</h1>
-              <p className="text-neutral-500 mt-2">
-                Manage your email subscribers and their data.{' '}
-                {totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
-              </p>
-            </div>
-            <div className="flex gap-2">
-              <Button variant="outline" onClick={() => setShowImportDialog(true)}>
-                <Upload className="h-4 w-4" />
-                Import CSV
-              </Button>
-              <Button onClick={() => setShowCreateDialog(true)}>
-                <Plus className="h-4 w-4" />
-                Add Contact
-              </Button>
+          <div className="space-y-4">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <div>
+                <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Contacts</h1>
+                <p className="text-neutral-500 mt-2 text-sm sm:text-base">
+                  Manage your email subscribers and their data.{' '}
+                  {totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setShowImportDialog(true)} className="flex-1 sm:flex-none">
+                  <Upload className="h-4 w-4" />
+                  <span className="hidden sm:inline">Import CSV</span>
+                  <span className="sm:hidden">Import</span>
+                </Button>
+                <Button onClick={() => setShowCreateDialog(true)} className="flex-1 sm:flex-none">
+                  <Plus className="h-4 w-4" />
+                  <span className="hidden sm:inline">Add Contact</span>
+                  <span className="sm:hidden">Add</span>
+                </Button>
+              </div>
             </div>
           </div>
 
@@ -233,7 +237,8 @@ export default function ContactsPage() {
                 </div>
               ) : (
                 <>
-                  <div className="overflow-x-auto">
+                  {/* Desktop Table View - Hidden on mobile */}
+                  <div className="hidden md:block overflow-x-auto">
                     <table className="w-full">
                       <thead className="bg-neutral-50 border-b border-neutral-200">
                         <tr>
@@ -294,10 +299,53 @@ export default function ContactsPage() {
                     </table>
                   </div>
 
+                  {/* Mobile Card View - Only visible on mobile */}
+                  <div className="md:hidden space-y-3">
+                    {contacts.map(contact => (
+                      <div
+                        key={contact.id}
+                        className="border border-neutral-200 rounded-lg p-4 bg-white hover:bg-neutral-50 transition-colors"
+                      >
+                        <div className="flex items-start justify-between gap-3 mb-3">
+                          <div className="flex items-center gap-2 flex-1 min-w-0">
+                            {contact.subscribed ? (
+                              <MailCheck className="h-4 w-4 text-green-600 flex-shrink-0" />
+                            ) : (
+                              <MailX className="h-4 w-4 text-red-600 flex-shrink-0" />
+                            )}
+                            <span className="text-sm font-medium text-neutral-900 truncate">{contact.email}</span>
+                          </div>
+                          <span
+                            className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
+                              contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                            }`}
+                          >
+                            {contact.subscribed ? 'Subscribed' : 'Unsubscribed'}
+                          </span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs text-neutral-500">
+                            {new Date(contact.createdAt).toLocaleDateString()}
+                          </span>
+                          <div className="flex items-center gap-1">
+                            <Link href={`/contacts/${contact.id}`}>
+                              <Button variant="ghost" size="sm">
+                                <Edit className="h-4 w-4" />
+                              </Button>
+                            </Link>
+                            <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
+                              <Trash2 className="h-4 w-4 text-red-600" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
                   {/* Pagination Controls */}
                   {(currentPage > 0 || data?.hasMore) && (
-                    <div className="flex items-center justify-between mt-6 pt-6 border-t border-neutral-200">
-                      <div className="text-sm text-neutral-600">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-6 pt-6 border-t border-neutral-200">
+                      <div className="text-xs sm:text-sm text-neutral-600 text-center sm:text-left">
                         Showing <span className="font-medium text-neutral-900">{currentPage * pageSize + 1}</span> to{' '}
                         <span className="font-medium text-neutral-900">{currentPage * pageSize + contacts.length}</span>
                         {totalCount > 0 && (
@@ -307,17 +355,23 @@ export default function ContactsPage() {
                           </>
                         )}
                       </div>
-                      <div className="flex gap-2">
+                      <div className="flex gap-2 justify-center sm:justify-end">
                         <Button
                           variant="outline"
                           onClick={handlePreviousPage}
                           disabled={currentPage === 0 || isLoading}
+                          className="flex-1 sm:flex-none"
                         >
                           <ChevronLeft className="h-4 w-4" />
-                          Previous
+                          <span className="hidden sm:inline">Previous</span>
                         </Button>
-                        <Button variant="outline" onClick={handleNextPage} disabled={!data?.hasMore || isLoading}>
-                          Next
+                        <Button
+                          variant="outline"
+                          onClick={handleNextPage}
+                          disabled={!data?.hasMore || isLoading}
+                          className="flex-1 sm:flex-none"
+                        >
+                          <span className="hidden sm:inline">Next</span>
                           <ChevronRight className="h-4 w-4" />
                         </Button>
                       </div>
@@ -626,7 +680,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
   return (
     <>
       <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>Import Contacts from CSV</DialogTitle>
           </DialogHeader>
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 7f4a673..2d0c875 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -70,10 +70,10 @@ export default function Index() {
           <Alert variant="warning">
             <AlertCircle className="h-4 w-4" />
             <AlertTitle>Upgrade to remove Plunk branding</AlertTitle>
-            <AlertDescription className="flex items-center justify-between">
-              <span>Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
+            <AlertDescription className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <span className="text-sm">Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
               <Link href="/settings?tab=billing">
-                <Button size="sm">Upgrade Now</Button>
+                <Button size="sm" className="w-full sm:w-auto">Upgrade Now</Button>
               </Link>
             </AlertDescription>
           </Alert>
@@ -81,8 +81,8 @@ export default function Index() {
 
         {/* Header */}
         <div>
-          <h1 className="text-3xl font-bold text-neutral-900">Dashboard</h1>
-          <p className="text-neutral-500 mt-2">
+          <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Dashboard</h1>
+          <p className="text-neutral-500 mt-2 text-sm sm:text-base">
             Welcome back to {activeProject?.name || 'Plunk'}. Here&apos;s what&apos;s happening with your emails.
           </p>
         </div>
diff --git a/apps/web/src/pages/segments/index.tsx b/apps/web/src/pages/segments/index.tsx
index f4c628a..c508a80 100644
--- a/apps/web/src/pages/segments/index.tsx
+++ b/apps/web/src/pages/segments/index.tsx
@@ -73,17 +73,18 @@ export default function SegmentsPage() {
       <DashboardLayout>
         <div className="space-y-6">
         {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold text-neutral-900">Segments</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">Segments</h1>
+            <p className="text-neutral-500 mt-2 text-sm sm:text-base">
               Create dynamic audience groups based on contact attributes and behaviors
             </p>
           </div>
-          <Link href="/segments/new">
-            <Button>
+          <Link href="/segments/new" className="w-full sm:w-auto">
+            <Button className="w-full sm:w-auto">
               <Plus className="h-4 w-4" />
-              Create Segment
+              <span className="hidden sm:inline">Create Segment</span>
+              <span className="sm:hidden">Create</span>
             </Button>
           </Link>
         </div>
diff --git a/apps/web/src/pages/templates/[id].tsx b/apps/web/src/pages/templates/[id].tsx
index 8ca9079..e86d787 100644
--- a/apps/web/src/pages/templates/[id].tsx
+++ b/apps/web/src/pages/templates/[id].tsx
@@ -147,29 +147,34 @@ export default function TemplateEditorPage() {
     <DashboardLayout>
       <form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
         {/* 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="/templates">
               <Button type="button" variant="ghost" size="sm">
                 <ArrowLeft className="h-4 w-4" />
               </Button>
             </Link>
-            <div>
-              <h1 className="text-3xl font-bold text-neutral-900">Edit Template</h1>
-              <p className="text-neutral-500 mt-1">Make changes to your email template</p>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
+              <p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
             </div>
           </div>
-          <div className="flex items-center gap-3">
-            {!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>}
-            {hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>}
-            <Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}>
-              <Trash2 className="h-4 w-4" />
-              Delete
-            </Button>
-            <Button type="submit" disabled={!hasChanges || isSubmitting}>
-              <Save className="h-4 w-4" />
-              {isSubmitting ? 'Saving...' : 'Save Changes'}
-            </Button>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+            <div className="flex-1">
+              {!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>}
+              {hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
+                <Trash2 className="h-4 w-4" />
+                <span className="hidden sm:inline">Delete</span>
+              </Button>
+              <Button type="submit" disabled={!hasChanges || isSubmitting} className="flex-1 sm:flex-none">
+                <Save className="h-4 w-4" />
+                <span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save Changes'}</span>
+                <span className="sm:hidden">{isSubmitting ? 'Saving...' : 'Save'}</span>
+              </Button>
+            </div>
           </div>
         </div>
 
diff --git a/apps/web/src/pages/templates/create.tsx b/apps/web/src/pages/templates/create.tsx
index 622ca92..a5c4e45 100644
--- a/apps/web/src/pages/templates/create.tsx
+++ b/apps/web/src/pages/templates/create.tsx
@@ -77,20 +77,25 @@ export default function CreateTemplatePage() {
     <DashboardLayout>
       <div className="max-w-5xl mx-auto space-y-6">
         {/* Header */}
-        <div className="flex items-center gap-4">
-          <Link href="/templates">
-            <Button variant="ghost" size="icon">
-              <ArrowLeft className="h-4 w-4" />
+        <div className="space-y-4">
+          <div className="flex items-center gap-3 sm:gap-4">
+            <Link href="/templates">
+              <Button variant="ghost" size="sm">
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+            </Link>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Template</h1>
+              <p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a reusable email template for campaigns and workflows</p>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <Button onClick={handleSubmit} disabled={saving} className="w-full sm:w-auto">
+              <Save className="h-4 w-4" />
+              <span className="hidden sm:inline">{saving ? 'Creating...' : 'Create Template'}</span>
+              <span className="sm:hidden">{saving ? 'Creating...' : 'Create'}</span>
             </Button>
-          </Link>
-          <div className="flex-1">
-            <h1 className="text-3xl font-bold text-neutral-900">Create Template</h1>
-            <p className="text-neutral-500 mt-1">Create a reusable email template for campaigns and workflows</p>
           </div>
-          <Button onClick={handleSubmit} disabled={saving}>
-            <Save className="h-4 w-4" />
-            {saving ? 'Creating...' : 'Create Template'}
-          </Button>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-6">
diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index 7c4ca9d..b47e902 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -66,18 +66,19 @@ export default function TemplatesPage() {
       <DashboardLayout>
         <div className="space-y-6">
         {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold text-neutral-900">Email Templates</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">Email Templates</h1>
+            <p className="text-neutral-500 mt-2 text-sm sm:text-base">
               Create and manage reusable email templates for your campaigns and workflows.{' '}
               {data?.total ? `${data.total} total templates` : ''}
             </p>
           </div>
-          <Link href="/templates/create">
-            <Button>
+          <Link href="/templates/create" className="w-full sm:w-auto">
+            <Button className="w-full sm:w-auto">
               <Plus className="h-4 w-4" />
-              Create Template
+              <span className="hidden sm:inline">Create Template</span>
+              <span className="sm:hidden">Create</span>
             </Button>
           </Link>
         </div>
diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index cb4825b..1d08c37 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -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">
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index 7e7d533..373ae84 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -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>
diff --git a/packages/ui/src/components/atoms/Dialog.tsx b/packages/ui/src/components/atoms/Dialog.tsx
index e646f7d..8229bfa 100644
--- a/packages/ui/src/components/atoms/Dialog.tsx
+++ b/packages/ui/src/components/atoms/Dialog.tsx
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[90vh] overflow-y-auto mx-4 sm:mx-0',
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className="absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1 sm:p-0">
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/packages/ui/src/components/atoms/Select.tsx b/packages/ui/src/components/atoms/Select.tsx
index cca68a8..29ac1cc 100644
--- a/packages/ui/src/components/atoms/Select.tsx
+++ b/packages/ui/src/components/atoms/Select.tsx
@@ -72,6 +72,7 @@ const SelectContent = React.forwardRef<
         className,
       )}
       position={position}
+      sideOffset={4}
       {...props}
     >
       <SelectScrollUpButton />
@@ -79,7 +80,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           'p-1',
           position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-2rem)]',
         )}
       >
         {children}