Improve mobile header and participants dropdown UX.

Add a header overflow menu on narrow screens, show the participants picker as a bottom sheet, and surface Create Expert Persona at the top of the dropdown with updated helper copy.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/Header.js

@@ -4,6 +4,56 @@ import AuthBadge from './AuthBadge';
 import ParticipantDropdown from './ParticipantDropdown';
 import DownloadMenu from './DownloadMenu';
 import DevMenu from './DevMenu';
+import HeaderMoreMenu from './HeaderMoreMenu';
+
+function HumanParticipantButton({ humanParticipant, onOpenHumanModal, className }) {
+  return (
+    <button
+      type="button"
+      className={
+        'btn-sm btn-outline ccai-human-add-btn header-actions-desktop'
+        + (className ? ` ${className}` : '')
+        + (humanParticipant ? ' ccai-human-add-btn-active' : '')
+      }
+      onClick={onOpenHumanModal}
+      title={humanParticipant
+        ? `Edit ${humanParticipant.name}'s credential summary`
+        : 'Add a human participant to the conversation'}
+    >
+      {humanParticipant ? (
+        <>
+          <UserCheck size={14} style={{ marginRight: 4 }} />
+          {humanParticipant.name}
+        </>
+      ) : (
+        <>
+          <UserPlus size={14} style={{ marginRight: 4 }} />
+          Add a Human Participant
+        </>
+      )}
+    </button>
+  );
+}
+
+function TableViewButton({ hasChat, onShowTableView, className }) {
+  return (
+    <button
+      type="button"
+      className={
+        'btn-sm btn-outline ccai-table-view-btn header-actions-desktop'
+        + (className ? ` ${className}` : '')
+      }
+      onClick={onShowTableView}
+      disabled={!hasChat}
+      title={hasChat
+        ? 'Open the conversation summary table'
+        : 'Start a chat to view the summary table'}
+    >
+      <Table2 size={14} style={{ marginRight: 4 }} />
+      Table View
+    </button>
+  );
+}
 
 /**
  * Header bar: brand on the left; on the right, auth badge, participant
@@ -97,41 +147,20 @@ export default function Header({
           autoSelectMode={autoSelectMode}
           onToggleAutoSelectMode={onToggleAutoSelectMode}
         />
-        <button
-          type="button"
-          className={
-            'btn-sm btn-outline ccai-human-add-btn'
-            + (humanParticipant ? ' ccai-human-add-btn-active' : '')
-          }
-          onClick={onOpenHumanModal}
-          title={humanParticipant
-            ? `Edit ${humanParticipant.name}'s credential summary`
-            : 'Add a human participant to the conversation'}
-        >
-          {humanParticipant ? (
-            <>
-              <UserCheck size={14} style={{ marginRight: 4 }} />
-              {humanParticipant.name}
-            </>
-          ) : (
-            <>
-              <UserPlus size={14} style={{ marginRight: 4 }} />
-              Add a Human Participant
-            </>
-          )}
-        </button>
-        <button
-          type="button"
-          className="btn-sm btn-outline ccai-table-view-btn"
-          onClick={onShowTableView}
-          disabled={!hasChat}
-          title={hasChat
-            ? 'Open the conversation summary table'
-            : 'Start a chat to view the summary table'}
-        >
-          <Table2 size={14} style={{ marginRight: 4 }} />
-          Table View
-        </button>
+        <HumanParticipantButton
+          humanParticipant={humanParticipant}
+          onOpenHumanModal={onOpenHumanModal}
+        />
+        <TableViewButton
+          hasChat={hasChat}
+          onShowTableView={onShowTableView}
+        />
+        <HeaderMoreMenu
+          humanParticipant={humanParticipant}
+          onOpenHumanModal={onOpenHumanModal}
+          hasChat={hasChat}
+          onShowTableView={onShowTableView}
+        />
         <DownloadMenu
           hasChat={hasChat}
           hasApiLog={hasApiLog}

frontend/src/components/HeaderMoreMenu.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { MoreHorizontal, UserPlus, UserCheck, Table2 } from 'lucide-react';
+
+/**
+ * Mobile header overflow for wide labeled actions (human participant,
+ * table view). Mirrors DownloadMenu's open/close pattern.
+ */
+export default function HeaderMoreMenu({
+  humanParticipant,
+  onOpenHumanModal,
+  hasChat,
+  onShowTableView,
+}) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const fire = (fn) => () => { fn?.(); setOpen(false); };
+
+  return (
+    <div className="dev-wrap header-actions-mobile" ref={wrapRef}>
+      <div className="dev-dropdown-header">
+        <button
+          type="button"
+          className="icon-btn"
+          onClick={() => setOpen(o => !o)}
+          title="More actions"
+          aria-label="More actions"
+          aria-expanded={open}
+        >
+          <MoreHorizontal size={16} />
+        </button>
+        {open && (
+          <div className="dev-panel">
+            <button
+              type="button"
+              className={
+                'dev-panel-row'
+                + (humanParticipant ? ' ccai-human-add-btn-active' : '')
+              }
+              onClick={fire(onOpenHumanModal)}
+              title={humanParticipant
+                ? `Edit ${humanParticipant.name}'s credential summary`
+                : 'Add a human participant to the conversation'}
+            >
+              {humanParticipant ? (
+                <>
+                  <UserCheck size={14} className="dev-check-icon" />
+                  {humanParticipant.name}
+                </>
+              ) : (
+                <>
+                  <UserPlus size={14} className="dev-check-icon" />
+                  Add a Human Participant
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={fire(onShowTableView)}
+              title={hasChat
+                ? 'Open the conversation summary table'
+                : 'Start a chat to view the summary table'}
+            >
+              <Table2 size={14} className="dev-check-icon" />
+              Table View
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/ParticipantDropdown.js

@@ -45,6 +45,11 @@ export default function ParticipantDropdown({
   // orchestrator picks at start time, so user picks are ignored.
   const checkboxDisabledForAuto = !!autoSelectMode;
 
+  const openCreateExpertModal = () => {
+    setOpen(false);
+    onOpenExpertModal(null);
+  };
+
   return (
     <div className="ccai-dropdown-wrap" ref={ref}>
       <button
@@ -65,7 +70,14 @@ export default function ParticipantDropdown({
         <ChevronDown size={12} />
       </button>
       {open && (
-        <div className="ccai-dropdown-panel">
+        <>
+          <button
+            type="button"
+            className="ccai-dropdown-backdrop"
+            aria-label="Close participants menu"
+            onClick={() => setOpen(false)}
+          />
+          <div className="ccai-dropdown-panel">
           <div className="ccai-dropdown-section">
             <button
               type="button"
@@ -86,8 +98,9 @@ export default function ParticipantDropdown({
             <div className="ccai-dropdown-autoselect-help">
               {autoSelectMode
                 ? 'The orchestrator will pick the most relevant participants for your question when you start the chat.'
-                : 'Or pick manually from the lists below.'}
+                : 'Create or pick manually from the lists below.'}
             </div>
+            <CreateExpertPersonaButton onClick={openCreateExpertModal} />
           </div>
           <div className="ccai-dropdown-divider" />
           <div
@@ -164,20 +177,31 @@ export default function ParticipantDropdown({
                 onToggle={() => onToggleParticipant(p, 'expert')}
               />
             ))}
-            <button
-              className="ccai-dropdown-create-btn"
-              onClick={() => { setOpen(false); onOpenExpertModal(null); }}
-            >
-              <Plus size={12} />
-              Create Expert Persona...
-            </button>
+            <CreateExpertPersonaButton onClick={openCreateExpertModal} />
           </div>
-        </div>
+          </div>
+        </>
       )}
     </div>
   );
 }
 
+function CreateExpertPersonaButton({ onClick, className }) {
+  return (
+    <button
+      type="button"
+      className={
+        'ccai-dropdown-create-btn'
+        + (className ? ` ${className}` : '')
+      }
+      onClick={onClick}
+    >
+      <Plus size={12} />
+      Create Expert Persona...
+    </button>
+  );
+}
+
 function DropdownItem({ participant, checked, disabledForAdd, autoSelectActive, onToggle }) {
   return (
     <label

frontend/src/styles/ccai.css

@@ -10,6 +10,10 @@
 
 .ccai-dropdown-wrap { position: relative; }
 
+.ccai-dropdown-backdrop {
+  display: none;
+}
+
 .ccai-dropdown-trigger {
   display: inline-flex;
   align-items: center;
@@ -1193,6 +1197,33 @@
 }
 
 @media (max-width: 600px) {
+  .ccai-dropdown-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    border: none;
+    padding: 0;
+    margin: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 59;
+    cursor: default;
+  }
+
+  .ccai-dropdown-panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: 100%;
+    max-width: none;
+    max-height: min(85vh, calc(100dvh - 64px));
+    border-radius: 16px 16px 0 0;
+    border-bottom: none;
+    padding-bottom: max(10px, env(safe-area-inset-bottom));
+    box-shadow: var(--shadow-lg);
+  }
+
   .ccai-table-card {
     max-height: 100vh;
     border-radius: 0;

frontend/src/styles/layout.css

@@ -72,6 +72,14 @@
   flex-shrink: 0;
 }
 
+.header-actions-mobile {
+  display: none;
+}
+
+.header-actions-desktop {
+  display: inline-flex;
+}
+
 .icon-btn {
   display: flex;
   align-items: center;
@@ -144,6 +152,32 @@
   }
 }
 
+/* ── Small tablet / large phone (<600px) ──────────────────────── */
+@media (max-width: 600px) {
+  .app-header {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .header-left {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .header-right {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    row-gap: 6px;
+    max-width: 100%;
+    min-width: 0;
+  }
+  .header-actions-desktop {
+    display: none !important;
+  }
+  .header-actions-mobile {
+    display: block;
+  }
+}
+
 /* ── Phone ────────────────────────────────────────────────────── */
 @media (max-width: 480px) {
   .app-header {