fix CoS content panel overflow and wrap long log tokens

.changelog/NEXT.md

@@ -13,3 +13,7 @@ TBD
 ## Changed
 
 - **Universes table** — each row now shows a 48×48 thumbnail of the latest image from the universe's auto-managed media collection (the `Universe: <name>` bucket linked by `collection.universeId`). Rows without media fall back to a Globe placeholder; a broken file ref also degrades to the placeholder via `<img onError>`. Applies to both the desktop table and the mobile card layout.
+
+## Fixed
+
+- **Chief of Staff pane overflow** — content panel collapses to a single `flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden` div so tall tab content scrolls inside the panel instead of expanding it. Event log rows in both `EventLog` and `TerminalCoSPanel` get `break-all` so long unbreakable tokens (URLs, hashes, paths) wrap inside the 320px sidebar instead of pushing the column wider visually.

client/src/components/cos/EventLog.jsx

@@ -18,11 +18,11 @@ export default function EventLog({ logs }) {
   if (!logs || logs.length === 0) return null;
 
   return (
-    <div className="mt-4 w-full flex-1 min-h-0 flex flex-col">
+    <div className="mt-4 w-full min-w-0 flex-1 min-h-0 flex flex-col">
       <div className="text-xs text-gray-500 mb-1 font-mono">Event Log</div>
-      <div className="bg-slate-900/80 border border-slate-700/50 rounded-lg p-2 flex-1 min-h-[8rem] max-h-[32rem] overflow-y-auto">
+      <div className="bg-slate-900/80 border border-slate-700/50 rounded-lg p-2 flex-1 min-w-0 min-h-[8rem] max-h-[32rem] overflow-y-auto">
         {logs.slice(-25).reverse().map((log, i) => (
-          <div key={i} className={`text-xs font-mono py-0.5 ${levelColors[log.level] || 'text-gray-400'}`}>
+          <div key={i} className={`text-xs font-mono py-0.5 break-all ${levelColors[log.level] || 'text-gray-400'}`}>
             <span className="mr-1">[{levelIcons[log.level] || '*'}]</span>
             <span className="text-gray-500">{new Date(log.timestamp).toLocaleTimeString()}</span>
             {' '}

client/src/components/cos/TerminalCoSPanel.jsx

@@ -187,14 +187,14 @@ export default function TerminalCoSPanel({ state, speaking, statusMessage, event
       )}
 
       {/* Event logs as terminal output - desktop only */}
-      <div className="hidden lg:flex flex-1 mb-4 flex-col min-h-0">
+      <div className="hidden lg:flex flex-1 min-w-0 mb-4 flex-col min-h-0">
         <div className="text-gray-500 text-xs mb-1">// event_log</div>
-        <div className="flex-1 bg-black/30 rounded p-2 overflow-y-auto scrollbar-hide">
+        <div className="flex-1 min-w-0 bg-black/30 rounded p-2 overflow-y-auto scrollbar-hide">
           {(!eventLogs || eventLogs.length === 0) ? (
             <div className="text-gray-600 text-xs">waiting for events...</div>
           ) : (
             eventLogs.slice(-20).reverse().map((log, i) => (
-              <div key={i} className={`text-xs ${levelColors[log.level] || 'text-gray-400'} leading-relaxed`}>
+              <div key={i} className={`text-xs break-all ${levelColors[log.level] || 'text-gray-400'} leading-relaxed`}>
                 <span className="text-gray-600">{new Date(log.timestamp).toLocaleTimeString('en-US', { hour12: false })}</span>
                 {' '}
                 <span className={levelColors[log.level]}>{levelPrefixes[log.level] || '[LOG]'}</span>

client/src/pages/ChiefOfStaff.jsx

@@ -740,8 +740,7 @@ export default function ChiefOfStaff() {
       )}
 
       {/* Content Panel */}
-      <div className="flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden">
-        <div className="overflow-y-auto p-3 lg:p-4">
+      <div className="flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden p-3 lg:p-4">
         {/* Stats Bar - hidden for SVG/canvas modes (now integrated into CoS sidebar);
             ascii/terminal mode keeps it because TerminalCoSPanel doesn't host the cards. */}
         <div className={`grid grid-cols-5 gap-1.5 sm:gap-2 lg:gap-3 mb-3 sm:mb-4 lg:mb-6 ${avatarStyle !== 'ascii' ? 'hidden' : ''}`}>
@@ -905,7 +904,6 @@ export default function ChiefOfStaff() {
             <ConfigTab config={status?.config} onUpdate={fetchData} onEvaluate={handleForceEvaluate} avatarStyle={configAvatarStyle} setAvatarStyle={setAvatarStyle} evalCountdown={evalCountdown} />
           </div>
         )}
-        </div>
       </div>
     </div>
   );