@x33025/sveltely 0.1.23 → 0.1.25

package/dist/components/Library/VStack/VStack.svelte

@@ -11,7 +11,7 @@
 		StyleProps &
 		LoaderProps;
 
-	let { children, ...restProps }: Props = $props();
+	let { children, ...restProps }: Props & Record<string, unknown> = $props();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -22,13 +22,13 @@
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'vstack')].filter(Boolean).join(' ')
 	);
 </script>
 
-<div class="vstack" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
+<div class="vstack" style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -41,7 +41,7 @@
 		--vstack-padding-x: 0px;
 		--vstack-padding-y: 0px;
 		--vstack-font-size: inherit;
-		display: flex;
+		display: inline-flex;
 		min-width: 0;
 		min-height: 0;
 		flex-direction: column;

package/dist/components/Library/VStack/VStack.svelte.d.ts

@@ -5,6 +5,7 @@ import { type StyleProps } from '../../../style/surface';
 type Props = {
     children?: Snippet;
 } & LayoutProps & StyleProps & LoaderProps;
-declare const VStack: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const VStack: import("svelte").Component<$$ComponentProps, {}, "">;
 type VStack = ReturnType<typeof VStack>;
 export default VStack;

package/dist/components/Local/ColorStyleControls.svelte

@@ -2,6 +2,7 @@
 	import Divider from '../Library/Divider';
 	import HStack from '../Library/HStack';
 	import Label from '../Library/Label';
+	import Spacer from '../Library/Spacer';
 	import VStack from '../Library/VStack';
 
 	type Props = {
@@ -29,15 +30,9 @@
 
 <VStack gap={5}>
 	<Label label="Text colors" color="var(--sveltely-text-tertiary-color)" fontSize={7.5} />
-	<Label
-		label="Text primary"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Text primary" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{textPrimaryColor}</span>
 			<input
 				bind:value={textPrimaryColor}
@@ -47,15 +42,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Text secondary"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Text secondary" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{textSecondaryColor}</span>
 			<input
 				bind:value={textSecondaryColor}
@@ -65,15 +54,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Text tertiary"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Text tertiary" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{textTertiaryColor}</span>
 			<input
 				bind:value={textTertiaryColor}
@@ -85,15 +68,9 @@
 	</Label>
 	<Divider />
 	<Label label="Surface colors" color="var(--sveltely-text-tertiary-color)" fontSize={7.5} />
-	<Label
-		label="Background color"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Background color" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{backgroundColor}</span>
 			<input
 				bind:value={backgroundColor}
@@ -103,30 +80,18 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Border color"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Border color" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{borderColor}</span>
 			<input bind:value={borderColor} type="color" aria-label="Border color" class="color-input" />
 		</HStack>
 	</Label>
 	<Divider />
 	<Label label="Control colors" color="var(--sveltely-text-tertiary-color)" fontSize={7.5} />
-	<Label
-		label="Control active"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Control active" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{controlActiveColor}</span>
 			<input
 				bind:value={controlActiveColor}
@@ -136,15 +101,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Control background"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Control background" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{controlBackgroundColor}</span>
 			<input
 				bind:value={controlBackgroundColor}
@@ -154,15 +113,9 @@
 			/>
 		</HStack>
 	</Label>
-	<Label
-		label="Control inactive"
-		orientation="leading"
-		width="100%"
-		align="center"
-		justify="between"
-		gap={5}
-	>
-		<HStack width="100%" align="center" justify="end" gap={5}>
+	<Label label="Control inactive" orientation="leading" width="100%" gap={5}>
+		<HStack width="100%" gap={5}>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{controlInactiveColor}</span>
 			<input
 				bind:value={controlInactiveColor}

package/dist/components/Local/ComponentGrid.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Component } from 'svelte';
-	import Grid from '../Library/Grid';
-	import { GridItem } from '../Library/Grid';
-	import HeroCard from './HeroCard.svelte';
+	import ScrollView, {
+		type ScrollGeometry,
+		type ScrollViewHandle
+	} from '../Library/ScrollView';
+	import ComponentPage, { type ComponentPageEntry } from './ComponentPage.svelte';
 
-	type DemoEntry = {
+	type DemoEntry = ComponentPageEntry & {
 		component: Component;
 		name: string;
 		description: string;
@@ -17,33 +20,102 @@
 	};
 
 	let { demos }: Props = $props();
+
+	let viewport = $state<ScrollViewHandle | null>(null);
+	let page = $state(1);
+	let pageHeight = $state(0);
+	let snapTimeout: ReturnType<typeof setTimeout> | null = null;
+	let snapReleaseTimeout: ReturnType<typeof setTimeout> | null = null;
+	let snapping = $state(false);
+
+	const totalPages = $derived(Math.max(1, demos.length));
+	const safePage = $derived(Math.min(Math.max(page, 1), totalPages));
+	const pagePeek = $derived(pageHeight <= 0 ? 0 : Math.min(72, Math.max(32, pageHeight * 0.08)));
+	const pageStep = $derived(Math.max(1, pageHeight - pagePeek * 2));
+
+	const clampPage = (nextPage: number) => Math.min(Math.max(nextPage, 1), totalPages);
+
+	const scrollToPage = async (nextPage: number) => {
+		const clamped = clampPage(nextPage);
+		if (snapTimeout) {
+			clearTimeout(snapTimeout);
+			snapTimeout = null;
+		}
+		page = clamped;
+		await tick();
+		const height = viewport?.clientHeight || pageHeight;
+		if (!viewport || height <= 0) return;
+		snapping = true;
+		viewport.scrollTo({ top: (clamped - 1) * pageStep, left: 0, behavior: 'smooth' });
+		if (snapReleaseTimeout) clearTimeout(snapReleaseTimeout);
+		snapReleaseTimeout = setTimeout(() => {
+			snapping = false;
+			snapReleaseTimeout = null;
+		}, 320);
+	};
+
+	const schedulePageSnap = (nextPage: number) => {
+		if (snapTimeout) clearTimeout(snapTimeout);
+		snapTimeout = setTimeout(() => {
+			snapTimeout = null;
+			void scrollToPage(nextPage);
+		}, 120);
+	};
+
+	const handleScroll = (geometry: ScrollGeometry) => {
+		pageHeight = geometry.viewport.height;
+		if (geometry.viewport.height <= 0) return;
+		const nextPage = clampPage(Math.round(geometry.offset.y / pageStep) + 1);
+		if (nextPage !== page) page = nextPage;
+		if (snapping) return;
+		const targetOffset = (nextPage - 1) * pageStep;
+		if (Math.abs(geometry.offset.y - targetOffset) > 1) {
+			schedulePageSnap(nextPage);
+		}
+	};
+
+	$effect(() => {
+		if (page === safePage) return;
+		page = safePage;
+	});
+
+	$effect(() => {
+		return () => {
+			if (snapTimeout) clearTimeout(snapTimeout);
+			if (snapReleaseTimeout) clearTimeout(snapReleaseTimeout);
+		};
+	});
 </script>
 
-<div class="component-grid-scroll">
-	<Grid
-		columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
-		autoRows={14}
-		gap={10}
-		paddingX={15}
-		paddingY={15}
-	>
-		{#each demos as entry (entry.name)}
-			{@const DemoComponent = entry.component}
-			<GridItem columnSpan={entry.columnSpan ?? 1} rowSpan={entry.rowSpan ?? 1}>
-				<HeroCard title={entry.name} description={entry.description}>
-					<DemoComponent />
-				</HeroCard>
-			</GridItem>
-		{/each}
-	</Grid>
-</div>
+<ScrollView
+	bind:viewport
+	width="100%"
+	height="100%"
+	onScroll={handleScroll}
+	contentStyles={{
+		paddingX: 0,
+		paddingY: 0
+	}}
+>
+	{#each demos as entry, index (entry.name)}
+		<div
+			class="component-page-slot"
+			class:component-page-slot-active={index + 1 === page}
+			style:height={`${index === demos.length - 1 ? pageHeight : pageStep}px`}
+		>
+			<ComponentPage {entry} height={pageHeight} />
+		</div>
+	{/each}
+</ScrollView>
 
 <style>
-	.component-grid-scroll {
-		width: 100%;
-		height: 100%;
+	.component-page-slot {
+		position: relative;
+		z-index: 1;
 		min-width: 0;
-		min-height: 0;
-		overflow: auto;
+	}
+
+	.component-page-slot-active {
+		z-index: 2;
 	}
 </style>

package/dist/components/Local/ComponentGrid.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'svelte';
-type DemoEntry = {
+import { type ComponentPageEntry } from './ComponentPage.svelte';
+type DemoEntry = ComponentPageEntry & {
     component: Component;
     name: string;
     description: string;

package/dist/components/Local/ComponentPage.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	export type ComponentPageEntry = {
+		component: Component;
+		name: string;
+		description: string;
+	};
+
+	type Props = {
+		entry: ComponentPageEntry;
+		height?: number;
+	};
+
+	let { entry, height }: Props = $props();
+
+	const DemoComponent = $derived(entry.component);
+	const pageStyle = $derived(height ? `height: ${height}px;` : '');
+</script>
+
+<article class="component-page" style={pageStyle}>
+	<header class="component-page-header">
+		<h1>{entry.name}</h1>
+		{#if entry.description}
+			<p>{entry.description}</p>
+		{/if}
+	</header>
+
+	<section class="component-page-stage" aria-label={`${entry.name} demo`}>
+		<DemoComponent />
+	</section>
+</article>
+
+<style>
+	.component-page {
+		display: flex;
+		min-height: min(42rem, calc(100svh - 8rem));
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--sveltely-gap);
+		padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);
+	}
+
+	.component-page-header {
+		display: grid;
+		gap: calc(var(--sveltely-gap) * 0.5);
+		min-width: 0;
+	}
+
+	h1 {
+		color: var(--sveltely-text-primary-color);
+		font-size: calc(var(--sveltely-font-size) * 1.6);
+		font-weight: 650;
+		line-height: 1.1;
+	}
+
+	p {
+		max-width: 48rem;
+		color: var(--sveltely-text-secondary-color);
+		font-size: calc(var(--sveltely-font-size) * 0.95);
+		line-height: 1.45;
+	}
+
+	.component-page-stage {
+		display: grid;
+		min-width: 0;
+		min-height: 0;
+		flex: 1 1 0;
+		place-items: center;
+		overflow: auto;
+		background: var(--sveltely-background-color);
+		padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);
+	}
+</style>

package/dist/components/Local/ComponentPage.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+export type ComponentPageEntry = {
+    component: Component;
+    name: string;
+    description: string;
+};
+type Props = {
+    entry: ComponentPageEntry;
+    height?: number;
+};
+declare const ComponentPage: Component<Props, {}, "">;
+type ComponentPage = ReturnType<typeof ComponentPage>;
+export default ComponentPage;

package/dist/components/Local/HeroCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import HStack from '../Library/HStack';
 	import VStack from '../Library/VStack';
 
 	type Props = {
@@ -13,10 +12,7 @@
 </script>
 
 <VStack
-	minHeight={14}
 	height="100%"
-	shrink={0}
-	align="stretch"
 	gap={5}
 	border="1px solid var(--sveltely-border-color)"
 	borderRadius={7.5}
@@ -34,9 +30,9 @@
 	{/if}
 	<div class="hero-card-content">
 		{#if children}
-			<HStack width="100%" height="100%" minWidth="min-content" align="center" justify="center">
+			<div class="hero-card-inner">
 				{@render children()}
-			</HStack>
+			</div>
 		{/if}
 	</div>
 </VStack>
@@ -57,4 +53,12 @@
 		flex: 1 1 0;
 		overflow: hidden;
 	}
+
+	.hero-card-inner {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+	}
 </style>

package/dist/components/Local/LayoutStyleControls.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import HStack from '../Library/HStack';
 	import Slider from '../Library/Slider';
+	import Spacer from '../Library/Spacer';
 	import VStack from '../Library/VStack';
 
 	type Props = {
@@ -21,47 +23,53 @@
 	}: Props = $props();
 </script>
 
-<VStack gap={5}>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+<VStack width="100%" gap={5}>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Font size</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{fontSize.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={fontSize} min={5} max={20} step={0.5} />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Border radius</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{borderRadius.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={borderRadius} min={0} max={30} step={0.5} />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Padding X</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingX.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={paddingX} min={0} max={20} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Padding Y</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingY.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={paddingY} min={0} max={20} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Gap</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{gap.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={gap} min={0} max={20} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" gap={7.5}>
 			<span class="font-medium">Inset</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{inset.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={inset} min={0} max={10} step="any" />
-	</div>
+	</VStack>
 </VStack>

package/dist/components/Local/StyleControls.svelte

@@ -48,7 +48,7 @@
 	let panel = $state<Panel>('layout');
 </script>
 
-<VStack gap={7.5} fontSize={8.75} color="var(--sveltely-text-primary-color)">
+<VStack width="100%" gap={7.5} fontSize={8.75} color="var(--sveltely-text-primary-color)">
 	<SegmentedPicker options={panelOptions} bind:value={panel} />
 	{#if panel === 'layout'}
 		<LayoutStyleControls

package/dist/index.d.ts

@@ -5,8 +5,8 @@ export type { TooltipOptions } from './actions/tooltip';
 export { loader } from './actions/loader';
 export type { LoaderOptions } from './actions/loader';
 export type { LoaderProps } from './style/loader';
-export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
-export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutProps, LayoutSizeValue } from './style/layout';
+export { Axis, LayoutDimension } from './style/layout';
+export type { AxisValue, LayoutAxis, LayoutAxisBehavior, LayoutDimensionValue, LayoutProps } from './style/layout';
 export { LabelOrientation } from './style/label';
 export type { LabelOrientationValue } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
@@ -18,6 +18,9 @@ export type { TextAlignmentValue, TextAsValue, TextProps } from './style/text';
 export { TextFieldType, TextInputMode } from './style/text-editor';
 export type { TextEditorProps, TextFieldTypeValue, TextInputModeValue } from './style/text-editor';
 export type { TooltipProps } from './style/tooltip';
+export * from './viewport';
+export { default as Accordion } from './components/Library/Accordion';
+export type { AccordionState } from './components/Library/Accordion';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
@@ -33,6 +36,8 @@ export type { ImageMaskValue } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
 export { default as Link } from './components/Library/Link';
 export { default as NavigationStack } from './components/Library/NavigationStack';
+export { default as Notifications } from './components/Library/Notifications';
+export type { NotificationItem, NotificationTone } from './components/Library/Notifications';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';
 export { default as Pagination } from './components/Library/Pagination';
@@ -59,6 +64,6 @@ export { default as Calendar } from './components/Library/Calendar';
 export { default as AsyncButton } from './components/Library/AsyncButton';
 export { default as SearchField } from './components/Library/SearchField';
 export { default as ScrollView } from './components/Library/ScrollView';
-export type { ScrollGeometry } from './components/Library/ScrollView';
+export type { ScrollContentSize, ScrollGeometry, ScrollViewHandle, ScrollViewOverscrollBehavior } from './components/Library/ScrollView';
 export { default as TokenSearchField } from './components/Library/TokenSearchField';
 export { default as VStack } from './components/Library/VStack';

package/dist/index.js

@@ -2,12 +2,14 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
 export { loader } from './actions/loader';
-export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
+export { Axis, LayoutDimension } from './style/layout';
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
 export { ScrollAxis } from './style/scroll';
 export { TextAlignment, TextAs } from './style/text';
 export { TextFieldType, TextInputMode } from './style/text-editor';
+export * from './viewport';
+export { default as Accordion } from './components/Library/Accordion';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
@@ -22,6 +24,7 @@ export { default as ImageMask } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
 export { default as Link } from './components/Library/Link';
 export { default as NavigationStack } from './components/Library/NavigationStack';
+export { default as Notifications } from './components/Library/Notifications';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';
 export { default as Pagination } from './components/Library/Pagination';

package/dist/style/index.css

@@ -89,11 +89,11 @@
 	}
 
 	.vstack {
-		@apply flex min-h-0 min-w-0 flex-col;
+		@apply inline-flex min-h-0 min-w-0 flex-col;
 	}
 
 	.hstack {
-		@apply flex min-h-0 min-w-0 flex-row;
+		@apply inline-flex min-h-0 min-w-0 flex-row;
 	}
 
 	.button,
@@ -119,7 +119,6 @@
 }
 
 .overflow-auto > .vstack,
-.overflow-auto > .hstack,
-.overflow-auto > .grid {
+.overflow-auto > .hstack {
 	flex-shrink: 0;
 }