From 9755ca1c97046b4b97f723716a7f8054629af236 Mon Sep 17 00:00:00 2001
From: Maksym Yezhov <maxim.ezhov@shopify.com>
Date: Fri, 17 Jul 2026 16:30:23 -0700
Subject: [PATCH] poc: minimap - optimize tailwind readability

---
 .../MiniMap/CanvasControlsContent.module.css  | 59 +++++++++++++++++++
 .../MiniMap/CanvasControlsContent.tsx         | 10 ++--
 2 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/v2/shared/components/MiniMap/CanvasControlsContent.module.css

diff --git a/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.module.css b/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.module.css
new file mode 100644
index 0000000000..e46f0e57eb
--- /dev/null
+++ b/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.module.css
@@ -0,0 +1,59 @@
+.container {
+  position: relative;
+  container-type: inline-size;
+  background-color: var(--background);
+  --xy-minimap-mask-background-color-props: #f0f0f0;
+  --xy-minimap-node-background-color-props: grey;
+}
+
+:global(.dark) .container {
+  --xy-minimap-mask-background-color-props: black;
+}
+
+.layout {
+  position: relative;
+}
+
+@container (min-width: 220px) {
+  .layout {
+    flex-direction: row;
+  }
+}
+
+/* Scoped under .container for specificity over react-flow's base styles. */
+.container .minimap {
+  flex: 1;
+  position: relative;
+  inset: auto;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:global(.dark) .container .minimap {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md, 0.375rem);
+}
+
+.container .minimap :global(.react-flow__minimap-svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.container .controls {
+  position: relative;
+  inset: auto;
+  margin: 0;
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+@container (min-width: 220px) {
+  .container .controls {
+    height: 100%;
+    flex-direction: column;
+  }
+}
diff --git a/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.tsx b/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.tsx
index f777eed77b..fbaafa49ce 100644
--- a/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.tsx
+++ b/src/routes/v2/shared/components/MiniMap/CanvasControlsContent.tsx
@@ -3,6 +3,8 @@ import { Controls, MiniMap } from "@xyflow/react";
 import { BlockStack } from "@/components/ui/layout";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
 
+import styles from "./CanvasControlsContent.module.css";
+
 export function CanvasControlsContent({
   trackingSpace = "v2.pipeline_canvas",
 }: {
@@ -13,16 +15,16 @@ export function CanvasControlsContent({
   return (
     <BlockStack
       fill
-      className="@container relative bg-background [--xy-minimap-mask-background-color-props:#f0f0f0] [--xy-minimap-node-background-color-props:grey] dark:[--xy-minimap-mask-background-color-props:black]"
+      className={styles.container}
       data-testid="canvas-controls-window"
     >
-      <BlockStack fill align="stretch" className="relative @[220px]:flex-row">
+      <BlockStack fill align="stretch" className={styles.layout}>
         <MiniMap
           pannable
           zoomable
           onClick={() => track(`${trackingSpace}.minimap.click`)}
           onNodeClick={() => track(`${trackingSpace}.minimap.node.click`)}
-          className="dark:rounded-md dark:border dark:border-border flex-1 !relative !inset-auto !m-0 !w-full !h-full [&_.react-flow__minimap-svg]:!w-full [&_.react-flow__minimap-svg]:!h-full [&_.react-flow__minimap-svg]:!block"
+          className={styles.minimap}
         />
         <Controls
           showZoom
@@ -36,7 +38,7 @@ export function CanvasControlsContent({
               interactive,
             })
           }
-          className="!relative !inset-auto !m-0 !shadow-none flex !flex-row justify-around @[220px]:h-full @[220px]:!flex-col"
+          className={styles.controls}
         />
       </BlockStack>
     </BlockStack>