@podoba/react 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.25",
+	"version": "0.0.27",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.25",
-		"@podoba/tailwind": "^0.0.25",
+		"@podoba/tokens": "^0.0.27",
+		"@podoba/tailwind": "^0.0.27",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/brand-page-header.tsx

@@ -94,8 +94,8 @@ export function BrandPageHeader({
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
-				<div className="flex min-w-0 flex-col gap-1">
+			<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-4">
+				<div className="flex min-w-0 flex-1 flex-col gap-1">
 					{breadcrumbs && breadcrumbs.length > 0 ? (
 						<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-compact text-fg-muted">
 							{breadcrumbs.map((crumb, i) => (
@@ -133,7 +133,8 @@ export function BrandPageHeader({
 				</div>
 
 				{cta ? (
-					<div className="w-full shrink-0 sm:w-auto sm:min-w-[360px]">{cta}</div>
+					// Hero CTA spans 4 of 12 columns (one third) — the greeting takes the rest.
+					<div className="w-full shrink-0 sm:w-1/3">{cta}</div>
 				) : ctaLabel ? (
 					<div className="shrink-0">
 						{hasExpandable ? (

package/src/components/context-menu.tsx

@@ -95,6 +95,34 @@ interface ContextMenuWrapperProps {
 	className?: string
 }
 
+/**
+ * Lock page scroll while the menu is open — an open action menu should pin the view
+ * (gs `ContextActionPanel` behaviour), not let the content scroll out from under the
+ * cursor-anchored panel. Wheel + touch scrolling is prevented everywhere EXCEPT inside
+ * `allowRef` (the panel itself, so a long/overflowing menu still scrolls). No dep on
+ * react-aria's `usePreventScroll` (not a direct dependency here).
+ */
+function useScrollLock(active: boolean, allowRef: React.RefObject<HTMLElement | null>): void {
+	useEffect(() => {
+		if (!active) {
+			return
+		}
+		const prevent = (e: Event) => {
+			const target = e.target as Node | null
+			if (target && allowRef.current?.contains(target)) {
+				return
+			}
+			e.preventDefault()
+		}
+		document.addEventListener('wheel', prevent, { passive: false })
+		document.addEventListener('touchmove', prevent, { passive: false })
+		return () => {
+			document.removeEventListener('wheel', prevent)
+			document.removeEventListener('touchmove', prevent)
+		}
+	}, [active, allowRef])
+}
+
 const itemId = (item: ContextMenuItem, fallback: number): string => item.id ?? item.key ?? String(fallback)
 const groupId = (group: ContextMenuGroup, fallback: number): string => group.id ?? group.key ?? String(fallback)
 
@@ -202,7 +230,10 @@ function ControlledContextMenu({
 	className,
 }: ContextMenuProps): React.JSX.Element | null {
 	const anchorRef = useRef<HTMLSpanElement>(null)
+	const popoverRef = useRef<HTMLElement>(null)
 	const visibleGroups = visibleGroupsOf(groups)
+	// Lock scroll while open (hook runs unconditionally — before the empty-groups return).
+	useScrollLock(isOpen && visibleGroups.length > 0, popoverRef)
 	if (visibleGroups.length === 0) {
 		return null
 	}
@@ -219,6 +250,7 @@ function ControlledContextMenu({
 			/>
 			<RACPopover
 				key={`${pos.x}:${pos.y}`}
+				ref={popoverRef}
 				isOpen={isOpen}
 				onOpenChange={(open) => {
 					if (!open) {
@@ -315,6 +347,8 @@ function WrapperContextMenu({
 
 	const sourceGroups = typeof groups === 'function' ? resolved : groups
 	const visibleGroups = visibleGroupsOf(sourceGroups)
+	// Lock scroll while the panel is open (still scrollable inside a long menu).
+	useScrollLock(isOpen && visibleGroups.length > 0, popoverRef)
 
 	return (
 		<div ref={wrapperRef} className={className} onContextMenu={onContextMenu}>

package/src/components/cta-pill.tsx

@@ -26,8 +26,8 @@ export interface CtaPillProps {
 
 export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
 	return (
-		<div className="flex min-w-[560px] items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
-			<p className="text-heading4 font-medium leading-[22px] tracking-normal text-fg">
+		<div className="flex w-full items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
+			<p className="min-w-0 text-heading4 font-medium leading-[22px] tracking-normal text-fg">
 				{lead} <span className="font-semibold text-white">{emphasis}</span> {tail}
 			</p>
 			<div className="shrink-0">{children}</div>