diff --git a/frontend/src/components/TaskCard.tsx b/frontend/src/components/TaskCard.tsx
index dd56411..845c779 100644
--- a/frontend/src/components/TaskCard.tsx
+++ b/frontend/src/components/TaskCard.tsx
@@ -72,29 +72,30 @@ export function TaskCard({
   return (
     <div
       onClick={onClick}
-      className={`rounded-xl border p-4 transition-all cursor-pointer group ${
+      className={`rounded-xl border p-3 sm:p-4 transition-all cursor-pointer group ${
         isActive
           ? "border-amber-300 bg-gradient-to-r from-amber-50 to-orange-50 shadow-lg shadow-amber-100/50 hover:shadow-xl hover:shadow-amber-200/50"
           : "border-gray-200 bg-white shadow-sm hover:shadow-md hover:border-gray-300"
       }`}
     >
-      <div className="flex items-start justify-between gap-3">
+      {/* Top row: title + expand chevron */}
+      <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap mb-1.5">
             {isActive && (
-              <span className="relative flex h-2.5 w-2.5 mr-0.5">
+              <span className="relative flex h-2.5 w-2.5 mr-0.5 shrink-0">
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                 <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
               </span>
             )}
-            <h3 className={`font-semibold truncate ${isActive ? "text-amber-900" : "text-gray-900"}`}>
+            <h3 className={`font-semibold text-sm sm:text-base leading-snug ${isActive ? "text-amber-900" : "text-gray-900"}`} style={{ wordBreak: "break-word" }}>
               {task.title}
             </h3>
           </div>
 
-          <div className="flex items-center gap-2 mb-2 flex-wrap">
+          <div className="flex items-center gap-1.5 sm:gap-2 mb-1.5 flex-wrap">
             <span
-              className="text-xs px-1.5 py-0.5 rounded font-mono font-bold bg-amber-100 text-amber-700 cursor-pointer hover:bg-amber-200 transition"
+              className="text-[10px] sm:text-xs px-1.5 py-0.5 rounded font-mono font-bold bg-amber-100 text-amber-700 cursor-pointer hover:bg-amber-200 transition"
               title={`Click to copy: ${displayId}`}
               onClick={(e) => {
                 e.stopPropagation();
@@ -103,68 +104,69 @@ export function TaskCard({
             >
               {displayId}
             </span>
-            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${priorityColors[task.priority]}`}>
+            <span className={`text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium ${priorityColors[task.priority]}`}>
               {task.priority}
             </span>
-            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${sourceColors[task.source] || sourceColors.other}`}>
+            <span className={`text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full font-medium ${sourceColors[task.source] || sourceColors.other}`}>
               {task.source}
             </span>
-            <span className="text-xs text-gray-400">
+            <span className="text-[10px] sm:text-xs text-gray-400">
               {timeAgo(task.createdAt)}
             </span>
             {noteCount > 0 && (
-              <span className="text-xs text-gray-400 flex items-center gap-0.5">
+              <span className="text-[10px] sm:text-xs text-gray-400 flex items-center gap-0.5">
                 💬 {noteCount}
               </span>
             )}
           </div>
 
           {task.description && (
-            <p className="text-sm text-gray-500 line-clamp-1">{task.description}</p>
+            <p className="text-xs sm:text-sm text-gray-500 line-clamp-1">{task.description}</p>
           )}
         </div>
 
-        <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
-          {/* Reorder buttons for queued tasks */}
-          {task.status === "queued" && (
-            <div className="flex gap-1 mr-1">
-              <button
-                onClick={onMoveUp}
-                disabled={isFirst}
-                className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
-                title="Move up"
-              >
-                ↑
-              </button>
-              <button
-                onClick={onMoveDown}
-                disabled={isLast}
-                className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
-                title="Move down"
-              >
-                ↓
-              </button>
-            </div>
-          )}
+        {/* Expand chevron - always visible */}
+        <div className="shrink-0 mt-1 text-gray-300 group-hover:text-gray-500 transition">
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </div>
+      </div>
 
-          {/* Quick status actions - show fewer on card, full set in detail */}
-          {actions.slice(0, 2).map((action) => (
+      {/* Action buttons row - hidden on mobile, shown on sm+ */}
+      <div className="hidden sm:flex items-center gap-1 mt-2 pt-2 border-t border-gray-100" onClick={(e) => e.stopPropagation()}>
+        {/* Reorder buttons for queued tasks */}
+        {task.status === "queued" && (
+          <div className="flex gap-1 mr-1">
             <button
-              key={action.next}
-              onClick={() => onStatusChange(task.id, action.next)}
-              className="text-xs px-2.5 py-1.5 rounded-lg border border-gray-200 hover:bg-gray-50 whitespace-nowrap text-gray-600 hover:text-gray-800 transition font-medium"
+              onClick={onMoveUp}
+              disabled={isFirst}
+              className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
+              title="Move up"
             >
-              {action.label}
+              ↑
+            </button>
+            <button
+              onClick={onMoveDown}
+              disabled={isLast}
+              className="text-xs px-1.5 py-0.5 rounded-md bg-gray-100 hover:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition"
+              title="Move down"
+            >
+              ↓
             </button>
-          ))}
-
-          {/* Expand indicator */}
-          <div className="ml-1 text-gray-300 group-hover:text-gray-500 transition">
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-            </svg>
           </div>
-        </div>
+        )}
+
+        {/* Quick status actions */}
+        {actions.slice(0, 2).map((action) => (
+          <button
+            key={action.next}
+            onClick={() => onStatusChange(task.id, action.next)}
+            className="text-xs px-2.5 py-1.5 rounded-lg border border-gray-200 hover:bg-gray-50 whitespace-nowrap text-gray-600 hover:text-gray-800 transition font-medium"
+          >
+            {action.label}
+          </button>
+        ))}
       </div>
     </div>
   );
diff --git a/frontend/src/components/TaskDetailPanel.tsx b/frontend/src/components/TaskDetailPanel.tsx
index 0604b2f..bb809ae 100644
--- a/frontend/src/components/TaskDetailPanel.tsx
+++ b/frontend/src/components/TaskDetailPanel.tsx
@@ -198,13 +198,13 @@ function CopyableId({ id, taskNumber }: { id: string; taskNumber?: number }) {
   };
 
   return (
-    <div className="px-6 py-3 border-t border-gray-100 bg-gray-50 flex items-center gap-2">
+    <div className="px-4 sm:px-6 py-3 border-t border-gray-100 bg-gray-50 flex items-center gap-2">
       {displayId && (
         <>
           <span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">{displayId}</span>
           <button
             onClick={() => handleCopy(displayId, "ref")}
-            className={`text-xs px-2 py-0.5 rounded-md border transition font-medium ${
+            className={`text-xs px-2 py-0.5 rounded-md border transition font-medium shrink-0 ${
               copied === "ref"
                 ? "bg-green-50 text-green-600 border-green-200"
                 : "bg-white text-gray-500 border-gray-200 hover:bg-gray-100"
@@ -212,13 +212,13 @@ function CopyableId({ id, taskNumber }: { id: string; taskNumber?: number }) {
           >
             {copied === "ref" ? "✓" : "📋"}
           </button>
-          <span className="text-gray-300">|</span>
+          <span className="text-gray-300 hidden sm:inline">|</span>
         </>
       )}
-      <code className="text-xs text-gray-400 font-mono flex-1 truncate select-all">{id}</code>
+      <code className="text-[10px] sm:text-xs text-gray-400 font-mono flex-1 truncate select-all hidden sm:block">{id}</code>
       <button
         onClick={() => handleCopy(id, "uuid")}
-        className={`text-xs px-2.5 py-1 rounded-md border transition font-medium ${
+        className={`text-xs px-2.5 py-1 rounded-md border transition font-medium shrink-0 ${
           copied === "uuid"
             ? "bg-green-50 text-green-600 border-green-200"
             : "bg-white text-gray-500 border-gray-200 hover:bg-gray-100 hover:text-gray-700"
@@ -315,11 +315,21 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
       />
 
       {/* Panel */}
-      <div className="fixed inset-y-0 right-0 w-full max-w-lg bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
+      <div className="fixed inset-0 sm:inset-y-0 sm:left-auto sm:right-0 w-full sm:max-w-lg bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
         {/* Header */}
-        <div className={`px-6 py-4 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-gray-50 border-gray-200"}`}>
-          <div className="flex items-start justify-between gap-3">
+        <div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-gray-50 border-gray-200"}`}>
+          <div className="flex items-start justify-between gap-2 sm:gap-3">
             <div className="flex-1 min-w-0">
+              {/* Back button on mobile */}
+              <button
+                onClick={onClose}
+                className="sm:hidden flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-2 -ml-1 px-1 py-0.5 rounded transition"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+                Back
+              </button>
               <div className="flex items-center gap-2 mb-2 flex-wrap">
                 {isActive && (
                   <span className="relative flex h-3 w-3">
@@ -341,15 +351,16 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
                 <EditableText
                   value={draftTitle}
                   onChange={setDraftTitle}
-                  className="text-lg font-bold text-gray-900 leading-snug"
+                  className="text-base sm:text-lg font-bold text-gray-900 leading-snug"
                 />
               ) : (
-                <h2 className="text-lg font-bold text-gray-900 leading-snug">{task.title}</h2>
+                <h2 className="text-base sm:text-lg font-bold text-gray-900 leading-snug">{task.title}</h2>
               )}
             </div>
+            {/* Close X button - hidden on mobile (use Back instead) */}
             <button
               onClick={onClose}
-              className="p-2 -mr-2 -mt-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition"
+              className="hidden sm:block p-2 -mr-2 -mt-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition"
               title="Close"
             >
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -362,8 +373,8 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
         {/* Content */}
         <div className="flex-1 overflow-y-auto">
           {/* Priority & Source */}
-          <div className="px-6 py-4 border-b border-gray-100">
-            <div className="grid grid-cols-2 gap-4">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Priority</h3>
                 {hasToken ? (
@@ -416,7 +427,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
           </div>
 
           {/* Description */}
-          <div className="px-6 py-4 border-b border-gray-100">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
             <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Description</h3>
             {hasToken ? (
               <EditableText
@@ -434,23 +445,23 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
           </div>
 
           {/* Time Info */}
-          <div className="px-6 py-4 border-b border-gray-100">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
             <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Timeline</h3>
             <div className="space-y-2">
-              <div className="flex items-center justify-between text-sm">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
                 <span className="text-gray-500">Created</span>
-                <span className="text-gray-700 font-medium">{formatDate(task.createdAt)} <span className="text-gray-400 text-xs">({timeAgo(task.createdAt)})</span></span>
+                <span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.createdAt)} <span className="text-gray-400 text-xs">({timeAgo(task.createdAt)})</span></span>
               </div>
               {task.updatedAt !== task.createdAt && (
-                <div className="flex items-center justify-between text-sm">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
                   <span className="text-gray-500">Updated</span>
-                  <span className="text-gray-700 font-medium">{formatDate(task.updatedAt)} <span className="text-gray-400 text-xs">({timeAgo(task.updatedAt)})</span></span>
+                  <span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.updatedAt)} <span className="text-gray-400 text-xs">({timeAgo(task.updatedAt)})</span></span>
                 </div>
               )}
               {task.completedAt && (
-                <div className="flex items-center justify-between text-sm">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-0.5">
                   <span className="text-gray-500">Completed</span>
-                  <span className="text-gray-700 font-medium">{formatDate(task.completedAt)}</span>
+                  <span className="text-gray-700 font-medium text-xs sm:text-sm">{formatDate(task.completedAt)}</span>
                 </div>
               )}
               {isActive && (
@@ -463,7 +474,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
           </div>
 
           {/* Progress Notes */}
-          <div className="px-6 py-4">
+          <div className="px-4 sm:px-6 py-4">
             <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
               Progress Notes {task.progressNotes?.length > 0 && (
                 <span className="text-gray-300 ml-1">({task.progressNotes.length})</span>
@@ -508,7 +519,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
 
         {/* Save / Cancel Bar */}
         {hasToken && isDirty && (
-          <div className="px-6 py-3 border-t border-blue-200 bg-blue-50 flex items-center justify-between animate-slide-up">
+          <div className="px-4 sm:px-6 py-3 border-t border-blue-200 bg-blue-50 flex items-center justify-between animate-slide-up">
             <span className="text-sm text-blue-700 font-medium">Unsaved changes</span>
             <div className="flex gap-2">
               <button
@@ -531,7 +542,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
 
         {/* Actions Footer */}
         {hasToken && actions.length > 0 && (
-          <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
+          <div className="px-4 sm:px-6 py-4 border-t border-gray-200 bg-gray-50">
             <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Actions</h3>
             <div className="flex flex-wrap gap-2">
               {actions.map((action) => (
diff --git a/frontend/src/pages/QueuePage.tsx b/frontend/src/pages/QueuePage.tsx
index 77bc6ee..b1e01db 100644
--- a/frontend/src/pages/QueuePage.tsx
+++ b/frontend/src/pages/QueuePage.tsx
@@ -65,7 +65,7 @@ export function QueuePage() {
   return (
     <div className="min-h-screen">
       {/* Page Header */}
-      <header className="bg-white border-b border-gray-200 sticky top-0 md:top-0 z-30">
+      <header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between">
           <div>
             <h1 className="text-lg sm:text-xl font-bold text-gray-900">Task Queue</h1>