Fix edge-label arrow flip + mobile top-bar/captcha overflow

packages/web/src/components/CodeCaptcha.tsx

@@ -398,8 +398,8 @@ export function CodeCaptcha({
   };
 
   return (
-    <div className={className}>
-      <div className="bg-gradient-to-br from-gray-800/60 to-gray-700/50 backdrop-blur-sm border-2 border-teal-500/30 rounded-xl p-5 shadow-lg">
+    <div className={`${className ?? ''} w-full max-w-full min-w-0`}>
+      <div className="bg-gradient-to-br from-gray-800/60 to-gray-700/50 backdrop-blur-sm border-2 border-teal-500/30 rounded-xl p-3 sm:p-5 shadow-lg overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
@@ -424,7 +424,7 @@ export function CodeCaptcha({
                   // (panel-centered) sat above it.
                   <div className="relative w-full text-center py-8 flex items-center justify-center min-h-[5.5rem]">
                     <span className="absolute top-1 left-0 right-0 text-sm text-gray-400">What is:</span>
-                    <p className="text-5xl font-bold text-teal-300 tracking-wider">
+                    <p className="text-3xl sm:text-5xl font-bold text-teal-300 tracking-wider">
                       {mathProblem} = ?
                     </p>
                   </div>

packages/web/src/components/GuestModeDialog.tsx

@@ -31,7 +31,7 @@ export function GuestModeDialog({ isOpen, onClose, onConfirm }: GuestModeDialogP
       onClick={onClose}
     >
       <div 
-        className="bg-gray-800 border border-gray-700 rounded-2xl shadow-2xl max-w-lg w-full"
+        className="bg-gray-800 border border-gray-700 rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto"
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-center justify-between p-6 border-b border-gray-700">

packages/web/src/components/InteractiveGraphVisualization.tsx

@@ -3671,6 +3671,13 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected }:
           if (obstacles) {
             placedLabels.push({ x: placement.x, y: placement.y, width: labelW + 8, height: labelH + 8 });
           }
+          // edgeLabelPlacement keeps text upright by stripping 180° when the edge
+          // points "backward" — which leaves the directional label icon pointing
+          // the wrong way after a flip. Carry that lost 180° on the icon so its
+          // arrow tracks the real edge direction (and flips when the edge flips).
+          const trueAngle = (Math.atan2(target.y - source.y, target.x - source.x) * 180) / Math.PI;
+          const iconFlipped = trueAngle > 90 || trueAngle < -90;
+          d3.select(this).select('.edge-label-icon').attr('transform', iconFlipped ? 'rotate(180)' : null);
           return `translate(${placement.x},${placement.y}) rotate(${placement.rotation})`;
         });
     };

packages/web/src/pages/Workspace.tsx

@@ -221,21 +221,22 @@ export function Workspace() {
             </div>
           </div>
 
-          {/* Right Section: Status and Actions */}
-          <div className="flex flex-col lg:flex-row lg:items-center gap-3 lg:order-3">
-            {/* Neo4j Status Indicator */}
+          {/* Right Section: Status and Actions — hidden on mobile (the hamburger
+              handles nav there); these chips otherwise eat the small-screen width. */}
+          <div className="hidden md:flex flex-col lg:flex-row lg:items-center gap-3 lg:order-3">
+            {/* Graph store status (provider-agnostic — core is Neo4j-optional) */}
             <div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs transition-all cursor-help ${
-              health?.services?.neo4j?.status === 'healthy' 
-                ? 'bg-green-600/20 text-green-300 border border-green-500/30' 
+              health?.services?.neo4j?.status === 'healthy'
+                ? 'bg-green-600/20 text-green-300 border border-green-500/30'
                 : 'bg-red-600/20 text-red-300 border border-red-500/30'
             }`} title={
-              health?.services?.neo4j?.status === 'healthy' 
-                ? 'Neo4j Graph Database Connected - All graph operations available' 
-                : `Neo4j Graph Database Offline - Limited functionality${health?.services?.neo4j?.error ? `\nError: ${health.services.neo4j.error}` : ''}`
+              health?.services?.neo4j?.status === 'healthy'
+                ? 'Graph database connected — all graph operations available'
+                : `Graph database offline — limited functionality${health?.services?.neo4j?.error ? `\nError: ${health.services.neo4j.error}` : ''}`
             }>
               <Database className="w-4 h-4" />
               <span className="font-medium">
-                {health?.services?.neo4j?.status === 'healthy' ? 'Neo4j GraphDB' : 'Neo4j GraphDB Offline'}
+                {health?.services?.neo4j?.status === 'healthy' ? 'Graph DB' : 'Graph DB Offline'}
               </span>
             </div>