Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
Original file line number Diff line number Diff line change
@@ -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). */
Expand Down Expand Up @@ -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: () => ({
Expand Down
4 changes: 2 additions & 2 deletions packages/hub-ui/src/client/components/dock/DockEdge.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down
Loading