@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/jsx/layouts/page.mjs

@@ -1,11 +1,26 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { H1, H2, Paragraph, ScrollView, Separator, XStack, YStack } from "tamagui";
-import { componentColors } from "../componentColors.mjs";
+import { hairline, layoutBreakpoints, readingWidthStyle, useResolvedKnobs } from "@multiplatform.one/theme";
+import { H1, H2, H3, H4, H5, H6, Paragraph, ScrollView, Separator, XStack, YStack, isWeb } from "tamagui";
+import { componentColors, sectionHeading } from "../componentColors.mjs";
+import { PageHeadingScope, useRegisterPageHeading } from "./pageHeadingScope.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+const PAGE_HEADING_TAGS = {
+  1: H1,
+  2: H2,
+  3: H3,
+  4: H4,
+  5: H5,
+  6: H6
+};
+const subtitleSizeMap = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+const CONTENT_MAX_WIDTH = layoutBreakpoints.xl;
 function Screen({
   children,
   scroll = true,
-  maxWidth = 1200,
+  maxWidth = CONTENT_MAX_WIDTH,
   bleed = false,
   noPadding = false,
   scrollViewProps,
@@ -24,7 +39,9 @@ function Screen({
     ...(noPadding ? null : knobProps.panelPadding),
     ...knobProps.gapLg,
     ...rest,
-    children
+    children: /* @__PURE__ */jsx(PageHeadingScope, {
+      children
+    })
   });
   if (!scroll) {
     return /* @__PURE__ */jsx(YStack, {
@@ -36,6 +53,9 @@ function Screen({
   return /* @__PURE__ */jsx(ScrollView, {
     flex: 1,
     backgroundColor: "$background",
+    contentContainerStyle: {
+      flexGrow: 1
+    },
     ...scrollViewProps,
     children: inner
   });
@@ -46,14 +66,31 @@ function PageHeader({
   heading,
   actions,
   divider = true,
+  headingLevel = 1,
+  titleScale = "display",
   children,
   ...rest
 }) {
   const {
     knobProps
   } = useResolvedKnobs();
-  const titleNode = heading ?? (title ? /* @__PURE__ */jsx(H1, {
+  useRegisterPageHeading({
+    level: headingLevel,
+    component: "PageHeader",
+    label: title,
+    enabled: !heading && !!title
+  });
+  const headingFamily = isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  const TitleTag = PAGE_HEADING_TAGS[headingLevel];
+  const titleSize = titleScale === "moderate" ? {
+    size: "$8"
+  } : null;
+  const titleNode = heading ?? (title ? /* @__PURE__ */jsx(TitleTag, {
     margin: 0,
+    ...titleSize,
+    ...headingFamily,
     children: title
   }) : null);
   return /* @__PURE__ */jsxs(YStack, {
@@ -65,20 +102,29 @@ function PageHeader({
       flexWrap: "wrap",
       ...knobProps.gap,
       children: [titleNode ? /* @__PURE__ */jsx(YStack, {
+        flexShrink: 1,
+        minWidth: 0,
         children: titleNode
       }) : null, actions ? /* @__PURE__ */jsx(XStack, {
         ...knobProps.gap,
         alignItems: "center",
         flexWrap: "wrap",
+        flexShrink: 1,
+        minWidth: 0,
         children: actions
       }) : null]
-    }), subtitle ? /* @__PURE__ */jsx(Paragraph, {
+    }), subtitle ?
+    // Lede rides one step above the size-knob body scale (medium keeps
+    // the previous $5), so the size knob reaches the header copy (LC-18).
+    /* @__PURE__ */
+    jsx(Paragraph, {
       color: componentColors.text.muted,
-      size: "$5",
+      size: subtitleSizeMap[knobProps.sizeToken] ?? "$5",
       margin: 0,
       children: subtitle
     }) : null, children, divider ? /* @__PURE__ */jsx(Separator, {
-      borderColor: componentColors.divider
+      ...hairline.line,
+      backgroundColor: componentColors.divider
     }) : null]
   });
 }
@@ -88,38 +134,51 @@ function PageSection({
   heading,
   divider = true,
   surface = false,
+  headingLevel = 2,
   children,
   ...rest
 }) {
   const {
     knobProps
   } = useResolvedKnobs();
-  const headingNode = heading ?? (title ? /* @__PURE__ */jsx(H2, {
+  const headingFamily = isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  const SectionTag = PAGE_HEADING_TAGS[headingLevel];
+  const headingNode = heading ?? (title ? /* @__PURE__ */jsx(SectionTag, {
     margin: 0,
+    ...headingFamily,
+    ...sectionHeading,
     children: title
   }) : null);
   const surfaceProps = surface ? {
-    backgroundColor: componentColors.surface.background,
-    borderRadius: "$4",
-    borderWidth: 1,
-    borderColor: componentColors.surface.border,
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
     ...knobProps.panelPadding
   } : {};
+  const headerBlock = headingNode || description ? /* @__PURE__ */jsxs(YStack, {
+    gap: "$2",
+    children: [headingNode, description ?
+    // Section copy follows the size-knob body scale (medium = $4).
+    /* @__PURE__ */
+    jsx(Paragraph, {
+      color: componentColors.text.muted,
+      size: knobProps.sizeToken,
+      margin: 0,
+      children: description
+    }) : null, divider ? /* @__PURE__ */jsx(Separator, {
+      ...hairline.line,
+      backgroundColor: componentColors.divider
+    }) : null]
+  }) : null;
   return /* @__PURE__ */jsxs(YStack, {
     ...knobProps.gap,
-    ...surfaceProps,
     ...rest,
-    children: [headingNode || description ? /* @__PURE__ */jsxs(YStack, {
-      gap: "$2",
-      children: [headingNode, description ? /* @__PURE__ */jsx(Paragraph, {
-        color: componentColors.text.muted,
-        size: "$4",
-        margin: 0,
-        children: description
-      }) : null, divider ? /* @__PURE__ */jsx(Separator, {
-        borderColor: componentColors.divider
-      }) : null]
-    }) : null, children]
+    children: [headerBlock, surface ? /* @__PURE__ */jsx(YStack, {
+      ...knobProps.gap,
+      ...surfaceProps,
+      children
+    }) : children]
   });
 }
 function EmptyState({
@@ -127,28 +186,65 @@ function EmptyState({
   description,
   icon,
   action,
+  compact = false,
+  intent = "neutral",
   children,
   ...rest
 }) {
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    compact
+  });
+  const headingFamily = isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
   return /* @__PURE__ */jsxs(YStack, {
-    flex: 1,
+    flex: compact ? void 0 : 1,
     alignItems: "center",
     justifyContent: "center",
+    "data-empty-intent": intent,
     ...knobProps.panelPadding,
     ...knobProps.gap,
     ...rest,
-    children: [icon, /* @__PURE__ */jsx(H2, {
+    children: [icon ? /* @__PURE__ */jsx(YStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "$color3",
+      padding: knobProps.sizeToken,
+      borderRadius: 1e3,
+      children: icon
+    }) : null, compact ? /* @__PURE__ */jsx(Paragraph, {
+      color: componentColors.text.muted,
+      textAlign: "center",
+      margin: 0,
+      ...(!isWeb && {
+        numberOfLines: 2,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.55
+      }),
+      children: title
+    }) : /* @__PURE__ */jsx(H2, {
+      ...headingFamily,
       textAlign: "center",
       margin: 0,
+      fontWeight: "600",
+      $sm: {
+        fontSize: "$8",
+        lineHeight: 42
+      },
+      ...(!isWeb && {
+        numberOfLines: 2,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.55
+      }),
       children: title
     }), description ? /* @__PURE__ */jsx(Paragraph, {
       color: componentColors.text.muted,
+      size: knobProps.sizeToken,
       textAlign: "center",
-      maxWidth: 520,
       margin: 0,
+      ...readingWidthStyle(),
       children: description
     }) : null, action, children]
   });
@@ -165,18 +261,26 @@ function ScreenToolbar({
   return /* @__PURE__ */jsxs(XStack, {
     justifyContent: "space-between",
     alignItems: "center",
+    flexWrap: "wrap",
     ...knobProps.gap,
     ...rest,
     children: [/* @__PURE__ */jsx(XStack, {
       ...knobProps.gap,
       alignItems: "center",
+      flexWrap: "wrap",
+      flexShrink: 1,
+      minWidth: 0,
       children: leading
     }), children, /* @__PURE__ */jsx(XStack, {
       ...knobProps.gap,
       alignItems: "center",
+      flexWrap: "wrap",
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "flex-end",
       children: trailing
     })]
   });
 }
-export { EmptyState, PageHeader, PageSection, Screen, ScreenToolbar };
+export { CONTENT_MAX_WIDTH, EmptyState, PageHeader, PageSection, Screen, ScreenToolbar };
 //# sourceMappingURL=page.mjs.map

package/dist/jsx/layouts/page.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","H1","H2","Paragraph","ScrollView","Separator","XStack","YStack","componentColors","jsx","jsxs","Screen","children","scroll","maxWidth","bleed","noPadding","scrollViewProps","rest","knobProps","inner","flex","width","alignSelf","panelPadding","gapLg","backgroundColor","PageHeader","title","subtitle","heading","actions","divider","titleNode","margin","gap","justifyContent","alignItems","flexWrap","color","text","muted","size","borderColor","PageSection","description","surface","headingNode","surfaceProps","background","borderRadius","borderWidth","border","EmptyState","icon","action","textAlign","ScreenToolbar","leading","trailing"],"sources":["../../../src/layouts/page.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["hairline","layoutBreakpoints","readingWidthStyle","useResolvedKnobs","H1","H2","H3","H4","H5","H6","Paragraph","ScrollView","Separator","XStack","YStack","isWeb","componentColors","sectionHeading","PageHeadingScope","useRegisterPageHeading","jsx","jsxs","PAGE_HEADING_TAGS","subtitleSizeMap","$3","$4","$5","CONTENT_MAX_WIDTH","xl","Screen","children","scroll","maxWidth","bleed","noPadding","scrollViewProps","rest","knobProps","inner","flex","width","alignSelf","panelPadding","gapLg","backgroundColor","contentContainerStyle","flexGrow","PageHeader","title","subtitle","heading","actions","divider","headingLevel","titleScale","level","component","label","enabled","headingFamily","fontFamily","TitleTag","titleSize","size","titleNode","margin","gap","justifyContent","alignItems","flexWrap","flexShrink","minWidth","color","text","muted","sizeToken","line","PageSection","description","surface","SectionTag","headingNode","surfaceProps","containerRadius","headerBlock","EmptyState","icon","action","compact","intent","padding","borderRadius","textAlign","numberOfLines","adjustsFontSizeToFit","minimumFontScale","fontWeight","$sm","fontSize","lineHeight","ScreenToolbar","leading","trailing"],"sources":["../../../src/layouts/page.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/layouts/page.native.js

@@ -24,6 +24,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var page_exports = {};
 __export(page_exports, {
+  CONTENT_MAX_WIDTH: () => CONTENT_MAX_WIDTH,
   EmptyState: () => EmptyState,
   PageHeader: () => PageHeader,
   PageSection: () => PageSection,
@@ -35,11 +36,26 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.native.js");
+var import_pageHeadingScope = require("./pageHeadingScope.native.js");
+var PAGE_HEADING_TAGS = {
+  1: import_tamagui.H1,
+  2: import_tamagui.H2,
+  3: import_tamagui.H3,
+  4: import_tamagui.H4,
+  5: import_tamagui.H5,
+  6: import_tamagui.H6
+};
+var subtitleSizeMap = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+var CONTENT_MAX_WIDTH = import_theme.layoutBreakpoints.xl;
 function Screen(param) {
   var {
     children,
     scroll = true,
-    maxWidth = 1200,
+    maxWidth = CONTENT_MAX_WIDTH,
     bleed = false,
     noPadding = false,
     scrollViewProps,
@@ -58,7 +74,10 @@ function Screen(param) {
     ...(noPadding ? null : knobProps.panelPadding),
     ...knobProps.gapLg,
     ...rest,
-    children
+    children: (/* DG-A11Y-02: one h1 budget per Screen — catalog headings register here. */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_pageHeadingScope.PageHeadingScope, {
+      children
+    }))
   });
   if (!scroll) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -70,6 +89,11 @@ function Screen(param) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
     flex: 1,
     backgroundColor: "$background",
+    // flexGrow lets flex:1 children (e.g. EmptyState centering) fill the
+    // viewport when the content is shorter than the screen.
+    contentContainerStyle: {
+      flexGrow: 1
+    },
     ...scrollViewProps,
     children: inner
   });
@@ -81,14 +105,32 @@ function PageHeader(param) {
     heading,
     actions,
     divider = true,
+    headingLevel = 1,
+    titleScale = "display",
     children,
     ...rest
   } = param;
+  var _subtitleSizeMap_knobProps_sizeToken;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var titleNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
+  (0, import_pageHeadingScope.useRegisterPageHeading)({
+    level: headingLevel,
+    component: "PageHeader",
+    label: title,
+    enabled: !heading && !!title
+  });
+  var headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  var TitleTag = PAGE_HEADING_TAGS[headingLevel];
+  var titleSize = titleScale === "moderate" ? {
+    size: "$8"
+  } : null;
+  var titleNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TitleTag, {
     margin: 0,
+    ...titleSize,
+    ...headingFamily,
     children: title
   }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
@@ -99,21 +141,35 @@ function PageHeader(param) {
       alignItems: "center",
       flexWrap: "wrap",
       ...knobProps.gap,
-      children: [titleNode ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      children: [
+      /* LC-10 FRAME-CONTAINMENT: title + actions must shrink and wrap at
+      narrow widths instead of painting past the frame. flexShrink:1 +
+      minWidth:0 lets the H1 wrap (DF-02) and each action wrap below the
+      title rather than clip off-canvas (DF-01). */
+      titleNode ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flexShrink: 1,
+        minWidth: 0,
         children: titleNode
       }) : null, actions ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
         ...knobProps.gap,
         alignItems: "center",
         flexWrap: "wrap",
+        flexShrink: 1,
+        minWidth: 0,
         children: actions
       }) : null]
-    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+    }), subtitle ?
+    // Lede rides one step above the size-knob body scale (medium keeps
+    // the previous $5), so the size knob reaches the header copy (LC-18).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
       color: import_componentColors.componentColors.text.muted,
-      size: "$5",
+      size: (_subtitleSizeMap_knobProps_sizeToken = subtitleSizeMap[knobProps.sizeToken]) !== null && _subtitleSizeMap_knobProps_sizeToken !== void 0 ? _subtitleSizeMap_knobProps_sizeToken : "$5",
       margin: 0,
       children: subtitle
     }) : null, children, divider ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-      borderColor: import_componentColors.componentColors.divider
+      ...import_theme.hairline.line,
+      backgroundColor: import_componentColors.componentColors.divider
     }) : null]
   });
 }
@@ -124,38 +180,51 @@ function PageSection(param) {
     heading,
     divider = true,
     surface = false,
+    headingLevel = 2,
     children,
     ...rest
   } = param;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var headingNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+  var headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  var SectionTag = PAGE_HEADING_TAGS[headingLevel];
+  var headingNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionTag, {
     margin: 0,
+    ...headingFamily,
+    ...import_componentColors.sectionHeading,
     children: title
   }) : null;
   var surfaceProps = surface ? {
-    backgroundColor: import_componentColors.componentColors.surface.background,
-    borderRadius: "$4",
-    borderWidth: 1,
-    borderColor: import_componentColors.componentColors.surface.border,
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
     ...knobProps.panelPadding
   } : {};
+  var headerBlock = headingNode || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$2",
+    children: [headingNode, description ?
+    // Section copy follows the size-knob body scale (medium = $4).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      color: import_componentColors.componentColors.text.muted,
+      size: knobProps.sizeToken,
+      margin: 0,
+      children: description
+    }) : null, divider ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      ...import_theme.hairline.line,
+      backgroundColor: import_componentColors.componentColors.divider
+    }) : null]
+  }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
-    ...surfaceProps,
     ...rest,
-    children: [headingNode || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$2",
-      children: [headingNode, description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-        color: import_componentColors.componentColors.text.muted,
-        size: "$4",
-        margin: 0,
-        children: description
-      }) : null, divider ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-        borderColor: import_componentColors.componentColors.divider
-      }) : null]
-    }) : null, children]
+    children: [headerBlock, surface ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.gap,
+      ...surfaceProps,
+      children
+    }) : children]
   });
 }
 function EmptyState(param) {
@@ -164,28 +233,73 @@ function EmptyState(param) {
     description,
     icon,
     action,
+    compact = false,
+    intent = "neutral",
     children,
     ...rest
   } = param;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    flex: 1,
+    flex: compact ? void 0 : 1,
     alignItems: "center",
     justifyContent: "center",
+    "data-empty-intent": intent,
     ...knobProps.panelPadding,
     ...knobProps.gap,
     ...rest,
-    children: [icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+    children: [icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "$color3",
+      // R-PILL icon well: always a circle; its inset scales with the
+      // size knob (spec: empty icon well consumes sizeToken).
+      padding: knobProps.sizeToken,
+      borderRadius: 1e3,
+      children: icon
+    }) : null,
+    /* RN has no hyphenation, so a long single word (brand names, ids)
+    character-wraps and orphans its tail on phone widths. $sm steps the
+    42px H2 down on web; native scales the text to FIT instead
+    (adjustsFontSizeToFit) -- deterministic at any width, no media
+    dependency. */
+    compact ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      color: import_componentColors.componentColors.text.muted,
       textAlign: "center",
       margin: 0,
+      ...(!import_tamagui.isWeb && {
+        numberOfLines: 2,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.55
+      }),
+      children: title
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+      ...headingFamily,
+      textAlign: "center",
+      margin: 0,
+      fontWeight: "600",
+      $sm: {
+        fontSize: "$8",
+        lineHeight: 42
+      },
+      ...(!import_tamagui.isWeb && {
+        numberOfLines: 2,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.55
+      }),
       children: title
     }), description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
       color: import_componentColors.componentColors.text.muted,
+      size: knobProps.sizeToken,
       textAlign: "center",
-      maxWidth: 520,
       margin: 0,
+      ...(0, import_theme.readingWidthStyle)(),
       children: description
     }) : null, action, children]
   });
@@ -203,15 +317,23 @@ function ScreenToolbar(param) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     justifyContent: "space-between",
     alignItems: "center",
+    flexWrap: "wrap",
     ...knobProps.gap,
     ...rest,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       ...knobProps.gap,
       alignItems: "center",
+      flexWrap: "wrap",
+      flexShrink: 1,
+      minWidth: 0,
       children: leading
     }), children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       ...knobProps.gap,
       alignItems: "center",
+      flexWrap: "wrap",
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "flex-end",
       children: trailing
     })]
   });