From 03124c253e705f4f4b8aac9a76a413f8b2270901 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Mon, 15 Jun 2026 23:58:51 -0700
Subject: [PATCH] Fix edge-label arrow flip + mobile top-bar/captcha overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Edge-label directional icon now flips with the edge: edgeLabelPlacement keeps
  text upright by stripping 180° when the edge points "backward"; carry that lost
  180° on the .edge-label-icon so its arrow tracks the real direction (and flips
  on flip-direction). The main arrowhead already flipped; the label icon didn't.
- Mobile top bar: hide the status chip + Collaborators on small screens (the
  hamburger handles nav there; they were eating the width). Genericize the
  "Neo4j GraphDB" label → "Graph DB" (core is Neo4j-optional; don't claim Neo4j).
- Mobile captcha: CodeCaptcha is now fluid (w-full/max-w-full, p-3 sm:p-5,
  text-3xl sm:text-5xl) and GuestModeDialog scrolls (max-h-[90vh] overflow-y-auto)
  so the captcha + Continue button fit narrow screens.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web/src/components/CodeCaptcha.tsx   |  6 +++---
 .../web/src/components/GuestModeDialog.tsx    |  2 +-
 .../InteractiveGraphVisualization.tsx         |  7 +++++++
 packages/web/src/pages/Workspace.tsx          | 19 ++++++++++---------
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/components/CodeCaptcha.tsx b/packages/web/src/components/CodeCaptcha.tsx
index b02dd7f8..cde20a1f 100644
--- a/packages/web/src/components/CodeCaptcha.tsx
+++ b/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>
diff --git a/packages/web/src/components/GuestModeDialog.tsx b/packages/web/src/components/GuestModeDialog.tsx
index 599af899..d1c8b6ca 100644
--- a/packages/web/src/components/GuestModeDialog.tsx
+++ b/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">
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index 26435cd8..c18e7236 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/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})`;
         });
     };
diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index ced7c1c6..e9826c85 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/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>