move mode selector

math-tutor/frontend/src/pages/ChatPage.tsx

@@ -793,7 +793,7 @@ export default function ChatPage() {
 
   return (
     <div className="app-shell">
-      <header className="app-header">
+      <header className="app-header app-header-chat">
         {showChatsButton ? (
           <button type="button" className="btn sidebar-toggle" onClick={handleOpenSidebar}>
             {t("chats")}
@@ -806,7 +806,13 @@ export default function ChatPage() {
             <div className="brand-subtitle">{t("prototypeWorkspace")}</div>
           </div>
         </div>
-        <div className="header-meta">
+      </header>
+      {orchestratorError ? <div className="chat-archive-error">{orchestratorError}</div> : null}
+      {deepLinkError ? <div className="chat-archive-error">{deepLinkError}</div> : null}
+
+      <main className="app-main">
+        <section className="chat-column">
+          <div className="chat-mode-row">
             <OrchestratorSelect
               value={selectedOrchestrator}
               options={availableOrchestrators}
@@ -814,12 +820,6 @@ export default function ChatPage() {
               disabled={!isOrchestratorSelectable}
             />
           </div>
-      </header>
-      {orchestratorError ? <div className="chat-archive-error">{orchestratorError}</div> : null}
-      {deepLinkError ? <div className="chat-archive-error">{deepLinkError}</div> : null}
-
-      <main className="app-main">
-        <section className="chat-column">
           <ChatWindow
             messages={messages}
             draft={draft}

math-tutor/frontend/src/pages/TaskSelectionPage.tsx

@@ -92,7 +92,12 @@ export default function TaskSelectionPage() {
             <div className="brand-subtitle">{t("taskSelectionSubtitle")}</div>
           </div>
         </div>
-        <div className="header-meta">
+      </header>
+      {orchestratorError ? <div className="chat-archive-error">{orchestratorError}</div> : null}
+
+      <main className="task-select-main">
+        <div className="task-select-wrap">
+          <div className="task-mode-row">
             <OrchestratorSelect
               value={selectedOrchestrator}
               options={availableOrchestrators}
@@ -100,10 +105,6 @@ export default function TaskSelectionPage() {
               disabled={!isOrchestratorSelectable}
             />
           </div>
-      </header>
-      {orchestratorError ? <div className="chat-archive-error">{orchestratorError}</div> : null}
-
-      <main className="task-select-main">
           <section className="task-select-card">
             <div className="task-select-header">
               <h2 className="task-select-title">{t("taskSelectionTitle")}</h2>
@@ -168,6 +169,7 @@ export default function TaskSelectionPage() {
               {t("solveWithTutor")}
             </button>
           </section>
+        </div>
       </main>
     </div>
   );

math-tutor/frontend/src/styles/theme.css

@@ -29,6 +29,10 @@ body {
   margin-bottom: 24px;
 }
 
+.app-header-chat {
+  justify-content: flex-start;
+}
+
 .brand {
   display: flex;
   align-items: center;
@@ -190,6 +194,14 @@ body {
   gap: 16px;
   min-height: 0;
   max-height: 85vh;
+  position: relative;
+}
+
+.chat-mode-row {
+  position: absolute;
+  top: -52px;
+  right: 0;
+  z-index: 2;
 }
 
 .chat-window {
@@ -700,6 +712,10 @@ body {
     align-items: flex-start;
   }
 
+  .app-header-chat {
+    justify-content: flex-start;
+  }
+
   .header-meta {
     width: 100%;
   }
@@ -715,6 +731,10 @@ body {
     min-height: 360px;
   }
 
+  .chat-mode-row {
+    position: static;
+  }
+
   .composer-row {
     width: 100%;
   }
@@ -803,8 +823,20 @@ body {
   place-items: center;
 }
 
-.task-select-card {
+.task-select-wrap {
   width: min(820px, 100%);
+  position: relative;
+}
+
+.task-mode-row {
+  position: absolute;
+  top: -52px;
+  right: 0;
+  z-index: 2;
+}
+
+.task-select-card {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -874,6 +906,11 @@ body {
     grid-template-columns: 1fr;
   }
 
+  .task-mode-row {
+    position: static;
+    margin-bottom: 12px;
+  }
+
   .task-solve-btn {
     width: 100%;
   }