@r2digisolutions/components 0.17.8 → 0.17.10

package/dist/components/molecules/Card/Card.svelte

@@ -44,14 +44,6 @@
 		lg: 'px-5 py-5 sm:px-6 sm:py-6'
 	};
 
-	/** Lets nested `FormActions variant="bar"` bleed to the card edges. */
-	const contentPadVars: Record<CardPadding, string> = {
-		none: '',
-		sm: '[--card-pad-x:0.75rem] [--card-pad-y:0.625rem]',
-		md: '[--card-pad-x:1rem] [--card-pad-y:0.875rem] sm:[--card-pad-x:1.25rem] sm:[--card-pad-y:1rem]',
-		lg: '[--card-pad-x:1.25rem] [--card-pad-y:1.25rem] sm:[--card-pad-x:1.5rem] sm:[--card-pad-y:1.5rem]'
-	};
-
 	const isClickable = $derived(!!onclick || hoverable);
 </script>
 
@@ -89,8 +81,7 @@
 		<div
 			class={[
 				'flex min-w-0 flex-1 flex-col',
-				padding !== 'none' ? paddingClasses[padding] : '',
-				padding !== 'none' ? contentPadVars[padding] : ''
+				padding !== 'none' ? paddingClasses[padding] : ''
 			]}
 		>
 			{@render children()}

package/dist/components/molecules/FormActions/FormActions.svelte

@@ -74,12 +74,11 @@
 	class={[
 		'gap-3 sm:flex-row sm:items-center flex w-full flex-col',
 		alignClasses[align],
-		variant === 'bar' &&
-			[
-				// Bleed through Card body padding when `--card-pad-*` is set; no-op otherwise.
-				'-mx-[length:var(--card-pad-x,0px)] -mb-[length:var(--card-pad-y,0px)]',
-				'rounded-b-2xl border-t border-border bg-surface/50 px-4 py-3 sm:px-5'
-			],
+		/**
+		 * `bar` is for a sibling of the padded body (Card `footer` snippet, or
+		 * padding="none" + manual body pad). Never nest `bar` inside Card body padding.
+		 */
+		variant === 'bar' && 'rounded-b-2xl border-t border-border bg-surface/50 px-4 py-3 sm:px-5',
 		variant === 'sticky' &&
 			'border-border bg-surface-elevated/95 px-4 py-3 backdrop-blur-md dark:shadow-black/30 sm:px-5 shrink-0 border-t shadow-[0_-8px_24px_rgb(0,0,0,0.06)]',
 		variant === 'plain' && 'gap-2',

package/dist/components/molecules/WidgetFrame/WidgetFrame.svelte

@@ -485,6 +485,18 @@
 			: [];
 		return [...base, 'h-auto', 'max-h-fit', 'w-full', 'shrink-0'].join(' ');
 	});
+
+	/** Content-sized frames (e.g. DashboardGrid stacked KPIs) must not clip or scroll the body. */
+	const contentFit = $derived(
+		collapsed ||
+			(typeof className === 'string' &&
+				className
+					.split(/\s+/)
+					.some((token) => token === 'h-auto' || token === 'max-h-fit'))
+	);
+	const bodyOverflowClass = $derived(
+		contentFit ? 'overflow-visible' : flush ? 'overflow-hidden' : 'overflow-auto'
+	);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -607,7 +619,14 @@
 	{/if}
 
 	{#if !collapsed}
-		<div class={['min-h-0 relative flex-1', flush ? 'p-0 overflow-hidden' : 'p-3 overflow-auto']}>
+		<div
+			class={[
+				'relative',
+				contentFit ? 'flex-none' : 'min-h-0 flex-1',
+				flush ? 'p-0' : 'p-3',
+				bodyOverflowClass
+			]}
+		>
 			{#if busy}
 				{#if loadingMode === 'spinner'}
 					<div

package/dist/components/organisms/AssistantChat/AssistantChat.svelte

@@ -188,7 +188,7 @@
 
 <div
 	class={[
-		'rounded-2xl border-border bg-surface-elevated shadow-xl flex h-[min(560px,70vh)] w-[min(420px,calc(100vw-2rem))] shrink-0 flex-col overflow-hidden border',
+		'rounded-2xl border-border bg-surface-elevated shadow-xl flex h-[min(560px,calc(100dvh-5.5rem))] max-h-[calc(100dvh-5.5rem)] w-[min(420px,calc(100vw-2rem))] shrink-0 flex-col overflow-hidden border',
 		className
 	]}
 	role="complementary"

package/dist/components/organisms/DashboardGrid/DashboardGrid.stories.js

@@ -7,7 +7,7 @@ const meta = {
         layout: 'padded',
         docs: {
             description: {
-                component: 'Responsive dashboard grid. Use `stackBelow` (default `960`, or `false` to disable) to collapse into a single-column reading-order stack when the **grid container** is narrow (ResizeObserver; sidebar-aware). Drag/resize are disabled while stacked.'
+                component: 'Responsive dashboard grid. Use `stackBelow` (default `960`, or `false` to disable) to collapse into a single-column reading-order stack when the **grid container** is narrow (ResizeObserver; sidebar-aware). While stacked, all widgets size to content (desktop row spans ignored) so the page has a single scroll. Drag/resize are disabled while stacked.'
             }
         }
     },

package/dist/components/organisms/DashboardGrid/DashboardGrid.svelte

@@ -482,9 +482,8 @@
 
 	function styleFor(item: GridItem): string {
 		if (stacked) {
-			// Prefer content height; keep a floor from the saved desktop span.
-			const minH = Math.max(item.h * rowHeight, 160);
-			return `width:100%;min-height:${minH}px;height:auto;`;
+			// Tablet/narrow: ignore desktop row spans entirely — one page scroll, no nested card scroll.
+			return 'width:100%;height:auto;';
 		}
 		const x = item.x + 1;
 		const y = item.y + 1;
@@ -666,7 +665,7 @@
 						loading={meta.loading}
 						empty={meta.empty}
 						onreload={meta.onReload}
-						class={stacked ? 'min-h-full w-full' : 'h-full w-full'}
+						class={stacked ? 'h-auto w-full' : 'h-full w-full'}
 						ondragstart={(e) => onDragStart(item.id, e)}
 						onresizestart={(e, edge) => onResizeStart(item.id, e, edge)}
 					>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.17.8",
+	"version": "0.17.10",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",