From 545c2f0607c245eb17ddc67787f9242e0f9ee70a Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Tue, 3 Nov 2026 12:58:36 -0500
Subject: [PATCH] fix(ui): give App Map canvas a definite height so React Flow
 renders

---
 frontend/src/styles/pages/_app-map.scss | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/styles/pages/_app-map.scss b/frontend/src/styles/pages/_app-map.scss
index 09d48894..3063b1af 100644
--- a/frontend/src/styles/pages/_app-map.scss
+++ b/frontend/src/styles/pages/_app-map.scss
@@ -64,8 +64,9 @@
     }
 
     &__canvas {
-        flex: 1 1 auto;
-        min-height: 480px;
+        // geometry: React Flow sizes to 100% of its parent, so the canvas needs a
+        // definite height (a flex/min-height box resolves to 0 and renders blank)
+        height: clamp(360px, 65dvh, 760px);
         border: 1px solid $border-subtle;
         border-radius: $radius-card;
         background: $bg-card;
@@ -76,8 +77,19 @@
             display: none;
         }
 
-        .react-flow__minimap {
-            background: var(--bg-elevated);
+        // Theme React Flow's default (light) chrome via its own CSS variables.
+        --xy-minimap-background-color-default: var(--bg-elevated);
+        --xy-minimap-mask-background-color-default: rgba(0, 0, 0, 0.45);
+        --xy-controls-button-background-color-default: var(--bg-elevated);
+        --xy-controls-button-background-color-hover-default: var(--bg-hover);
+        --xy-controls-button-color-default: var(--text-primary);
+        --xy-controls-button-border-color-default: var(--border-subtle);
+
+        // The minimap covers a third of the canvas on a phone.
+        @media (max-width: 639px) {
+            .react-flow__minimap {
+                display: none;
+            }
         }
     }