Skip to content

feat: enhance TerminalLayout with preview actions and overflow handling #1862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jarvishappy merged 1 commit into from
Mar 23, 2026
+60 −0
Merged

feat: enhance TerminalLayout with preview actions and overflow handling #1862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 22 additions & 0 deletions src/renderer/src/views/layouts/TerminalLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@
>
<div
class="main-terminal-area"
:class="{ 'has-preview-actions': isPreviewActionsVisible }"
@mousedown="handleMainPaneFocus"
>
<transition name="fade">
Expand All @@ -218,6 +219,7 @@
v-if="configLoaded"
ref="dockviewRef"
:class="currentTheme === 'light' ? 'dockview-theme-light' : 'dockview-theme-dark'"
:disable-tabs-overflow-list="true"
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

dockview-vue disable-tabs-overflow-list prop

💡 Result:

No, there is no "disable-tabs-overflow-list" prop in dockview-vue. Official documentation at dockview.dev does not list this prop in DockviewVue options or IDockviewVueProps. Tab overflow behavior (dropdown/scroller when tabs exceed width) is handled internally by the library, with mentions in GitHub issues (#1062, #506) but no documented prop to disable the overflow list/dropdown. Customization is possible via custom tab renderers or CSS, but no direct boolean prop exists. Latest version is v5.1.0 (2026-03-02).

Citations:

🏁 Script executed:

# Check if the file exists and locate the line with disable-tabs-overflow-list
cd src/renderer/src/views/layouts && grep -n "disable-tabs-overflow-list" TerminalLayout.vue

Repository: chaterm/Chaterm

Length of output: 125

🏁 Script executed:

# Read the context around line 222 to understand the component structure
sed -n '210,235p' src/renderer/src/views/layouts/TerminalLayout.vue

Repository: chaterm/Chaterm

Length of output: 1284

🏁 Script executed:

# Check the package.json to verify the dockview-vue version used
cat package.json | grep -A 2 -B 2 "dockview-vue"

Repository: chaterm/Chaterm

Length of output: 198

🌐 Web query:

dockview-vue v4.11.0 disable-tabs-overflow-list prop tabs overflow

💡 Result:

No evidence found of a prop named "disable-tabs-overflow-list" in dockview-vue v4.11.0 or any version. For handling tabs overflow in Dockview (including dockview-vue), use the scrollbars={"native"} option introduced in v4.2.0 to enable native browser scrollbars on tab headers instead of the custom JS scrollbar. This was added to address issues with custom scrolling behavior, such as touchpad scrolling conflicts and drag-and-drop problems when tabs overflow. To apply it, pass it in the Dockview options or group options via the API: In DockviewVue props or onReady event: event.api.addGroup({ id: 'myGroup', scrollbars: 'native' // or { header: 'native' } if structured that way }); or globally: This uses native scrolling, which may prevent or alter the overflow list/dropdown behavior for hidden tabs (mentioned in v4.0.0 release notes: hidden tabs accessible via dropdown). Custom overflow popover can be rendered by consumers (issue #1062). No direct disable prop confirmed; use native scrollbars or custom tab rendering/CSS to manage overflow. v4.11.0 exists per releases and includes fixes post-v4.2.0.

Citations:

🏁 Script executed:

# Check if node_modules is available and if we can inspect the type definitions
if [ -d "node_modules/dockview-vue" ]; then
  echo "=== dockview-vue package found ===" 
  cat node_modules/dockview-vue/package.json | grep '"version"'
  
  # Search for the prop in type definitions or source
  find node_modules/dockview-vue -type f -name "*.d.ts" | head -5
  
  # Try to find any reference to disable-tabs-overflow-list
  grep -r "disable-tabs-overflow-list" node_modules/dockview-vue 2>/dev/null || echo "Prop not found in node_modules"
fi

Repository: chaterm/Chaterm

Length of output: 41

Remove the invalid disable-tabs-overflow-list prop and use the correct scrollbars option instead.

The disable-tabs-overflow-list prop does not exist in dockview-vue v4.11.0 (the version used in this project). To handle tabs overflow behavior, use the scrollbars option introduced in v4.2.0: either pass it to DockviewVue via :options="{ scrollbars: 'native' }" or apply it to specific groups through the API with event.api.addGroup({ id: 'groupId', scrollbars: 'native' }).

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/renderer/src/views/layouts/TerminalLayout.vue` at line 222, Remove the
invalid prop disable-tabs-overflow-list from the DockviewVue usage and instead
pass the scrollbars option (e.g. via the DockviewVue :options prop) or set it
per-group via the API; update the component where disable-tabs-overflow-list is
used to use DockviewVue's :options with scrollbars: 'native' or call
event.api.addGroup({ id: 'groupId', scrollbars: 'native' }) when creating groups
so tabs overflow is handled by the supported scrollbars option.

:style="{
width: '100%',
height: '100%',
Expand Down Expand Up @@ -2251,6 +2253,14 @@ const panelCount = ref(0)
const hasPanels = computed(() => panelCount.value > 0)
let dockApi: DockviewApi | null = null
const dockApiInstance = ref<DockviewApi | null>(null)
const isPreviewActionsVisible = ref(false)

const computePreviewActionsVisible = (): boolean => {
const panel = dockApi?.activePanel
if (!panel) return false
// Keep in sync with `EditorActions.vue` showActions logic.
return panel.params?.content === 'KnowledgeCenterEditor' && panel.params?.mode !== 'preview' && panel.params?.isMarkdown
}

const isFocusInTerminal = (event: KeyboardEvent): boolean => {
const target = event.target as HTMLElement | null
Expand Down Expand Up @@ -2377,6 +2387,7 @@ const handleActivePanelChange = async () => {
const onDockReady = (event: DockviewReadyEvent) => {
dockApi = event.api
dockApiInstance.value = event.api
isPreviewActionsVisible.value = computePreviewActionsVisible()

dockApi.onDidAddPanel(() => {
panelCount.value = dockApi?.panels.length ?? 0
Expand All @@ -2392,6 +2403,7 @@ const onDockReady = (event: DockviewReadyEvent) => {
})

dockApi.onDidActivePanelChange(() => {
isPreviewActionsVisible.value = computePreviewActionsVisible()
handleActivePanelChange()
})

Expand Down Expand Up @@ -2958,6 +2970,16 @@ defineExpose({
right: 0;
z-index: 10;
}

// Reserve space for the preview actions overlay so it never covers
// Dockview header tabs when they overflow/clamp.
&.has-preview-actions {
.dockview-theme-light .dv-tabs-and-actions-container,
.dockview-theme-dark .dv-tabs-and-actions-container {
padding-right: 30px;
box-sizing: border-box;
}
}
}

.ant-input-group-wrapper {
Expand Down
32 changes: 32 additions & 0 deletions src/renderer/src/views/layouts/__tests__/TerminalLayout.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
*/

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { readFileSync } from 'node:fs'
import { join } from 'node:path'
import { ref } from 'vue'

// Mocks (required by AI Sidebar tests)
Expand Down Expand Up @@ -439,6 +441,36 @@ describe('TerminalLayout - Close Tab Keyboard Shortcut', () => {
})
})

describe('TerminalLayout - Dockview Tabs Overflow', () => {
it('should disable tabs overflow dropdown list', () => {
const sourcePath = join(process.cwd(), 'src/renderer/src/views/layouts/TerminalLayout.vue')
const source = readFileSync(sourcePath, 'utf8')
expect(source).toContain('disable-tabs-overflow-list')
})
})

describe('TerminalLayout - Preview Actions Layout', () => {
it('should reserve right padding for preview actions overlay', () => {
const sourcePath = join(process.cwd(), 'src/renderer/src/views/layouts/TerminalLayout.vue')
const source = readFileSync(sourcePath, 'utf8')
expect(source).toContain('padding-right: 30px')
})

it('should set fixed width for preview actions button container', () => {
const sourcePath = join(process.cwd(), 'src/renderer/src/views/layouts/components/EditorActions.vue')
const source = readFileSync(sourcePath, 'utf8')
expect(source).toContain('width: 30px')
expect(source).toContain('min-width: 30px')
})

it('should only apply padding when preview actions are visible', () => {
const sourcePath = join(process.cwd(), 'src/renderer/src/views/layouts/TerminalLayout.vue')
const source = readFileSync(sourcePath, 'utf8')
expect(source).toContain('has-preview-actions')
expect(source).toContain('computePreviewActionsVisible')
})
})

// ========== Tab Context Menu ==========
describe('TerminalLayout - Tab Context Menu', () => {
let mockDockApi: any
Expand Down
6 changes: 6 additions & 0 deletions src/renderer/src/views/layouts/components/EditorActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,11 @@ const openPreview = () => {
display: flex;
align-items: center;
padding: 0 8px;
width: 30px;
min-width: 30px;
flex: 0 0 30px;
flex-shrink: 0;
box-sizing: border-box;
height: 35px; /* Match tab height */
background: var(--bg-color-secondary);
border-bottom: 1px solid var(--border-color);
Expand All @@ -102,6 +107,7 @@ const openPreview = () => {
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
color: var(--text-color-secondary);
Expand Down
Loading