agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(electrobun): tab bar at bottom, collapse slides down naturally

Browse source
This commit is contained in:
Hibryda 2026-03-20 02:29:49 +01:00
parent cb4fe5bd4a
commit 3d1cd0028f
5 changed files with 56 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

46
ui-electrobun/src/mainview/TerminalTabs.svelte
View file

@ -61,7 +61,23 @@
</script>
<div class="terminal-section" style="--accent: {accent}">
<!-- Section header: collapse toggle + terminal tabs -->
<!-- Terminal panes ABOVE the tab bar — collapse shrinks upward, tab bar stays at bottom -->
<div class="term-panes" class:collapsed>
{#each tabs as tab (tab.id)}
{#if mounted.has(tab.id)}
<div
class="term-pane"
style:display={activeTabId === tab.id ? 'flex' : 'none'}
role="tabpanel"
aria-label={tab.title}
>
<Terminal />
</div>
{/if}
{/each}
</div>
<!-- Tab bar at BOTTOM — slides down as panes collapse -->
<div class="term-section-header">
<button
class="collapse-btn"
@ -81,11 +97,10 @@
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="6 9 12 15 18 9"/>
<polyline points="6 15 12 9 18 15"/>
</svg>
</button>
<!-- Tab pills -->
<div class="term-tabs" role="tablist" aria-label="Terminal tabs">
{#each tabs as tab (tab.id)}
<button
@ -118,25 +133,6 @@
>+</button>
</div>
</div>
<!--
Terminal panes: always rendered (display:none when collapsed) so xterm state
is preserved across collapse/expand. Using display:none instead of {#if}.
-->
<div class="term-panes" class:collapsed>
{#each tabs as tab (tab.id)}
{#if mounted.has(tab.id)}
<div
class="term-pane"
style:display={activeTabId === tab.id ? 'flex' : 'none'}
role="tabpanel"
aria-label={tab.title}
>
<Terminal />
</div>
{/if}
{/each}
</div>
</div>
<style>
@ -154,10 +150,10 @@
align-items: stretch;
height: 1.875rem;
background: var(--ctp-mantle);
border-bottom: 1px solid var(--ctp-surface0);
border-top: 1px solid var(--ctp-surface0);
flex-shrink: 0;
position: relative;
z-index: 10; /* Above terminal canvas so buttons are clickable */
z-index: 10;
}
.collapse-btn {
@ -184,7 +180,7 @@
}
.chevron.rotated {
transform: rotate(-90deg);
transform: rotate(90deg);
}
/* Tab pills */