@abgov/jsonforms-components 2.81.5 → 2.81.6

package/index.esm.js

@@ -12557,7 +12557,8 @@ let _$8 = t => t,
   _t30,
   _t31,
   _t32,
-  _t33;
+  _t33,
+  _t34;
 const DeleteDialogContent = styled.div(_t$9 || (_t$9 = _$8`
   margin-bottom: var(--goa-space-m);
 `));
@@ -12630,6 +12631,12 @@ const RowFlex = styled.div(_t11$1 || (_t11$1 = _$8`
   margin: 1.5rem 0 1.5rem 0;
 
   align-items: flex-start;
+
+  /* The list and detail panes need more room than a phone has, so they stack. */
+  @media (max-width: 639px) {
+    flex-direction: column;
+    align-items: stretch;
+  }
 `));
 const RowFlexMenuMain = styled.div(_t12$1 || (_t12$1 = _$8`
   display: flex;
@@ -12668,6 +12675,10 @@ const FlexTabs = styled.div(_t14$1 || (_t14$1 = _$8`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
+
+  @media (max-width: 639px) {
+    flex: none;
+  }
 `));
 const FlexTabsWithMargin = styled.div(_t15$1 || (_t15$1 = _$8`
   flex-direction: column;
@@ -12677,12 +12688,25 @@ const FlexTabsWithMargin = styled.div(_t15$1 || (_t15$1 = _$8`
 
   flex-shrink: 1;
   // max-height: 500px;
+
+  /* height overrides the desktop height ListWithDetailControl sets to match the detail pane. */
+  @media (max-width: 639px) {
+    flex: none;
+    height: auto !important;
+    margin-right: 0;
+    margin-bottom: var(--goa-space-m);
+  }
 `));
 const FlexForm = styled.div(_t16$1 || (_t16$1 = _$8`
   flex-direction: column;
   flex: 3;
   flex-shrink: 0;
   overflow-y: visible;
+
+  @media (max-width: 639px) {
+    flex: none;
+    min-width: 0;
+  }
 `));
 const TabName = styled.div(_t17$1 || (_t17$1 = _$8`
   margin: 1rem 0 1rem 1rem;
@@ -12705,6 +12729,11 @@ const UpdateListContainer = styled.div(_t21$1 || (_t21$1 = _$8`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
+
+  @media (max-width: 639px) {
+    box-sizing: border-box;
+    padding: var(--goa-space-m);
+  }
 `));
 styled.div(_t22$1 || (_t22$1 = _$8`
   padding: 0 1.5rem 0 0;
@@ -12767,10 +12796,14 @@ const IconsContainer = styled.div(_t31 || (_t31 = _$8`
   gap: var(--goa-space-xs);
   padding-bottom: var(--goa-space-xs);
 `));
-const TableContentContainer = styled.div(_t32 || (_t32 = _$8`
+/* A row of inputs can't wrap, so a wide table scrolls here rather than widening the form. */
+const TableScrollContainer = styled.div(_t32 || (_t32 = _$8`
+  overflow-x: auto;
+`));
+const TableContentContainer = styled.div(_t33 || (_t33 = _$8`
   padding: var(--goa-space-l);
 `));
-const NoDataMessage = styled.div(_t33 || (_t33 = _$8`
+const NoDataMessage = styled.div(_t34 || (_t34 = _$8`
   padding: var(--goa-space-xl) var(--goa-space-l);
   color: var(--goa-color-greyscale-700);
   font: var(--goa-typography-body-m);
@@ -16320,10 +16353,12 @@ const NonEmptyRowComponent = ({
       children: jsx("div", {
         children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
       })
-    }) : jsx(GoabContainer, {
-      children: jsx("div", {
+    }) : jsx(TableScrollContainer, {
+      children: jsx(GoabContainer, {
         children: jsx("div", {
-          children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
+          children: jsx("div", {
+            children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
+          })
         })
       })
     }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.81.5",
+  "version": "2.81.6",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-11-05T21:07:34.083Z",
-  "sourceCommit": "f7881913f0f16c05af64964094904d1a5fe1210a",
+  "generatedAt": "2026-11-06T15:41:56.117Z",
+  "sourceCommit": "e16e5d41d6e1384f25448a09cb3e40970a2c015d",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 23,
   "renderers": [

package/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -31,5 +31,6 @@ export declare const HilightCellWarning: import("styled-components/dist/types").
 export declare const FixTableHeaderAlignment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ListWithDetailsReviewCellDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const IconsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TableScrollContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const TableContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const NoDataMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;