diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts index 9fd837ab..2d353952 100644 --- a/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts +++ b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts @@ -1,8 +1,10 @@ +import type { DevframeViewBuiltin } from '@devframes/hub' import type { Meta, StoryObj } from '@storybook/vue3-vite' import { h } from 'vue' import { categorizedEntries, groupedEntries } from '../../stories/fixtures' import { mountWithContext } from '../../stories/story-helpers' import FloatingElements from '../floating/FloatingElements.vue' +import ViewBuiltinSettings from '../views-builtin/ViewBuiltinSettings.vue' import DockEdge from './DockEdge.vue' /** A stand-in panel body (the real one mounts iframe/custom views). */ @@ -88,6 +90,35 @@ export const CollapsedIdle: Story = { }), } +const settingsEntry: DevframeViewBuiltin = { + type: '~builtin', + id: '~settings', + title: 'Settings', + icon: 'ph:gear-duotone', +} + +/** + * Bottom edge hosting the real Settings view, whose tab content is taller than + * the panel. Guards the panel's main-axis height chain: the other stories stub + * `#view` with short, self-scrolling content, so they cannot catch a content + * wrapper that grows past the panel instead of letting descendants scroll. + */ +export const BottomWithSettings: Story = { + render: () => ({ + setup: () => mountWithContext( + { + entries: categorizedEntries, + selectedId: 'overview', + panel: { mode: 'edge', position: 'bottom', height: 40 }, + }, + ctx => [ + h(DockEdge, { context: ctx }, { view: () => h(ViewBuiltinSettings, { context: ctx, entry: settingsEntry }) }), + h(FloatingElements), + ], + ), + }), +} + /** Edge dock hosting a group — the group rail shows inside the panel. */ export const WithGroup: Story = { render: () => ({ diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.vue b/packages/hub-ui/src/client/components/dock/DockEdge.vue index 0c3c81ef..a7ca55ab 100644 --- a/packages/hub-ui/src/client/components/dock/DockEdge.vue +++ b/packages/hub-ui/src/client/components/dock/DockEdge.vue @@ -363,8 +363,8 @@ const toolbarClass = computed(() => { const contentClass = computed(() => { return isVertical.value - ? 'flex-1 h-full overflow-clip' - : 'flex-1 w-full overflow-clip' + ? 'flex-1 h-full min-w-0 overflow-clip' + : 'flex-1 w-full min-h-0 overflow-clip' }) /** A thin band flush with the candidate edge, tracking the drag before it commits on release. */