@pipelex/mthds-ui 0.34.0 → 0.34.1

package/dist/standalone/graph-viewer.css

@@ -1448,6 +1448,24 @@ button.node-validation-badge {
   background: var(--surface-elevated);
 }
 
+/* Phones: below 640px (Tailwind's `sm` breakpoint) the button keeps its look
+ * and its place on the first content line, and takes taps over a 44×44 area,
+ * the size a fingertip needs, through an invisible `::after` reaching 10px
+ * past each edge. That reach covers no other control: above and to the right
+ * lie the content's padding, to the left and below the header's text. Growing
+ * the button instead would push the line it shares. */
+@media (max-width: 639.98px) {
+  .detail-panel-close {
+    position: relative;
+  }
+
+  .detail-panel-close::after {
+    content: "";
+    position: absolute;
+    inset: -10px;
+  }
+}
+
 .detail-panel-content {
   flex: 1;
   overflow-y: auto;
@@ -2388,6 +2406,67 @@ button.node-validation-badge {
   color: var(--color-accent);
 }
 
+/* ─── Phones: 44×44 touch targets ───────────────────────────────────────── */
+/* Below 640px (Tailwind's `sm` breakpoint) every toolbar button, the style
+   menu's trigger and the validation button included, is a 44×44 target, the
+   size a fingertip needs. The button itself grows rather than gaining an
+   invisible extended hit area: the buttons sit 4px apart, so an area reaching
+   44px would cover its neighbour's and take the taps meant for it. Desktop
+   sizes are untouched.
+
+   A bar of 44px buttons can be wider than a phone (or, on an edge anchor,
+   taller than the viewer), so below 640px it wraps, never reaching past
+   ReactFlow's 15px panel margin. The group separators are hidden there, since
+   a wrapped row would end on one. */
+@media (max-width: 639.98px) {
+  .graph-toolbar-panel {
+    /* Not the shrink-to-fit width: for a `top-center` / `bottom-center` bar
+       that is the half of the viewer `left: 50%` leaves it. */
+    width: max-content;
+    max-width: calc(100% - 2 * 15px);
+    max-height: calc(100% - 2 * 15px);
+  }
+
+  .graph-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .graph-toolbar-separator {
+    display: none;
+  }
+
+  /* A row bar's short last row sits under the side it is anchored to. */
+  .graph-toolbar-panel--horizontal.right .graph-toolbar {
+    justify-content: flex-end;
+  }
+
+  .graph-toolbar-panel--horizontal.center .graph-toolbar {
+    justify-content: center;
+  }
+
+  /* An edge anchor's column, as a flex item of the panel, is held to the
+     panel's capped height, so it wraps into a second column, which grows
+     toward the graph rather than off the viewer's edge. */
+  .graph-toolbar-panel--vertical {
+    display: flex;
+  }
+
+  .graph-toolbar-panel--vertical.right .graph-toolbar {
+    flex-wrap: wrap-reverse;
+  }
+
+  .graph-toolbar-btn {
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+  }
+
+  .graph-toolbar-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
 /* ─── Simple style — a flowchart of the method's steps in plain words ───── */
 /* Token-only, like every component sheet here: the palette tokens on         */
 /* `.react-flow-container` theme it. The box metrics mirror the constants in  */