From 29a173a07e6412b6f974c535f8b78783f9300460 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 10 Nov 2026 10:51:12 -0700
Subject: [PATCH] Give the actions bar one inset in both of Yaak Proxy's panes

The request half's tab content ran to the card's bottom edge while the
response half's stopped above it, so the Pretty/Raw bar sat 7px from
the bottom on one side and 19px on the other. The request half is now
padded below as the response is. The bar's inset is one constant that
viewers can no longer override, and the form view draws the switch in
one bar with its bulk-view toggle instead of shifting the bar past it,
so every viewer's bar sits 11px from the pane's right and 19px from its
bottom.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/yaak-proxy/components/FlowBodyViewer.tsx | 27 +++++--------
 apps/yaak-proxy/components/FlowCard.tsx       | 27 ++++++++++---
 packages/ui/src/components/ActionsBar.tsx     | 17 +++++---
 .../components/http/FormUrlencodedEditor.tsx  |  6 ++-
 .../pairs/PairOrBulkEditor.test.tsx           | 40 +++++++++++++++++++
 .../src/components/pairs/PairOrBulkEditor.tsx | 38 ++++++++++++++----
 6 files changed, 121 insertions(+), 34 deletions(-)
 create mode 100644 packages/ui/src/components/pairs/PairOrBulkEditor.test.tsx

diff --git a/apps/yaak-proxy/components/FlowBodyViewer.tsx b/apps/yaak-proxy/components/FlowBodyViewer.tsx
index 2523880ac..8e687c3ab 100644
--- a/apps/yaak-proxy/components/FlowBodyViewer.tsx
+++ b/apps/yaak-proxy/components/FlowBodyViewer.tsx
@@ -43,8 +43,8 @@ import { useSaveFlowBody } from "../lib/flowActions";
 interface Props {
   flow: Flow;
   which: FlowBody;
-  /** A URL-encoded body's fields, shown as its formatted view */
-  form?: ReactNode;
+  /** A URL-encoded body's fields, its formatted view, with the switch in the fields' own bar */
+  form?: (actions: ReactNode) => ReactNode;
   /** Leaves saying the body was cut short to the tab, which says it its own way */
   hideCutNote?: boolean;
 }
@@ -178,7 +178,7 @@ export function FlowBodyViewer({ flow, which, form, hideCutNote = false }: Props
     );
 
   let viewer: ReactNode;
-  let textViewer = false;
+  let ownsBar = false;
   if (decodeError != null) {
     // What failed to decode is as it was on the wire, compressed, so never text.
     viewer = <BinaryBody flow={flow} which={which} bytes={bytes} />;
@@ -196,8 +196,9 @@ export function FlowBodyViewer({ flow, which, form, hideCutNote = false }: Props
     viewer = <ImageBody bytes={bytes} mime={imageType} />;
   } else if (text == null) {
     viewer = <BinaryBody flow={flow} which={which} bytes={bytes} />;
-  } else if (prettyView === "form" && pretty) {
-    viewer = form;
+  } else if (prettyView === "form" && pretty && form != null) {
+    ownsBar = true;
+    viewer = form(modeSwitch);
   } else if (prettyView === "table" && pretty) {
     viewer = <CsvViewer text={text} className="pb-2" />;
   } else if (prettyView === "preview" && pretty) {
@@ -207,7 +208,7 @@ export function FlowBodyViewer({ flow, which, form, hideCutNote = false }: Props
       <WebPageViewer html={text} baseUrl={flow.url} />
     );
   } else {
-    textViewer = true;
+    ownsBar = true;
     viewer = (
       <FlowTextViewer
         flow={flow}
@@ -220,19 +221,13 @@ export function FlowBodyViewer({ flow, which, form, hideCutNote = false }: Props
     );
   }
 
-  // The text viewer draws the switch in its own bar, beside its filter; the rest get a bar here
-  if (modeSwitch != null && !textViewer) {
+  // The text viewer and the form draw the switch in their own bar, beside their own actions; the
+  // rest get a bar here. Each fills the tab content, so every bar has the same inset.
+  if (modeSwitch != null && !ownsBar) {
     viewer = (
       <div className={classNames(ACTIONS_BAR_CONTAINER, "h-full w-full")}>
         {viewer}
-        <ActionsBar
-          className={classNames(
-            // Beside the form's own bulk-view toggle in the corner, until that joins the bar
-            prettyView === "form" && pretty && "bottom-0! right-[calc(var(--height-sm)+0.25rem)]!",
-          )}
-        >
-          {modeSwitch}
-        </ActionsBar>
+        <ActionsBar>{modeSwitch}</ActionsBar>
       </div>
     );
   }
diff --git a/apps/yaak-proxy/components/FlowCard.tsx b/apps/yaak-proxy/components/FlowCard.tsx
index 2fba503c7..16898f5e3 100644
--- a/apps/yaak-proxy/components/FlowCard.tsx
+++ b/apps/yaak-proxy/components/FlowCard.tsx
@@ -6,6 +6,7 @@ import {
   Dropdown,
   EmptyStateText,
   type ExtraPaneTab,
+  FormUrlencodedEditor,
   type HttpBodyResult,
   HttpRequestPaneView,
   HttpResponsePaneView,
@@ -148,28 +149,44 @@ function FlowRequestHalf({ flow }: { flow: Flow }) {
   ];
   const { defaultTab, onTabChange } = useShapeTab("request", flow, available);
 
+  const forceUpdateKey = `${flow.updatedAt}.${body.data == null ? "" : "loaded"}`;
+
   return (
     <HttpRequestPaneView
-      className="px-3"
+      // Padded below as the response half's tabs are, so their content, and the actions bar
+      // over it, sit the same distance from the card's edges
+      className="px-3 pb-3"
       request={request}
       fullHeight
-      forceUpdateKey={`${flow.updatedAt}.${body.data == null ? "" : "loaded"}`}
+      forceUpdateKey={forceUpdateKey}
       tabsStorageKey="proxy_request_tabs"
       bodyLoader={loader}
       extraTabs={extraTabs}
       defaultTab={defaultTab}
       onTabChange={onTabChange}
       urlLine={<UrlLine flow={flow} />}
-      renderBody={(editor) => (
+      renderBody={() => (
         <FlowRequestBody
           body={body}
           // The response's viewer choice, with the form's fields as a URL-encoded body's
-          // formatted view
+          // formatted view, the switch in one bar with their bulk-view toggle
           viewer={
             <FlowBodyViewer
               flow={flow}
               which="request"
-              form={request.bodyType === BODY_TYPE_FORM_URLENCODED ? editor : undefined}
+              form={
+                request.bodyType === BODY_TYPE_FORM_URLENCODED
+                  ? (actions) => (
+                      <FormUrlencodedEditor
+                        readOnly
+                        requestId={request.id}
+                        form={request.body.form}
+                        forceUpdateKey={forceUpdateKey}
+                        actions={actions}
+                      />
+                    )
+                  : undefined
+              }
               hideCutNote
             />
           }
diff --git a/packages/ui/src/components/ActionsBar.tsx b/packages/ui/src/components/ActionsBar.tsx
index 918a5476b..ff1315d61 100644
--- a/packages/ui/src/components/ActionsBar.tsx
+++ b/packages/ui/src/components/ActionsBar.tsx
@@ -7,9 +7,15 @@ export const ACTIONS_BAR_CONTAINER = "relative group/actions";
 /** Set on an action's outermost element to keep it in view, as a control that shows state does */
 export const PINNED_ACTION = { "data-pinned": true } as const;
 
+/**
+ * Where every bar sits in its container, the same for every viewer: flush with the content's
+ * right edge, which a text viewer's scrollbar sits just past, and lifted off the bottom edge
+ * above its horizontal scrollbar. Not overridable, so bars line up from pane to pane.
+ */
+const ACTIONS_BAR_INSET = "bottom-2 right-0 left-0";
+
 interface Props {
   children: ReactNode;
-  className?: string;
 }
 
 /**
@@ -17,14 +23,15 @@ interface Props {
  * small bordered buttons on the surface colour, so they read over text, each held to the height
  * and radius of an `sm` icon button and centred on the row. Each fades in while the
  * container is hovered or the action has focus, unless it carries `PINNED_ACTION`. The row lets
- * clicks through to the content between its actions.
+ * clicks through to the content between its actions. Place the container over the whole tab
+ * content, not a viewer's inner box, so the bar's inset is the pane's.
  */
-export function ActionsBar({ children, className }: Props) {
+export function ActionsBar({ children }: Props) {
   return (
     <div
       className={classNames(
-        className,
-        "absolute bottom-2 left-0 right-0 z-10 flex items-center justify-end gap-1",
+        "absolute z-10 flex items-center justify-end gap-1",
+        ACTIONS_BAR_INSET,
         "pointer-events-none",
         "*:pointer-events-auto *:bg-surface *:shadow *:transition-opacity *:transform-gpu",
         // Every action as tall and as round as a small icon button, so they line up
diff --git a/packages/ui/src/components/http/FormUrlencodedEditor.tsx b/packages/ui/src/components/http/FormUrlencodedEditor.tsx
index 6b5aef48b..ae2eba1ea 100644
--- a/packages/ui/src/components/http/FormUrlencodedEditor.tsx
+++ b/packages/ui/src/components/http/FormUrlencodedEditor.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { type ReactNode, useCallback, useMemo } from "react";
 import type { Pair, PairEditorProps } from "../pairs/PairEditor";
 import { PairOrBulkEditor } from "../pairs/PairOrBulkEditor";
 import type { HttpFormFieldView, HttpRequestBodyView } from "./types";
@@ -11,6 +11,8 @@ type Props = {
   onChange?: (body: HttpRequestBodyView) => void;
   /** Show the fields without a way to change them */
   readOnly?: boolean;
+  /** Drawn in one bar with the bulk-edit toggle, like a view-mode switch */
+  actions?: ReactNode;
 };
 
 export function FormUrlencodedEditor({
@@ -19,6 +21,7 @@ export function FormUrlencodedEditor({
   forceUpdateKey,
   onChange,
   readOnly,
+  actions,
 }: Props) {
   const pairs = useMemo<Pair[]>(
     () =>
@@ -52,6 +55,7 @@ export function FormUrlencodedEditor({
       pairs={pairs}
       onChange={handleChange}
       readOnly={readOnly}
+      actions={actions}
       forceUpdateKey={forceUpdateKey}
       stateKey={`urlencoded.${requestId}`}
     />
diff --git a/packages/ui/src/components/pairs/PairOrBulkEditor.test.tsx b/packages/ui/src/components/pairs/PairOrBulkEditor.test.tsx
new file mode 100644
index 000000000..17d6134da
--- /dev/null
+++ b/packages/ui/src/components/pairs/PairOrBulkEditor.test.tsx
@@ -0,0 +1,40 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test } from "vite-plus/test";
+import type { HostInputProps } from "../EditorHost";
+import { EditorHostProvider } from "../EditorHost";
+import { PairOrBulkEditor } from "./PairOrBulkEditor";
+
+function StubInput({ name, defaultValue }: HostInputProps) {
+  return <div data-input={name}>{defaultValue}</div>;
+}
+
+function render(actions?: string) {
+  return renderToStaticMarkup(
+    <EditorHostProvider value={{ Input: StubInput }}>
+      <PairOrBulkEditor
+        readOnly
+        preferenceName="test"
+        stateKey="test"
+        forceUpdateKey=""
+        pairs={[{ id: "p1", enabled: true, name: "a", value: "1" }]}
+        onChange={() => {}}
+        actions={actions == null ? undefined : <span data-action>{actions}</span>}
+      />
+    </EditorHostProvider>,
+  );
+}
+
+describe("PairOrBulkEditor", () => {
+  test("with actions, its bulk toggle shares one actions bar with them", () => {
+    const markup = render("SWITCH");
+    expect(markup).toContain("group/actions");
+    // The toggle, then the given actions, inside the bar
+    expect(markup).toMatch(/group-hover\/actions[^>]*>.*Enable bulk edit.*SWITCH/);
+  });
+
+  test("without actions, its toggle keeps its own corner", () => {
+    const markup = render();
+    expect(markup).not.toContain("group/actions");
+    expect(markup).toContain("Enable bulk edit");
+  });
+});
diff --git a/packages/ui/src/components/pairs/PairOrBulkEditor.tsx b/packages/ui/src/components/pairs/PairOrBulkEditor.tsx
index 22f4facc4..7ac8fbea1 100644
--- a/packages/ui/src/components/pairs/PairOrBulkEditor.tsx
+++ b/packages/ui/src/components/pairs/PairOrBulkEditor.tsx
@@ -1,4 +1,6 @@
 import classNames from "classnames";
+import type { ReactNode } from "react";
+import { ACTIONS_BAR_CONTAINER, ActionsBar } from "../ActionsBar";
 import { useEditorHost } from "../EditorHost";
 import { IconButton } from "../IconButton";
 import { BulkPairEditor } from "./BulkPairEditor";
@@ -8,9 +10,14 @@ import { PairEditor } from "./PairEditor";
 interface Props extends PairEditorProps {
   preferenceName: string;
   forcedEnvironmentId?: string;
+  /**
+   * Drawn after the bulk-edit toggle in one `ActionsBar`, like a view-mode switch. Giving it puts
+   * the toggle in that bar rather than its own corner; once every site has moved, it always is
+   */
+  actions?: ReactNode;
 }
 
-export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
+export function PairOrBulkEditor({ preferenceName, actions, ...props }: Props) {
   const { useStoredValue } = useEditorHost();
   const [useBulk, setUseBulk] = useStoredValue<boolean>(
     ["bulk_edit", preferenceName],
@@ -18,20 +25,37 @@ export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
     "global",
   );
 
+  const editor = useBulk ? <BulkPairEditor {...props} /> : <PairEditor {...props} />;
+  const toggleProps = {
+    size: "sm",
+    variant: "border",
+    title: useBulk ? "Enable form edit" : "Enable bulk edit",
+    onClick: () => setUseBulk((b) => !b),
+    icon: useBulk ? "table" : "file_code",
+  } as const;
+
+  if (actions != null) {
+    return (
+      <div className={classNames(ACTIONS_BAR_CONTAINER, "h-full w-full")}>
+        {editor}
+        <ActionsBar>
+          <IconButton {...toggleProps} />
+          {actions}
+        </ActionsBar>
+      </div>
+    );
+  }
+
   return (
     <div className="relative h-full w-full group/wrapper">
-      {useBulk ? <BulkPairEditor {...props} /> : <PairEditor {...props} />}
+      {editor}
       <div className="absolute right-0 bottom-0">
         <IconButton
-          size="sm"
-          variant="border"
-          title={useBulk ? "Enable form edit" : "Enable bulk edit"}
+          {...toggleProps}
           className={classNames(
             "transition-opacity opacity-0 group-hover:opacity-80 hover:opacity-100! shadow",
             "bg-surface hover:text group-hover/wrapper:opacity-100",
           )}
-          onClick={() => setUseBulk((b) => !b)}
-          icon={useBulk ? "table" : "file_code"}
         />
       </div>
     </div>