feat: mobile-friendly responsive layout (HQ-21)

- Collapsible hamburger sidebar on mobile
- Mobile header bar with menu toggle
- Thread list as overlay on mobile, sidebar on desktop
- Responsive padding and font sizes
- Task queue header responsive adjustments

frontend/src/pages/QueuePage.tsx

@@ -65,17 +65,17 @@ export function QueuePage() {
   return (
     <div className="min-h-screen">
       {/* Page Header */}
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-30">
-        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
+      <header className="bg-white border-b border-gray-200 sticky top-0 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-xl font-bold text-gray-900">Task Queue</h1>
-            <p className="text-sm text-gray-400">Manage what Hammer is working on</p>
+            <h1 className="text-lg sm:text-xl font-bold text-gray-900">Task Queue</h1>
+            <p className="text-xs sm:text-sm text-gray-400">Manage what Hammer is working on</p>
           </div>
           <button
             onClick={() => setShowCreate(true)}
-            className="text-sm bg-amber-500 text-white px-4 py-2 rounded-lg hover:bg-amber-600 transition font-medium"
+            className="text-sm bg-amber-500 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-amber-600 transition font-medium"
           >
-            + New Task
+            + New
           </button>
         </div>
       </header>
@@ -86,7 +86,7 @@ export function QueuePage() {
         onCreate={handleCreate}
       />
 
-      <div className="max-w-4xl mx-auto px-6 py-6 space-y-6">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-4 sm:py-6 space-y-5 sm:space-y-6">
         {loading && (
           <div className="text-center text-gray-400 py-12">Loading tasks...</div>
         )}