@tangle-network/ui 11.30.1 → 11.30.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.30.2
+
+### Patch Changes
+
+- df8514f: `Toolbar` keeps its filters at content width on one `lg` line while they fit, and gives search the rest between a 16rem floor and `max-w-sm`. The even split had clipped the Assets bar's third field (Schedule for) at the scroll edge at 1440px while search sat at 384px. Filters now shrink and scroll only once search is at its floor.
+
 ## 11.30.1
 
 ### Patch Changes

package/dist/primitives/toolbar.d.ts

@@ -10,22 +10,22 @@ import * as React from "react";
  * own visual language, so one row carried a native `<select>`, a custom input
  * and a segmented control side by side.
  *
- * So search and filters SHARE the free space and `actions` stays at its content
- * width, and the row is the one place those controls are composed, which is what
- * keeps them looking like one set.
+ * So on one `lg` line the filters keep their content width while it fits,
+ * search takes what is left between a 16rem floor and `max-w-sm`, and `actions`
+ * stays at its content width. The row is the one place those controls are
+ * composed, which is what keeps them looking like one set.
  *
- * Sharing is deliberate, and the alternative is worse. Giving the filter row its
- * content width starves search: measured with a 537px filter row in an 832px
- * toolbar, the search field collapses to 89px. Letting both flex bounds the
- * filter row instead, so it scrolls within its half — 313px each in that same
- * case — and search stays usable however many filters a page adds. `max-w-sm`
- * then stops search claiming more than it can use when there are few filters.
+ * Both earlier layouts failed one side. Filters at content width with no floor
+ * starved search: a 537px filter row in an 832px toolbar left it 89px. Splitting
+ * the row evenly clipped filters that would have fitted: at 1440px the Assets
+ * bar cut its third field at the scroll edge while search sat at 384px. With the
+ * floor, filters shrink and scroll only once search is down to 16rem.
  *
  * Below `lg` the row becomes a column and the filters wrap onto as many lines
  * as they need. Scrolling them as one line hid every filter past the first
  * behind the screen edge on a phone: at 390px the second select started at
  * 403px and a third at 652px, with nothing to say more were there. From `lg`
- * up they share one line and scroll within their half, as above.
+ * up they sit on one line as above.
  */
 /**
  * Slots only — `children` is omitted deliberately. A free child would render as

package/dist/primitives/toolbar.js

@@ -8,11 +8,11 @@ const Toolbar = React.forwardRef(({ className, search, filters, actions, ...prop
 	...props,
 	children: [
 		search && /* @__PURE__ */ jsx("div", {
-			className: "min-w-0 lg:max-w-sm lg:flex-1",
+			className: "min-w-0 lg:min-w-64 lg:max-w-sm lg:flex-1",
 			children: search
 		}),
 		filters && /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-1 lg:flex-nowrap lg:gap-2 lg:overflow-x-auto",
+			className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-initial lg:flex-nowrap lg:gap-2 lg:overflow-x-auto",
 			children: filters
 		}),
 		actions && /* @__PURE__ */ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.30.1",
+  "version": "11.30.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/toolbar.test.tsx

@@ -24,11 +24,10 @@ describe("Toolbar", () => {
     expect(row.children).toHaveLength(1);
   });
 
-  // Search and filters both flex, on purpose: giving the filter row its content
-  // width starves search — a 537px filter row in an 832px toolbar collapses the
-  // search field to 89px. Sharing bounds the filter row so it scrolls within its
-  // half and search stays usable. Only `actions` sits at content width.
-  it("lets search and filters share the row, holding actions at content width", () => {
+  // Filters keep their content width while it fits and shrink (scrolling) only
+  // once search reaches its 16rem floor; an even split clipped a third filter at
+  // 1440px, and no floor left search 89px wide in an 832px toolbar.
+  it("keeps filters at content width above a search floor, actions at content width", () => {
     const { container } = render(
       <Toolbar
         actions={<button type="button">Export</button>}
@@ -39,11 +38,11 @@ describe("Toolbar", () => {
     const [searchSlot, filterSlot, actionsSlot] = Array.from(
       (container.firstElementChild as HTMLElement).children,
     ) as HTMLElement[];
-    expect(searchSlot.className).toContain("lg:flex-1");
-    expect(searchSlot.className).toContain("min-w-0");
-    // Both flex, so neither can starve the other.
-    expect(filterSlot.className).toContain("lg:flex-1");
-    expect(filterSlot.className).toContain("min-w-0");
+    const search = searchSlot.className.split(" ");
+    const filters = filterSlot.className.split(" ");
+    expect(search).toEqual(expect.arrayContaining(["lg:flex-1", "lg:min-w-64", "lg:max-w-sm", "min-w-0"]));
+    expect(filters).toEqual(expect.arrayContaining(["lg:flex-initial", "min-w-0", "lg:overflow-x-auto"]));
+    expect(filters).not.toContain("lg:flex-1");
     expect(actionsSlot.className).toContain("shrink-0");
     expect(actionsSlot.className).not.toContain("flex-1");
   });

package/src/primitives/toolbar.tsx

@@ -11,22 +11,22 @@ import { cn } from "../lib/utils";
  * own visual language, so one row carried a native `<select>`, a custom input
  * and a segmented control side by side.
  *
- * So search and filters SHARE the free space and `actions` stays at its content
- * width, and the row is the one place those controls are composed, which is what
- * keeps them looking like one set.
+ * So on one `lg` line the filters keep their content width while it fits,
+ * search takes what is left between a 16rem floor and `max-w-sm`, and `actions`
+ * stays at its content width. The row is the one place those controls are
+ * composed, which is what keeps them looking like one set.
  *
- * Sharing is deliberate, and the alternative is worse. Giving the filter row its
- * content width starves search: measured with a 537px filter row in an 832px
- * toolbar, the search field collapses to 89px. Letting both flex bounds the
- * filter row instead, so it scrolls within its half — 313px each in that same
- * case — and search stays usable however many filters a page adds. `max-w-sm`
- * then stops search claiming more than it can use when there are few filters.
+ * Both earlier layouts failed one side. Filters at content width with no floor
+ * starved search: a 537px filter row in an 832px toolbar left it 89px. Splitting
+ * the row evenly clipped filters that would have fitted: at 1440px the Assets
+ * bar cut its third field at the scroll edge while search sat at 384px. With the
+ * floor, filters shrink and scroll only once search is down to 16rem.
  *
  * Below `lg` the row becomes a column and the filters wrap onto as many lines
  * as they need. Scrolling them as one line hid every filter past the first
  * behind the screen edge on a phone: at 390px the second select started at
  * 403px and a third at 652px, with nothing to say more were there. From `lg`
- * up they share one line and scroll within their half, as above.
+ * up they sit on one line as above.
  */
 /**
  * Slots only — `children` is omitted deliberately. A free child would render as
@@ -56,14 +56,14 @@ const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
       )}
       {...props}
     >
-      {search && <div className="min-w-0 lg:max-w-sm lg:flex-1">{search}</div>}
+      {search && <div className="min-w-0 lg:min-w-64 lg:max-w-sm lg:flex-1">{search}</div>}
       {filters && (
         // `py-1` leaves room for a focus ring above and below; on the single
         // `lg` line the scroll container clips it horizontally, which is the
         // trade a one-line filter row makes. No negative margin — pulling the
         // row wider than its parent is what made every page report 4px of
         // horizontal overflow.
-        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-1 lg:flex-nowrap lg:gap-2 lg:overflow-x-auto">
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-initial lg:flex-nowrap lg:gap-2 lg:overflow-x-auto">
           {filters}
         </div>
       )}