@estiva-app/ui 0.37.0 → 0.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.37.0",
+  "version": "0.37.1",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.37.0",
+    "packageVersion": "0.37.1",
     "exports": 88,
     "typeExports": 97,
     "files": null

package/src/Panel.stories.tsx

@@ -84,6 +84,19 @@ export const TwoInAColumn: Story = {
   ),
 }
 
+/** In a plain box with a height, not a flex column: it still fills it, and the body still scrolls. */
+export const InAPlainBox: Story = {
+  decorators: [
+    (Story) => (
+      <div className="h-[560px] w-[380px] border-l border-border-subtle bg-bg-surface">
+        {Story()}
+      </div>
+    ),
+  ],
+  parameters: { layout: 'fullscreen' },
+  render: (args) => <Panel {...args}>{paragraphs(14)}</Panel>,
+}
+
 function Broken(): never {
   throw new Error('The body could not draw itself')
 }

package/src/Panel.tsx

@@ -17,9 +17,12 @@ import { ScrollArea } from './ScrollArea'
  * nothing to scroll. Here the body is always a `ScrollArea`, so the bar shows
  * as soon as there is more, and an empty panel or a short one has none.
  *
- * It takes the room its column gives it (`flex-1 min-h-0`), never its content's
- * height, so the body is what scrolls, not the page. Two panels in one column
- * share it; a `max-h-*` in `className` caps one of them.
+ * It takes the room it is given, never its content's height, so the body is
+ * what scrolls, not the page: the rest of a flex column (`flex-1 min-h-0`), or
+ * the whole of a plain box with a height (`h-full`). The second was missing in
+ * 0.37.0, and a panel in a plain box grew past it: Peek's thread story pushed
+ * its reply box out of its frame. Two panels in one column share it; a
+ * `max-h-*` in `className` caps one of them.
  *
  * It keeps a crash inside itself, as ListColumn does: if its body, its actions
  * or its footer break, the panel keeps its title and shows `ErrorBoundary`'s
@@ -48,7 +51,7 @@ export interface PanelProps {
 
 function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }: PanelProps & { broken?: boolean }) {
   return (
-    <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
+    <div className={cn('flex h-full min-h-0 flex-1 flex-col', className)}>
       <ContainerHeader title={title} chevron={chevron} actions={actions} />
       {broken ? (
         // The message takes the room the body had and centres itself in it.