@r2digisolutions/components 0.17.9 → 0.17.11

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

@@ -30,6 +30,9 @@
 		suggestions?: string[];
 		/** Chips shown under the conversation (after the user has messages). */
 		followUpSuggestions?: string[];
+		/** Active CRM query, shown under the header (e.g. «Presupuestos · María · el mes pasado»). */
+		contextLabel?: string;
+		contextAriaLabel?: string;
 		messages?: AssistantMessage[];
 		draft?: string;
 		loading?: boolean;
@@ -69,6 +72,8 @@
 		emptyHint = '¿En qué puedo ayudarte?',
 		suggestions = [],
 		followUpSuggestions = [],
+		contextLabel = '',
+		contextAriaLabel = '',
 		messages = [],
 		draft = $bindable(''),
 		loading = false,
@@ -188,7 +193,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"
@@ -229,6 +234,16 @@
 		</IconButton>
 	</header>
 
+	{#if contextLabel}
+		<div
+			class="border-border bg-surface-overlay px-3 py-1.5 leading-snug text-muted truncate border-b text-[11px]"
+			title={contextLabel}
+			aria-label={contextAriaLabel || contextLabel}
+		>
+			{contextLabel}
+		</div>
+	{/if}
+
 	<!-- Body -->
 	<div bind:this={scrollEl} class="min-h-0 px-3 py-3 flex-1 overflow-y-auto">
 		{#if isEmpty}

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

@@ -13,6 +13,9 @@ interface AssistantChatProps {
     suggestions?: string[];
     /** Chips shown under the conversation (after the user has messages). */
     followUpSuggestions?: string[];
+    /** Active CRM query, shown under the header (e.g. «Presupuestos · María · el mes pasado»). */
+    contextLabel?: string;
+    contextAriaLabel?: string;
     messages?: AssistantMessage[];
     draft?: string;
     loading?: boolean;

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.9",
+	"version": "0.17.11",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",