fix(electrobun): terminal collapse animation + tab bar z-index above canvas
This commit is contained in:
parent
4ae558af17
commit
bdd4477aec
1 changed files with 13 additions and 3 deletions
|
|
@ -25,7 +25,9 @@
|
|||
// Track which tabs have been mounted at least once (for lazy init)
|
||||
let mounted = $state<Set<string>>(new Set([firstTabId]));
|
||||
|
||||
function addTab() {
|
||||
function addTab(e?: MouseEvent) {
|
||||
// Blur terminal canvas so future clicks on tab bar work
|
||||
if (e) (e.target as HTMLElement)?.focus();
|
||||
const id = `${projectId}-t${counter}`;
|
||||
tabs = [...tabs, { id, title: `shell ${counter}` }];
|
||||
counter++;
|
||||
|
|
@ -121,7 +123,7 @@
|
|||
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" style:display={collapsed ? 'none' : 'block'}>
|
||||
<div class="term-panes" class:collapsed>
|
||||
{#each tabs as tab (tab.id)}
|
||||
{#if mounted.has(tab.id)}
|
||||
<div
|
||||
|
|
@ -154,6 +156,8 @@
|
|||
background: var(--ctp-mantle);
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 10; /* Above terminal canvas so buttons are clickable */
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
|
|
@ -266,8 +270,14 @@
|
|||
/* Terminal pane container */
|
||||
.term-panes {
|
||||
height: 12rem;
|
||||
min-height: 8rem;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
|
||||
.term-panes.collapsed {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.term-pane {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue