Harden responsive layout and reduce tie-net routing noise

frontend/styles.css

@@ -725,30 +725,93 @@ kbd {
 
 @media (max-width: 1300px) {
   .workspace {
-    height: auto;
     grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: minmax(420px, 1fr) repeat(2, minmax(240px, auto));
+    grid-auto-flow: row;
+    gap: 12px;
+    height: auto;
   }
 
   .pane.center {
-    min-height: 600px;
+    order: -1;
+    min-height: 420px;
+    max-height: 58vh;
+  }
+
+  .pane.left,
+  .pane.right {
+    max-height: 320px;
+    overflow: hidden;
+  }
+
+  .pane.left .list,
+  .pane.right .miniList {
+    max-height: 160px;
+  }
+
+  .canvasViewport {
+    height: min(54vh, 520px);
   }
 }
 
 @media (max-width: 820px) {
   .topbar {
     position: static;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
   }
 
   .brand h1 {
     font-size: 1.3rem;
   }
 
+  .brand {
+    width: 100%;
+  }
+
   .actions {
+    width: 100%;
     justify-content: flex-start;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    scrollbar-width: thin;
+  }
+
+  .actions button,
+  .actions select {
+    flex: 0 0 auto;
+  }
+
+  .actions::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  .actions::-webkit-scrollbar-thumb {
+    background: var(--line-strong);
+    border-radius: 999px;
+  }
+
+  .workspace {
+    padding: 6px;
   }
 
   .editorGrid {
     grid-template-columns: 1fr;
   }
+
+  .jsonActions {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .jsonActions button {
+    width: 100%;
+  }
+
+  .pane.left,
+  .pane.right {
+    max-height: 300px;
+  }
 }

src/layout.js

@@ -2204,10 +2204,12 @@ function shouldUseLabelTie(net, pinNodes, context) {
   if (!pinNodes.length) {
     return false;
   }
-  const minX = Math.min(...pinNodes.map((p) => p.exit.x), 0);
-  const maxX = Math.max(...pinNodes.map((p) => p.exit.x), 0);
-  const minY = Math.min(...pinNodes.map((p) => p.exit.y), 0);
-  const maxY = Math.max(...pinNodes.map((p) => p.exit.y), 0);
+  const xs = pinNodes.map((p) => p.exit.x);
+  const ys = pinNodes.map((p) => p.exit.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
   const span = Math.abs(maxX - minX) + Math.abs(maxY - minY);
 
   if (context.renderMode === "explicit") {
@@ -2248,11 +2250,20 @@ function shouldFallbackToTieByQuality(net, pinNodes, routed) {
   const totalLength = Number(stats.total_length ?? 0);
   const directLength = Number(stats.direct_length ?? totalLength);
   const spanRatio = directLength > 0 ? totalLength / directLength : 1;
+  const xs = pinNodes.map((p) => p.exit.x);
+  const ys = pinNodes.map((p) => p.exit.y);
+  const span = Math.abs(Math.max(...xs) - Math.min(...xs)) + Math.abs(Math.max(...ys) - Math.min(...ys));
+  const hasSpread = span >= GRID * 24;
 
-  if (pinNodes.length >= 4 && (detour > 2.25 || bends >= 7)) {
+  if (pinNodes.length >= 4 && hasSpread && (detour > 2.25 || bends >= 7)) {
     return true;
   }
-  if ((net.class === "analog" || net.class === "signal") && pinNodes.length >= 3 && spanRatio > 2.7) {
+  if (
+    hasSpread &&
+    (net.class === "analog" || net.class === "signal") &&
+    pinNodes.length >= 3 &&
+    spanRatio > 2.7
+  ) {
     return true;
   }
   return false;