Discard and step take the places of flow settings and add node in a lane short of room, so the flow toolbar beside a panel fits at 768px with a draft and while paused; the sidebar folds below 953px instead of 989px

frontend/src/components/Flow/FlowDock.tsx

@@ -57,6 +57,8 @@ export const FIT_VIEW_PANEL = {
 const SHED = "md:@max-[27.5rem]:hidden"
 /** Hidden in a lane narrower than that shorter bar. */
 const SHED_MORE = "md:@max-[21rem]:hidden"
+/** Add node makes way for the step button in a lane short of both. */
+const MAKE_WAY = "md:@max-[29.75rem]:hidden"
 
 /**
  * The action bar, floating bottom-centre. Run is the one brand-secondary
@@ -72,8 +74,11 @@ const SHED_MORE = "md:@max-[21rem]:hidden"
  *
  * Beside a panel it is measured against the lane it sits in, not the screen.
  * A lane too narrow for the editing bar (the issues badge and discard showing)
- * sheds what a phone sheds, then the console. Below that the editor folds the
- * sidebar away while the panel is open (`CRAMPED` in FlowEditor).
+ * sheds what a phone sheds, then the console. Step takes add node's place
+ * wherever the paused bar would not fit, and in the narrowest lane discard
+ * takes flow settings', so every bar at its shortest is as wide. Below that
+ * the editor folds the sidebar away while the panel is open (`CRAMPED` in
+ * FlowEditor).
  */
 export function FlowDock({
   flow,
@@ -153,7 +158,10 @@ export function FlowDock({
             <Button
               variant="ghost"
               size="icon-touch"
-              className="text-muted-foreground"
+              className={cn(
+                "text-muted-foreground",
+                paused && enabled && MAKE_WAY,
+              )}
               onClick={onAddNode}
               aria-label="Add node"
               data-testid="add-node"
@@ -295,7 +303,7 @@ export function FlowDock({
             <Button
               variant="ghost"
               size="icon-touch"
-              className="text-muted-foreground"
+              className={cn("text-muted-foreground", hasDraft && SHED_MORE)}
               onClick={onEditFlow}
               aria-label="Flow settings"
               data-testid="edit-flow"

frontend/src/components/Flow/FlowEditor.tsx

@@ -193,10 +193,10 @@ const TYPING_WINDOW = 500
 
 /**
  * Where the dock beside a panel is short of room even with all it sheds
- * (`FlowDock`): 285px of bar and a margin, the 16rem sidebar and the 27rem
+ * (`FlowDock`): 249px of bar and a margin, the 16rem sidebar and the 27rem
  * panel. The sidebar folds away while a panel is open here.
  */
-const CRAMPED = "(min-width: 48rem) and (max-width: 61.75rem)"
+const CRAMPED = "(min-width: 48rem) and (max-width: 59.5rem)"
 
 /** Nodes copied here, and the code of the ones carrying their own. */
 type NodeClipboard = {